diff --git a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
index cf1ac8dbc..9edd4130b 100644
--- a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1433" height="1589" viewBox="-146 -71 1433 1589"><rect x="-146.000000" y="-71.000000" width="1433" height="1589" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1433 1589"><svg id="d2-svg" width="1433" height="1589" viewBox="-146 -71 1433 1415"><rect x="-146.000000" y="-71.000000" width="1433" height="1589" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -27,27 +27,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="customer"><g class="shape" ><path d="M 206 160 H 12 V 158 C 12 136 33 116 67 107 C 48 99 37 87 37 73 C 37 50 69 31 109 31 C 148 31 181 50 181 73 C 181 87 170 99 151 107 C 185 117 206 136 206 158 V 160 H 206 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="109.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">customer</text></g><g id="issuer"><g class="shape" ><rect x="253.000000" y="115.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="303.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">issuer</text></g><g id="store"><g class="shape" ><rect x="397.000000" y="115.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="453.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">store</text><g transform="translate(493 99)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Like starbucks or something</title></g><g id="acquirer"><g class="shape" ><rect x="549.000000" y="115.000000" width="134.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="616.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">acquirer</text><g transform="translate(667 99)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>I&#39;m not sure what this is</title></g><g id="network"><g class="shape" ><rect x="749.000000" y="115.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="799.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">network</text></g><g id="customer bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="889.000000" y="32.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="953.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">customer bank</text></g><g id="store bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="1057.000000" y="32.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1121.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">store bank</text></g><g id="(customer -- )[0]"><path d="M 109.000000 188.000000 L 109.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(issuer -- )[0]"><path d="M 303.000000 183.000000 L 303.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(store -- )[0]"><path d="M 453.000000 183.000000 L 453.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(acquirer -- )[0]"><path d="M 616.000000 183.000000 L 616.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(network -- )[0]"><path d="M 799.000000 183.000000 L 799.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(customer bank -- )[0]"><path d="M 953.000000 188.000000 L 953.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(store bank -- )[0]"><path d="M 1121.000000 188.000000 L 1121.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="customer.internal"><g class="shape" ><rect x="103.000000" y="410.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="initial transaction"><g class="shape blend" ><rect x="69.000000" y="236.000000" width="424.000000" height="129.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="74.000000" y="241.000000" width="117.000000" height="21.000000" class=" fill-N5" /><text x="132.500000" y="257.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">initial transaction</text></g><g id="payment processor behind the scenes"><g class="shape blend" ><rect x="251.000000" y="821.000000" width="922.000000" height="380.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="256.000000" y="826.000000" width="253.000000" height="21.000000" class=" fill-N5" /><text x="382.500000" y="842.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">payment processor behind the scenes</text></g><g id="payment processor behind the scenes.simplified"><g class="shape blend" ><rect x="263.000000" y="990.000000" width="898.000000" height="199.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="268.000000" y="995.000000" width="66.000000" height="21.000000" class=" fill-N5" /><text x="301.000000" y="1011.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">simplified</text></g><g id="(customer -&gt; store)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 111.000000 280.000000 L 449.000000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="281.500000" y="286.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">1 banana please</text></g><g id="(store -&gt; customer)[0]"><path d="M 451.000000 350.000000 L 113.000000 350.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="281.500000" y="356.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">$10 dollars</text></g><g id="customer.(internal -&gt; internal)[0]"><path d="M 117.000000 420.000000 L 179.000000 420.000000 S 189.000000 420.000000 189.000000 430.000000 L 189.000000 455.000000 S 189.000000 465.000000 179.000000 465.000000 L 119.000000 465.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="189.000000" y="448.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">thinking: wow, inflation</text></g><g id="(customer.internal -&gt; customer bank)[0]"><path d="M 117.000000 490.000000 L 949.000000 490.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="534.000000" y="496.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">checks bank account</text></g><g id="(customer bank -&gt; customer.internal)[0]"><path d="M 951.000000 560.000000 L 119.000000 560.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="534.500000" y="566.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Savings: $11</text></g><g id="(customer -&gt; store)[1]"><path d="M 111.000000 766.000000 L 449.000000 766.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="281.500000" y="772.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">I can do that, here&#39;s my card</text></g><g id="(store -&gt; acquirer)[0]"><path d="M 455.000000 865.000000 L 612.000000 865.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="535.000000" y="871.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Run this card</text></g><g id="(acquirer -&gt; network)[0]"><path d="M 618.000000 935.000000 L 795.000000 935.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="707.500000" y="941.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Process to card issuer</text></g><g id="(network -&gt; issuer)[0]"><path d="M 797.000000 1034.000000 L 307.000000 1034.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="551.000000" y="1040.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Process this payment</text></g><g id="(issuer -&gt; customer bank)[0]"><path d="M 305.000000 1104.000000 L 949.000000 1104.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="628.500000" y="1110.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">$10 debit</text></g><g id="(acquirer -&gt; store bank)[0]"><path d="M 618.000000 1174.000000 L 1117.000000 1174.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="868.500000" y="1180.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">$10 credit</text></g><g id="customer.An error in judgement is about to occur"><g class="shape" ><path d="M -44 630 H 242 C 243 630 244 630 245 631 L 262 647 C 263 648 263 649 263 650 V 696 C 263 696 263 696 263 696 H -44 C -44 696 -44 696 -44 696 V 631 C -44 630 -44 630 -44 630 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 262 696 H -43 C -44 696 -44 696 -44 695 V 631 C -44 630 -44 630 -43 630 H 241 C 242 630 242 630 242 631 V 648 C 242 649 243 650 244 650 H 262 C 263 650 263 650 263 651 V 695 C 262 696 263 696 262 696 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="109.500000" y="668.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">An error in judgement is about to occur</text></g><mask id="3567748873" maskUnits="userSpaceOnUse" x="-146" y="-71" width="1433" height="1415">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="customer"><g class="shape" ><path d="M 206 160 H 12 V 158 C 12 136 33 116 67 107 C 48 99 37 87 37 73 C 37 50 69 31 109 31 C 148 31 181 50 181 73 C 181 87 170 99 151 107 C 185 117 206 136 206 158 V 160 H 206 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="109.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">customer</text></g><g id="issuer"><g class="shape" ><rect x="253.000000" y="115.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="303.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">issuer</text></g><g id="store"><g class="shape" ><rect x="397.000000" y="115.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="453.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">store</text><g transform="translate(493 99)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Like starbucks or something</title></g><g id="acquirer"><g class="shape" ><rect x="549.000000" y="115.000000" width="134.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="616.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">acquirer</text><g transform="translate(667 99)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>I&#39;m not sure what this is</title></g><g id="network"><g class="shape" ><rect x="749.000000" y="115.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="799.000000" y="153.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">network</text></g><g id="customer bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="889.000000" y="32.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="953.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">customer bank</text></g><g id="store bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="1057.000000" y="32.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1121.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">store bank</text></g><g id="(customer -- )[0]"><path d="M 109.000000 188.000000 L 109.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(issuer -- )[0]"><path d="M 303.000000 183.000000 L 303.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(store -- )[0]"><path d="M 453.000000 183.000000 L 453.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(acquirer -- )[0]"><path d="M 616.000000 183.000000 L 616.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(network -- )[0]"><path d="M 799.000000 183.000000 L 799.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(customer bank -- )[0]"><path d="M 953.000000 188.000000 L 953.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="(store bank -- )[0]"><path d="M 1121.000000 188.000000 L 1121.000000 1243.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3567748873)" /></g><g id="customer.internal"><g class="shape" ><rect x="103.000000" y="410.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="initial transaction"><g class="shape blend" ><rect x="69.000000" y="236.000000" width="424.000000" height="129.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="74.000000" y="241.000000" width="117.000000" height="21.000000" class=" fill-N5" /><text x="132.500000" y="257.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">initial transaction</text></g><g id="payment processor behind the scenes"><g class="shape blend" ><rect x="251.000000" y="821.000000" width="922.000000" height="380.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="256.000000" y="826.000000" width="253.000000" height="21.000000" class=" fill-N5" /><text x="382.500000" y="842.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">payment processor behind the scenes</text></g><g id="payment processor behind the scenes.simplified"><g class="shape blend" ><rect x="263.000000" y="990.000000" width="898.000000" height="199.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="268.000000" y="995.000000" width="66.000000" height="21.000000" class=" fill-N5" /><text x="301.000000" y="1011.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">simplified</text></g><g id="(customer -&gt; store)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 111.000000 280.000000 L 449.000000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="281.500000" y="286.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">1 banana please</text></g><g id="(store -&gt; customer)[0]"><path d="M 451.000000 350.000000 L 113.000000 350.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="281.500000" y="356.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">$10 dollars</text></g><g id="customer.(internal -&gt; internal)[0]"><path d="M 117.000000 420.000000 L 179.000000 420.000000 S 189.000000 420.000000 189.000000 430.000000 L 189.000000 455.000000 S 189.000000 465.000000 179.000000 465.000000 L 119.000000 465.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="189.000000" y="448.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">thinking: wow, inflation</text></g><g id="(customer.internal -&gt; customer bank)[0]"><path d="M 117.000000 490.000000 L 949.000000 490.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="534.000000" y="496.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">checks bank account</text></g><g id="(customer bank -&gt; customer.internal)[0]"><path d="M 951.000000 560.000000 L 119.000000 560.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="534.500000" y="566.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Savings: $11</text></g><g id="(customer -&gt; store)[1]"><path d="M 111.000000 766.000000 L 449.000000 766.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="281.500000" y="772.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">I can do that, here&#39;s my card</text></g><g id="(store -&gt; acquirer)[0]"><path d="M 455.000000 865.000000 L 612.000000 865.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="535.000000" y="871.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Run this card</text></g><g id="(acquirer -&gt; network)[0]"><path d="M 618.000000 935.000000 L 795.000000 935.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="707.500000" y="941.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Process to card issuer</text></g><g id="(network -&gt; issuer)[0]"><path d="M 797.000000 1034.000000 L 307.000000 1034.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="551.000000" y="1040.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Process this payment</text></g><g id="(issuer -&gt; customer bank)[0]"><path d="M 305.000000 1104.000000 L 949.000000 1104.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="628.500000" y="1110.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">$10 debit</text></g><g id="(acquirer -&gt; store bank)[0]"><path d="M 618.000000 1174.000000 L 1117.000000 1174.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567748873)" /><text x="868.500000" y="1180.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">$10 credit</text></g><g id="customer.An error in judgement is about to occur"><g class="shape" ><path d="M -44 630 H 242 C 243 630 244 630 245 631 L 262 647 C 263 648 263 649 263 650 V 696 C 263 696 263 696 263 696 H -44 C -44 696 -44 696 -44 696 V 631 C -44 630 -44 630 -44 630 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 262 696 H -43 C -44 696 -44 696 -44 695 V 631 C -44 630 -44 630 -43 630 H 241 C 242 630 242 630 242 631 V 648 C 242 649 243 650 244 650 H 262 C 263 650 263 650 263 651 V 695 C 262 696 263 696 262 696 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="109.500000" y="668.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">An error in judgement is about to occur</text></g><mask id="3567748873" maskUnits="userSpaceOnUse" x="-146" y="-71" width="1433" height="1415">
 <rect x="-146" y="-71" width="1433" height="1415" fill="white"></rect>
 <rect x="74.000000" y="241.000000" width="117" height="16" fill="black"></rect>
 <rect x="256.000000" y="826.000000" width="253" height="16" fill="black"></rect>
@@ -63,7 +43,7 @@
 <rect x="481.000000" y="1024.000000" width="140" height="21" fill="black"></rect>
 <rect x="598.000000" y="1094.000000" width="61" height="21" fill="black"></rect>
 <rect x="836.000000" y="1164.000000" width="65" height="21" fill="black"></rect>
-</mask><line x1="-86.000000" x2="1227.000000" y1="1294.000000" y2="1294.000000" class=" stroke-B2" /><g class="appendix" x="-46" y="1244" width="1233" height="100%"><g transform="translate(0 1344)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="1344" style="font-size: 16px;">Like starbucks or something</text>
+</mask></svg><line x1="-86.000000" x2="1227.000000" y1="1294.000000" y2="1294.000000" class=" stroke-B2" /><g class="appendix" x="-46" y="1244" width="1233" height="100%"><g transform="translate(0 1344)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="1344" style="font-size: 16px;">Like starbucks or something</text>
 <g transform="translate(0 1396)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="1396" style="font-size: 16px;">I&#39;m not sure what this is</text></g>
 <style type="text/css"><![CDATA[
 .text-bold {
diff --git a/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
index 96454dd53..e53866ca0 100644
--- a/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="565" height="683" viewBox="-102 -118 565 683"><rect x="-102.000000" y="-118.000000" width="565" height="683" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 463 683"><svg id="d2-svg" width="463" height="683" viewBox="-102 -118 338 452"><rect x="-102.000000" y="-118.000000" width="463" height="683" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,30 +20,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://terrastruct.com" xlink:href="https://terrastruct.com"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2830374313)" /></g><mask id="2830374313" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://terrastruct.com" xlink:href="https://terrastruct.com"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2830374313)" /></g><mask id="2830374313" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
 <rect x="-102" y="-118" width="338" height="452" fill="white"></rect>
 
-</mask><line x1="-42.000000" x2="423.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
+</mask></svg><line x1="-42.000000" x2="423.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
 <g transform="translate(0 386)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="386" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text>
 <g transform="translate(0 443)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">3</text></g><text class="text" x="48" y="443" style="font-size: 16px;">https://terrastruct.com</text></g>
 <style type="text/css"><![CDATA[
diff --git a/d2renderers/d2svg/appendix/testdata/links_dark/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/links_dark/sketch.exp.svg
index a6894b576..826a31e9b 100644
--- a/d2renderers/d2svg/appendix/testdata/links_dark/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/links_dark/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="565" height="683" viewBox="-102 -118 565 683"><rect x="-102.000000" y="-118.000000" width="565" height="683" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 463 683"><svg id="d2-svg" width="463" height="683" viewBox="-102 -118 338 452"><rect x="-102.000000" y="-118.000000" width="463" height="683" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,30 +20,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://fosny.eu" xlink:href="https://fosny.eu"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2203485110)" /></g><mask id="2203485110" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://fosny.eu" xlink:href="https://fosny.eu"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2203485110)" /></g><mask id="2203485110" maskUnits="userSpaceOnUse" x="-102" y="-118" width="338" height="452">
 <rect x="-102" y="-118" width="338" height="452" fill="white"></rect>
 
-</mask><line x1="-42.000000" x2="423.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
+</mask></svg><line x1="-42.000000" x2="423.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="138" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">https://d2lang.com</text>
 <g transform="translate(0 386)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="386" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text>
 <g transform="translate(0 443)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">3</text></g><text class="text" x="48" y="443" style="font-size: 16px;">https://fosny.eu</text></g>
 <style type="text/css"><![CDATA[
diff --git a/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
index 9b68bac61..5ff672b75 100644
--- a/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="566" height="631" viewBox="-102 -118 566 631"><rect x="-102.000000" y="-118.000000" width="566" height="631" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 464 631"><svg id="d2-svg" width="464" height="631" viewBox="-102 -118 306 452"><rect x="-102.000000" y="-118.000000" width="464" height="631" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,30 +20,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3331949590)" /></g><mask id="3331949590" maskUnits="userSpaceOnUse" x="-102" y="-118" width="306" height="452">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3331949590)" /></g><mask id="3331949590" maskUnits="userSpaceOnUse" x="-102" y="-118" width="306" height="452">
 <rect x="-102" y="-118" width="306" height="452" fill="white"></rect>
 
-</mask><line x1="-42.000000" x2="424.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="106" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">Total abstinence is easier than perfect moderation</text>
+</mask></svg><line x1="-42.000000" x2="424.000000" y1="284.000000" y2="284.000000" class=" stroke-B2" /><g class="appendix" x="-2" y="234" width="106" height="100%"><g transform="translate(0 334)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="334" style="font-size: 16px;">Total abstinence is easier than perfect moderation</text>
 <g transform="translate(0 386)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="386" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text></g>
 <style type="text/css"><![CDATA[
 .text {
diff --git a/d2renderers/d2svg/dark_theme/testdata/all_shapes/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/all_shapes/dark_theme.exp.svg
index 989bf28c8..c4f86530d 100644
--- a/d2renderers/d2svg/dark_theme/testdata/all_shapes/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/all_shapes/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1410" height="712" viewBox="-102 -102 1410 712"><rect x="-102.000000" y="-102.000000" width="1410.000000" height="712.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1410 712"><svg id="d2-svg" width="1410" height="712" viewBox="-102 -102 1410 712"><rect x="-102.000000" y="-102.000000" width="1410.000000" height="712.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="rectangle"><g class="shape" ><rect x="0.000000" y="13.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="60.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="11.000000" y="192.000000" width="98.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="60.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 20 406 H 80 C 81 406 82 406 83 407 L 100 423 C 101 424 101 425 101 426 V 493 C 101 493 101 493 101 493 H 19 C 19 493 19 493 19 493 V 407 C 19 406 19 406 20 406 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 100 493 H 20 C 19 493 19 493 19 492 V 407 C 19 406 19 406 20 406 H 79 C 80 406 80 406 80 407 V 424 C 80 425 81 426 82 426 H 100 C 101 426 101 426 101 427 V 492 C 100 493 101 493 100 493 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="60.000000" y="455.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 206 13 L 384 13 L 358 79 L 180 79 L 180 79 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="282.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 219 268 L 219 203 L 346 203 L 346 268 C 325 254 304 254 283 268 C 261 283 240 283 219 268 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="282.500000" y="236.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 227 414 C 227 390 277 390 282 390 C 288 390 337 390 337 414 V 484 C 337 508 288 508 282 508 C 277 508 227 508 227 484 V 414 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 227 414 C 227 438 277 438 282 438 C 288 438 337 438 337 414" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="282.000000" y="466.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 468 13 H 565 C 589 13 589 43 589 46 C 589 49 589 79 565 79 H 468 C 444 79 444 49 444 46 C 444 43 444 13 468 13 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 565 13 C 541 13 541 43 541 46 C 541 49 541 79 565 79" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="504.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 461 205 L 517 205 L 517 220 L 572 220 L 572 278 L 461 278 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="516.500000" y="254.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 457 399 L 542 399 L 577 450 L 542 500 L 457 500 L 492 450 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="517.000000" y="455.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 673 1 V 47 H 724 V 92 L 754 47 H 775 V 1 H 673 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="724.000000" y="29.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 655 208 H 808 C 804 208 793 226 793 241 C 793 256 804 274 808 274 H 655 C 651 274 640 256 640 241 C 640 226 651 208 655 208 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="724.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 811 507 H 637 V 505 C 637 485 656 467 686 459 C 670 452 660 441 660 429 C 660 408 688 391 724 391 C 759 391 788 408 788 429 C 788 441 778 452 762 460 C 792 469 811 486 811 506 V 507 H 811 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="724.000000" y="454.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 920 92 C 919 92 919 92 918 92 L 836 47 C 835 47 835 46 836 45 L 918 0 C 919 -0 920 -0 921 0 L 1004 45 C 1005 45 1005 46 1004 47 L 922 92 C 921 92 921 92 920 92 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="920.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="51.500000" ry="34.500000" cx="919.500000" cy="241.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="919.500000" y="247.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="46.500000" ry="46.500000" cx="919.500000" cy="449.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="919.500000" y="455.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1100 12 L 1065 46 L 1100 81 L 1171 81 L 1206 46 L 1171 12 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1135.500000" y="52.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1098 228 C 1098 229 1097 230 1097 230 C 1088 231 1080 242 1080 256 C 1080 271 1088 283 1099 283 H 1170 C 1181 283 1190 270 1190 255 C 1190 240 1182 228 1171 227 C 1170 227 1170 226 1169 225 C 1167 210 1156 199 1143 199 C 1135 199 1127 204 1122 211 C 1121 212 1121 212 1120 212 C 1118 211 1116 211 1114 211 C 1106 211 1099 218 1098 228 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1135.045000" y="262.516000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 60.000000 81.000000 C 60.000000 129.400000 60.000000 152.000000 60.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(square -&gt; page)[0]"><path d="M 60.000000 292.000000 C 60.000000 330.000000 60.000000 353.200000 60.000000 402.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 282.000000 81.000000 C 282.000000 129.400000 282.000000 154.200000 282.000000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 282.000000 271.000000 C 282.000000 325.800000 282.000000 350.000000 282.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(queue -&gt; package)[0]"><path d="M 516.015873 80.999937 C 516.400000 129.400000 516.600000 154.600000 516.968255 201.000126" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(package -&gt; step)[0]"><path d="M 516.016129 279.999935 C 516.400000 327.600000 516.400000 351.800000 516.033897 395.000144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 723.989474 48.999972 C 723.600000 123.000000 723.600000 155.200000 723.969698 204.000115" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 723.015151 275.999943 C 723.400000 326.800000 723.600000 350.200000 723.960786 387.000192" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 919.980001 93.999900 C 919.600000 132.000000 919.600000 155.000000 919.969232 203.000118" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 919.984375 277.999939 C 919.600000 327.200000 919.600000 352.600000 919.968255 399.000126" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1135.000000 83.000000 C 1135.000000 129.800000 1135.000000 153.800000 1135.000000 197.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><mask id="2401318740" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1410" height="712">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="rectangle"><g class="shape" ><rect x="0.000000" y="13.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="60.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="11.000000" y="192.000000" width="98.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="60.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 20 406 H 80 C 81 406 82 406 83 407 L 100 423 C 101 424 101 425 101 426 V 493 C 101 493 101 493 101 493 H 19 C 19 493 19 493 19 493 V 407 C 19 406 19 406 20 406 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 100 493 H 20 C 19 493 19 493 19 492 V 407 C 19 406 19 406 20 406 H 79 C 80 406 80 406 80 407 V 424 C 80 425 81 426 82 426 H 100 C 101 426 101 426 101 427 V 492 C 100 493 101 493 100 493 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="60.000000" y="455.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 206 13 L 384 13 L 358 79 L 180 79 L 180 79 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="282.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 219 268 L 219 203 L 346 203 L 346 268 C 325 254 304 254 283 268 C 261 283 240 283 219 268 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="282.500000" y="236.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 227 414 C 227 390 277 390 282 390 C 288 390 337 390 337 414 V 484 C 337 508 288 508 282 508 C 277 508 227 508 227 484 V 414 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 227 414 C 227 438 277 438 282 438 C 288 438 337 438 337 414" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="282.000000" y="466.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 468 13 H 565 C 589 13 589 43 589 46 C 589 49 589 79 565 79 H 468 C 444 79 444 49 444 46 C 444 43 444 13 468 13 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 565 13 C 541 13 541 43 541 46 C 541 49 541 79 565 79" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="504.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 461 205 L 517 205 L 517 220 L 572 220 L 572 278 L 461 278 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="516.500000" y="254.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 457 399 L 542 399 L 577 450 L 542 500 L 457 500 L 492 450 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="517.000000" y="455.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 673 1 V 47 H 724 V 92 L 754 47 H 775 V 1 H 673 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="724.000000" y="29.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 655 208 H 808 C 804 208 793 226 793 241 C 793 256 804 274 808 274 H 655 C 651 274 640 256 640 241 C 640 226 651 208 655 208 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="724.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 811 507 H 637 V 505 C 637 485 656 467 686 459 C 670 452 660 441 660 429 C 660 408 688 391 724 391 C 759 391 788 408 788 429 C 788 441 778 452 762 460 C 792 469 811 486 811 506 V 507 H 811 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="724.000000" y="454.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 920 92 C 919 92 919 92 918 92 L 836 47 C 835 47 835 46 836 45 L 918 0 C 919 -0 920 -0 921 0 L 1004 45 C 1005 45 1005 46 1004 47 L 922 92 C 921 92 921 92 920 92 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="920.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="51.500000" ry="34.500000" cx="919.500000" cy="241.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="919.500000" y="247.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="46.500000" ry="46.500000" cx="919.500000" cy="449.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="919.500000" y="455.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1100 12 L 1065 46 L 1100 81 L 1171 81 L 1206 46 L 1171 12 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1135.500000" y="52.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1098 228 C 1098 229 1097 230 1097 230 C 1088 231 1080 242 1080 256 C 1080 271 1088 283 1099 283 H 1170 C 1181 283 1190 270 1190 255 C 1190 240 1182 228 1171 227 C 1170 227 1170 226 1169 225 C 1167 210 1156 199 1143 199 C 1135 199 1127 204 1122 211 C 1121 212 1121 212 1120 212 C 1118 211 1116 211 1114 211 C 1106 211 1099 218 1098 228 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1135.045000" y="262.516000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 60.000000 81.000000 C 60.000000 129.400000 60.000000 152.000000 60.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(square -&gt; page)[0]"><path d="M 60.000000 292.000000 C 60.000000 330.000000 60.000000 353.200000 60.000000 402.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 282.000000 81.000000 C 282.000000 129.400000 282.000000 154.200000 282.000000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 282.000000 271.000000 C 282.000000 325.800000 282.000000 350.000000 282.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(queue -&gt; package)[0]"><path d="M 516.015873 80.999937 C 516.400000 129.400000 516.600000 154.600000 516.968255 201.000126" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(package -&gt; step)[0]"><path d="M 516.016129 279.999935 C 516.400000 327.600000 516.400000 351.800000 516.033897 395.000144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 723.989474 48.999972 C 723.600000 123.000000 723.600000 155.200000 723.969698 204.000115" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 723.015151 275.999943 C 723.400000 326.800000 723.600000 350.200000 723.960786 387.000192" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 919.980001 93.999900 C 919.600000 132.000000 919.600000 155.000000 919.969232 203.000118" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 919.984375 277.999939 C 919.600000 327.200000 919.600000 352.600000 919.968255 399.000126" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1135.000000 83.000000 C 1135.000000 129.800000 1135.000000 153.800000 1135.000000 197.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2401318740)" /></g><mask id="2401318740" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1410" height="712">
 <rect x="-102" y="-102" width="1410" height="712" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/animated/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/animated/dark_theme.exp.svg
index 48c63a0b3..b785892e6 100644
--- a/d2renderers/d2svg/dark_theme/testdata/animated/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/animated/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="431" height="800" viewBox="-102 -100 431 800"><rect x="-102.000000" y="-100.000000" width="431.000000" height="800.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 431 800"><svg id="d2-svg" width="431" height="800" viewBox="-102 -100 431 800"><rect x="-102.000000" y="-100.000000" width="431.000000" height="800.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -30,27 +30,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="winter"><g class="shape" ><rect x="16.000000" y="44.000000" width="211.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="121.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="0.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="77.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="trees"><g class="shape" ><rect x="84.000000" y="532.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="126.500000" y="570.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="winter.snow"><g class="shape" ><rect x="82.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="126.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="40.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="77.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 105.419957 139.380111 C 83.373494 160.400000 77.500000 176.000000 77.500000 191.000000 C 77.500000 206.000000 77.500000 280.400000 77.500000 334.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(summer.sun -&gt; trees)[0]"><path d="M 77.500000 406.000000 C 77.500000 426.400000 83.300000 492.000000 104.493128 528.539875" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(trees -&gt; winter.snow)[0]"><path d="M 146.645435 530.275464 C 169.126506 492.000000 175.000000 472.000000 175.000000 457.000000 C 175.000000 442.000000 175.000000 415.400000 175.000000 390.500000 C 175.000000 365.600000 175.000000 332.400000 175.000000 307.500000 C 175.000000 282.600000 175.000000 256.000000 175.000000 241.000000 C 175.000000 226.000000 169.200000 160.400000 148.877606 140.778378" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><mask id="1960707820" maskUnits="userSpaceOnUse" x="-102" y="-100" width="431" height="800">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="winter"><g class="shape" ><rect x="16.000000" y="44.000000" width="211.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="121.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="0.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="77.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="trees"><g class="shape" ><rect x="84.000000" y="532.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="126.500000" y="570.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="winter.snow"><g class="shape" ><rect x="82.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="126.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="40.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="77.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 105.419957 139.380111 C 83.373494 160.400000 77.500000 176.000000 77.500000 191.000000 C 77.500000 206.000000 77.500000 280.400000 77.500000 334.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(summer.sun -&gt; trees)[0]"><path d="M 77.500000 406.000000 C 77.500000 426.400000 83.300000 492.000000 104.493128 528.539875" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><g id="(trees -&gt; winter.snow)[0]"><path d="M 146.645435 530.275464 C 169.126506 492.000000 175.000000 472.000000 175.000000 457.000000 C 175.000000 442.000000 175.000000 415.400000 175.000000 390.500000 C 175.000000 365.600000 175.000000 332.400000 175.000000 307.500000 C 175.000000 282.600000 175.000000 256.000000 175.000000 241.000000 C 175.000000 226.000000 169.200000 160.400000 148.877606 140.778378" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1960707820)" /></g><mask id="1960707820" maskUnits="userSpaceOnUse" x="-102" y="-100" width="431" height="800">
 <rect x="-102" y="-100" width="431" height="800" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/arrowheads/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/arrowheads/dark_theme.exp.svg
index ffe4f5fdd..27d0eeffb 100644
--- a/d2renderers/d2svg/dark_theme/testdata/arrowheads/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/arrowheads/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1251" height="659" viewBox="-102 -102 1251 659"><rect x="-102.000000" y="-102.000000" width="1251.000000" height="659.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1251 659"><svg id="d2-svg" width="1251" height="659" viewBox="-102 -102 1251 659"><rect x="-102.000000" y="-102.000000" width="1251.000000" height="659.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="1047.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b"><g class="shape" ><rect x="0.000000" y="289.000000" width="1047.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="40.000000" y="50.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="b.1"><g class="shape" ><rect x="40.000000" y="339.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="152.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="b.2"><g class="shape" ><rect x="152.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.3"><g class="shape" ><rect x="266.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="293.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="b.3"><g class="shape" ><rect x="266.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="293.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="a.4"><g class="shape" ><rect x="380.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="b.4"><g class="shape" ><rect x="380.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="a.5"><g class="shape" ><rect x="494.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="521.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="b.5"><g class="shape" ><rect x="494.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="521.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="a.6"><g class="shape" ><rect x="608.000000" y="50.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="635.500000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">6</text></g><g id="b.6"><g class="shape" ><rect x="608.000000" y="339.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="635.500000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">6</text></g><g id="a.7"><g class="shape" ><rect x="725.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="752.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">7</text></g><g id="b.7"><g class="shape" ><rect x="725.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="752.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">7</text></g><g id="a.8"><g class="shape" ><rect x="839.000000" y="50.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="866.500000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">8</text></g><g id="b.8"><g class="shape" ><rect x="839.000000" y="339.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="866.500000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">8</text></g><g id="a.9"><g class="shape" ><rect x="954.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="981.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">9</text></g><g id="b.9"><g class="shape" ><rect x="954.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="981.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">9</text></g><g id="(a.1 -- b.1)[0]"><path d="M 66.000000 118.000000 C 66.000000 156.000000 66.000000 178.300000 66.000000 196.750000 C 66.000000 215.200000 66.000000 299.000000 66.000000 337.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2875289870)" /><text x="66.000000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">none</text></g><g id="(a.2 &lt;-&gt; b.2)[0]"><marker id="mk-986555416" markerWidth="10.000000" markerHeight="10.000000" refX="3.000000" refY="5.000000" viewBox="0.000000 0.000000 10.000000 10.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,5.000000 10.000000,0.000000 7.500000,5.000000 10.000000,10.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-2680246019" markerWidth="10.000000" markerHeight="10.000000" refX="7.000000" refY="5.000000" viewBox="0.000000 0.000000 10.000000 10.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,5.000000 0.000000,10.000000 2.500000,5.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 179.000000 120.000000 C 179.000000 156.000000 179.000000 178.300000 179.000000 196.750000 C 179.000000 215.200000 179.000000 299.000000 179.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-986555416)" marker-end="url(#mk-2680246019)" mask="url(#2875289870)" /><text x="179.000000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">arrow</text></g><g id="(a.3 &lt;-&gt; b.3)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 293.000000 120.000000 C 293.000000 156.000000 293.000000 178.300000 293.000000 196.750000 C 293.000000 215.200000 293.000000 299.000000 293.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2875289870)" /><text x="293.000000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">triangle</text></g><g id="(a.4 &lt;-&gt; b.4)[0]"><marker id="mk-2527347617" markerWidth="24.200000" markerHeight="18.000000" refX="3.950000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="2.750000,9.000000 13.200000,2.250000 24.200000,9.000000 13.200000,15.750000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 407.000000 120.000000 C 407.000000 156.000000 407.000000 178.300000 407.000000 196.750000 C 407.000000 215.200000 407.000000 299.000000 407.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2527347617)" marker-end="url(#mk-1565215268)" mask="url(#2875289870)" /><text x="407.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="(a.5 &lt;-&gt; b.5)[0]"><marker id="mk-765394478" markerWidth="22.000000" markerHeight="14.000000" refX="3.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-2256124137" markerWidth="22.000000" markerHeight="14.000000" refX="19.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 521.000000 120.000000 C 521.000000 156.000000 521.000000 178.300000 521.000000 196.750000 C 521.000000 215.200000 521.000000 299.000000 521.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-765394478)" marker-end="url(#mk-2256124137)" mask="url(#2875289870)" /><text x="521.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diamond filled</text></g><g id="(a.6 &lt;-&gt; b.6)[0]"><marker id="mk-2288727530" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><marker id="mk-599773101" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 635.500000 120.000000 C 635.500000 156.000000 635.500000 178.300000 635.500000 196.750000 C 635.500000 215.200000 635.500000 299.000000 635.500000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2288727530)" marker-end="url(#mk-599773101)" mask="url(#2875289870)" /><text x="635.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-many</text></g><g id="(a.7 &lt;-&gt; b.7)[0]"><marker id="mk-1160658688" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><marker id="mk-1946374923" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 751.500000 120.000000 C 751.500000 156.000000 751.500000 178.300000 751.500000 196.750000 C 751.500000 215.200000 751.500000 299.000000 751.500000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-1160658688)" marker-end="url(#mk-1946374923)" mask="url(#2875289870)" /><text x="751.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-many-required</text></g><g id="(a.8 &lt;-&gt; b.8)[0]"><marker id="mk-3108867711" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1268614626" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><path d="M 866.000000 120.000000 C 866.000000 156.000000 866.000000 178.300000 866.000000 196.750000 C 866.000000 215.200000 866.000000 299.000000 866.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-3108867711)" marker-end="url(#mk-1268614626)" mask="url(#2875289870)" /><text x="866.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-one</text></g><g id="(a.9 &lt;-&gt; b.9)[0]"><marker id="mk-3412706579" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1195536462" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><path d="M 980.500000 120.000000 C 980.500000 156.000000 980.500000 178.300000 980.500000 196.750000 C 980.500000 215.200000 980.500000 299.000000 980.500000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-3412706579)" marker-end="url(#mk-1195536462)" mask="url(#2875289870)" /><text x="980.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-one-required</text></g><mask id="2875289870" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1251" height="659">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="1047.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b"><g class="shape" ><rect x="0.000000" y="289.000000" width="1047.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="40.000000" y="50.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="b.1"><g class="shape" ><rect x="40.000000" y="339.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="152.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="b.2"><g class="shape" ><rect x="152.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.3"><g class="shape" ><rect x="266.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="293.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="b.3"><g class="shape" ><rect x="266.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="293.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="a.4"><g class="shape" ><rect x="380.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="b.4"><g class="shape" ><rect x="380.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="a.5"><g class="shape" ><rect x="494.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="521.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="b.5"><g class="shape" ><rect x="494.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="521.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="a.6"><g class="shape" ><rect x="608.000000" y="50.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="635.500000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">6</text></g><g id="b.6"><g class="shape" ><rect x="608.000000" y="339.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="635.500000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">6</text></g><g id="a.7"><g class="shape" ><rect x="725.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="752.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">7</text></g><g id="b.7"><g class="shape" ><rect x="725.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="752.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">7</text></g><g id="a.8"><g class="shape" ><rect x="839.000000" y="50.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="866.500000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">8</text></g><g id="b.8"><g class="shape" ><rect x="839.000000" y="339.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="866.500000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">8</text></g><g id="a.9"><g class="shape" ><rect x="954.000000" y="50.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="981.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">9</text></g><g id="b.9"><g class="shape" ><rect x="954.000000" y="339.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="981.000000" y="377.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">9</text></g><g id="(a.1 -- b.1)[0]"><path d="M 66.000000 118.000000 C 66.000000 156.000000 66.000000 178.300000 66.000000 196.750000 C 66.000000 215.200000 66.000000 299.000000 66.000000 337.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2875289870)" /><text x="66.000000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">none</text></g><g id="(a.2 &lt;-&gt; b.2)[0]"><marker id="mk-986555416" markerWidth="10.000000" markerHeight="10.000000" refX="3.000000" refY="5.000000" viewBox="0.000000 0.000000 10.000000 10.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,5.000000 10.000000,0.000000 7.500000,5.000000 10.000000,10.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-2680246019" markerWidth="10.000000" markerHeight="10.000000" refX="7.000000" refY="5.000000" viewBox="0.000000 0.000000 10.000000 10.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,5.000000 0.000000,10.000000 2.500000,5.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 179.000000 120.000000 C 179.000000 156.000000 179.000000 178.300000 179.000000 196.750000 C 179.000000 215.200000 179.000000 299.000000 179.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-986555416)" marker-end="url(#mk-2680246019)" mask="url(#2875289870)" /><text x="179.000000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">arrow</text></g><g id="(a.3 &lt;-&gt; b.3)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 293.000000 120.000000 C 293.000000 156.000000 293.000000 178.300000 293.000000 196.750000 C 293.000000 215.200000 293.000000 299.000000 293.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2875289870)" /><text x="293.000000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">triangle</text></g><g id="(a.4 &lt;-&gt; b.4)[0]"><marker id="mk-2527347617" markerWidth="24.200000" markerHeight="18.000000" refX="3.950000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="2.750000,9.000000 13.200000,2.250000 24.200000,9.000000 13.200000,15.750000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 407.000000 120.000000 C 407.000000 156.000000 407.000000 178.300000 407.000000 196.750000 C 407.000000 215.200000 407.000000 299.000000 407.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2527347617)" marker-end="url(#mk-1565215268)" mask="url(#2875289870)" /><text x="407.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="(a.5 &lt;-&gt; b.5)[0]"><marker id="mk-765394478" markerWidth="22.000000" markerHeight="14.000000" refX="3.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-2256124137" markerWidth="22.000000" markerHeight="14.000000" refX="19.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 521.000000 120.000000 C 521.000000 156.000000 521.000000 178.300000 521.000000 196.750000 C 521.000000 215.200000 521.000000 299.000000 521.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-765394478)" marker-end="url(#mk-2256124137)" mask="url(#2875289870)" /><text x="521.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diamond filled</text></g><g id="(a.6 &lt;-&gt; b.6)[0]"><marker id="mk-2288727530" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><marker id="mk-599773101" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 635.500000 120.000000 C 635.500000 156.000000 635.500000 178.300000 635.500000 196.750000 C 635.500000 215.200000 635.500000 299.000000 635.500000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2288727530)" marker-end="url(#mk-599773101)" mask="url(#2875289870)" /><text x="635.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-many</text></g><g id="(a.7 &lt;-&gt; b.7)[0]"><marker id="mk-1160658688" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><marker id="mk-1946374923" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 751.500000 120.000000 C 751.500000 156.000000 751.500000 178.300000 751.500000 196.750000 C 751.500000 215.200000 751.500000 299.000000 751.500000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-1160658688)" marker-end="url(#mk-1946374923)" mask="url(#2875289870)" /><text x="751.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-many-required</text></g><g id="(a.8 &lt;-&gt; b.8)[0]"><marker id="mk-3108867711" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1268614626" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><path d="M 866.000000 120.000000 C 866.000000 156.000000 866.000000 178.300000 866.000000 196.750000 C 866.000000 215.200000 866.000000 299.000000 866.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-3108867711)" marker-end="url(#mk-1268614626)" mask="url(#2875289870)" /><text x="866.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-one</text></g><g id="(a.9 &lt;-&gt; b.9)[0]"><marker id="mk-3412706579" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1195536462" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><path d="M6.600000,0.000000 6.600000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><path d="M 980.500000 120.000000 C 980.500000 156.000000 980.500000 178.300000 980.500000 196.750000 C 980.500000 215.200000 980.500000 299.000000 980.500000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-3412706579)" marker-end="url(#mk-1195536462)" mask="url(#2875289870)" /><text x="980.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cf-one-required</text></g><mask id="2875289870" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1251" height="659">
 <rect x="-102" y="-102" width="1251" height="659" fill="white"></rect>
 <rect x="49.000000" y="216.000000" width="34" height="23" fill="black"></rect>
 <rect x="155.000000" y="216.000000" width="48" height="23" fill="black"></rect>
@@ -55,4 +35,4 @@
 <rect x="687.000000" y="216.000000" width="129" height="23" fill="black"></rect>
 <rect x="841.000000" y="216.000000" width="51" height="23" fill="black"></rect>
 <rect x="922.000000" y="216.000000" width="117" height="23" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/basic/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/basic/dark_theme.exp.svg
index 9a8c74e85..a8381559e 100644
--- a/d2renderers/d2svg/dark_theme/testdata/basic/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/basic/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="259" height="436" viewBox="-102 -102 259 436"><rect x="-102.000000" y="-102.000000" width="259.000000" height="436.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 259 436"><svg id="d2-svg" width="259" height="436" viewBox="-102 -102 259 436"><rect x="-102.000000" y="-102.000000" width="259.000000" height="436.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 106.000000 27.500000 126.000000 27.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1546762055)" /></g><mask id="1546762055" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="436">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 106.000000 27.500000 126.000000 27.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1546762055)" /></g><mask id="1546762055" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="436">
 <rect x="-102" y="-102" width="259" height="436" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/child_to_child/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/child_to_child/dark_theme.exp.svg
index da442aa3c..4469d7b64 100644
--- a/d2renderers/d2svg/dark_theme/testdata/child_to_child/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/child_to_child/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="372" height="634" viewBox="-102 -100 372 634"><rect x="-102.000000" y="-100.000000" width="372.000000" height="634.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 372 634"><svg id="d2-svg" width="372" height="634" viewBox="-102 -100 372 634"><rect x="-102.000000" y="-100.000000" width="372.000000" height="634.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="winter"><g class="shape" ><rect x="0.000000" y="44.000000" width="168.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="7.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="winter.snow"><g class="shape" ><rect x="40.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="47.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 84.000000 140.000000 C 84.000000 160.400000 84.000000 176.000000 84.000000 191.000000 C 84.000000 206.000000 84.000000 280.400000 84.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3732100081)" /></g><mask id="3732100081" maskUnits="userSpaceOnUse" x="-102" y="-100" width="372" height="634">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="winter"><g class="shape" ><rect x="0.000000" y="44.000000" width="168.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="7.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="winter.snow"><g class="shape" ><rect x="40.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="47.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 84.000000 140.000000 C 84.000000 160.400000 84.000000 176.000000 84.000000 191.000000 C 84.000000 206.000000 84.000000 280.400000 84.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3732100081)" /></g><mask id="3732100081" maskUnits="userSpaceOnUse" x="-102" y="-100" width="372" height="634">
 <rect x="-102" y="-100" width="372" height="634" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/class/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/class/dark_theme.exp.svg
index 2f0f741f5..372732e91 100644
--- a/d2renderers/d2svg/dark_theme/testdata/class/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/class/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="626" height="572" viewBox="-102 -102 626 572"><rect x="-102.000000" y="-102.000000" width="626.000000" height="572.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 626 572"><svg id="d2-svg" width="626" height="572" viewBox="-102 -102 626 572"><rect x="-102.000000" y="-102.000000" width="626.000000" height="572.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="manager"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="211.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="3945613123" maskUnits="userSpaceOnUse" x="-102" y="-102" width="626" height="572">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="manager"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="211.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="3945613123" maskUnits="userSpaceOnUse" x="-102" y="-102" width="626" height="572">
 <rect x="-102" y="-102" width="626" height="572" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/connection_label/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/connection_label/dark_theme.exp.svg
index c558b3fc5..ad81c7d59 100644
--- a/d2renderers/d2svg/dark_theme/testdata/connection_label/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/connection_label/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="259" height="459" viewBox="-102 -102 259 459"><rect x="-102.000000" y="-102.000000" width="259.000000" height="459.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 259 459"><svg id="d2-svg" width="259" height="459" viewBox="-102 -102 259 459"><rect x="-102.000000" y="-102.000000" width="259.000000" height="459.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="189.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 115.200000 27.500000 139.900000 27.500000 185.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3815404280)" /><text x="27.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="3815404280" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="459">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="189.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 115.200000 27.500000 139.900000 27.500000 185.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3815404280)" /><text x="27.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="3815404280" maskUnits="userSpaceOnUse" x="-102" y="-102" width="259" height="459">
 <rect x="-102" y="-102" width="259" height="459" fill="white"></rect>
 <rect x="12.000000" y="116.000000" width="31" height="23" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg
index 1a7da1fab..36e145fd0 100644
--- a/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1096" height="481" viewBox="-100 -102 1096 481"><rect x="-100.000000" y="-102.000000" width="1096.000000" height="481.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1096 481"><svg id="d2-svg" width="1096" height="481" viewBox="-100 -102 1096 481"><rect x="-100.000000" y="-102.000000" width="1096.000000" height="481.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -797,4 +777,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="162.000000" y="211.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.000000" y="249.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="users" style='opacity:0.400000'><g class="shape" ><rect x="683.000000" y="0.000000" width="211.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="683.000000" y="0.000000" width="211.000000" height="36.000000" class="class_header fill-N1" /><text x="693.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="693.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="796.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="874.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="683.000000" x2="894.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.000000 71.000000 C 189.000000 127.000000 189.000000 155.500000 189.000000 207.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#928565738)" /><text x="189.000000" y="137.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="189.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="189.000000" dy="19.500000">just how to work the computer.</tspan></text></g><mask id="928565738" maskUnits="userSpaceOnUse" x="-100" y="-102" width="1096" height="481">
 <rect x="-100" y="-102" width="1096" height="481" fill="white"></rect>
 <rect x="0.000000" y="121.000000" width="378" height="39" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/overlay/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/overlay/dark_theme.exp.svg
index 857686327..bb9bfe677 100644
--- a/d2renderers/d2svg/dark_theme/testdata/overlay/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/overlay/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="760" height="270" viewBox="-102 -102 760 270"><rect x="-102.000000" y="-102.000000" width="760.000000" height="270.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 760 270"><svg id="d2-svg" width="760" height="270" viewBox="-102 -102 760 270"><rect x="-102.000000" y="-102.000000" width="760.000000" height="270.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="bright"><g class="shape" ><rect x="0.000000" y="0.000000" width="94.000000" height="66.000000" stroke="#000" fill="#fff" style="stroke-width:2;" /></g><text x="47.000000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">bright</text></g><g id="normal"><g class="shape" ><rect x="154.000000" y="0.000000" width="101.000000" height="66.000000" stroke="#000" fill="#ccc" style="stroke-width:2;" /></g><text x="204.500000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">normal</text></g><g id="dark"><g class="shape" ><rect x="315.000000" y="0.000000" width="82.000000" height="66.000000" stroke="#000" fill="#555" style="stroke-width:2;" /></g><text x="356.000000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">dark</text></g><g id="darker"><g class="shape" ><rect x="457.000000" y="0.000000" width="99.000000" height="66.000000" stroke="#000" fill="#000" style="stroke-width:2;" /></g><text x="506.500000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">darker</text></g><mask id="2779170942" maskUnits="userSpaceOnUse" x="-102" y="-102" width="760" height="270">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="bright"><g class="shape" ><rect x="0.000000" y="0.000000" width="94.000000" height="66.000000" stroke="#000" fill="#fff" style="stroke-width:2;" /></g><text x="47.000000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">bright</text></g><g id="normal"><g class="shape" ><rect x="154.000000" y="0.000000" width="101.000000" height="66.000000" stroke="#000" fill="#ccc" style="stroke-width:2;" /></g><text x="204.500000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">normal</text></g><g id="dark"><g class="shape" ><rect x="315.000000" y="0.000000" width="82.000000" height="66.000000" stroke="#000" fill="#555" style="stroke-width:2;" /></g><text x="356.000000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">dark</text></g><g id="darker"><g class="shape" ><rect x="457.000000" y="0.000000" width="99.000000" height="66.000000" stroke="#000" fill="#000" style="stroke-width:2;" /></g><text x="506.500000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">darker</text></g><mask id="2779170942" maskUnits="userSpaceOnUse" x="-102" y="-102" width="760" height="270">
 <rect x="-102" y="-102" width="760" height="270" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/sql_tables/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/sql_tables/dark_theme.exp.svg
index 775345705..5adf46b2b 100644
--- a/d2renderers/d2svg/dark_theme/testdata/sql_tables/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/sql_tables/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1029" height="664" viewBox="-102 -102 1029 664"><rect x="-102.000000" y="-102.000000" width="1029.000000" height="664.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1029 664"><svg id="d2-svg" width="1029" height="664" viewBox="-102 -102 1029 664"><rect x="-102.000000" y="-102.000000" width="1029.000000" height="664.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="users"><g class="shape" ><rect x="0.000000" y="0.000000" width="217.000000" height="216.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="217.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="119.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="197.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="119.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="197.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="131.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="119.000000" y="131.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="197.000000" y="131.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="144.000000" y2="144.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="167.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="119.000000" y="167.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="197.000000" y="167.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="180.000000" y2="180.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="203.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="119.000000" y="203.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="197.000000" y="203.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="216.000000" y2="216.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="products"><g class="shape" ><rect x="277.000000" y="18.000000" width="164.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="277.000000" y="18.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="287.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">products</text><text x="287.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="355.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="421.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="287.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">price</text><text x="355.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">decimal</text><text x="421.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="287.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">sku</text><text x="355.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="421.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="287.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="355.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="421.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="orders"><g class="shape" ><rect x="273.000000" y="316.000000" width="173.000000" height="144.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="273.000000" y="316.000000" width="173.000000" height="36.000000" class="class_header fill-N1" /><text x="283.000000" y="341.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">orders</text><text x="283.000000" y="375.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="404.000000" y="375.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="426.000000" y="375.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="273.000000" x2="446.000000" y1="388.000000" y2="388.000000" class=" stroke-N1" style="stroke-width:2" /><text x="283.000000" y="411.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">user_id</text><text x="404.000000" y="411.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="426.000000" y="411.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="273.000000" x2="446.000000" y1="424.000000" y2="424.000000" class=" stroke-N1" style="stroke-width:2" /><text x="283.000000" y="447.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">product_id</text><text x="404.000000" y="447.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="426.000000" y="447.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="273.000000" x2="446.000000" y1="460.000000" y2="460.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="shipments"><g class="shape" ><rect x="501.000000" y="18.000000" width="324.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="501.000000" y="18.000000" width="324.000000" height="36.000000" class="class_header fill-N1" /><text x="511.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">shipments</text><text x="511.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="692.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="805.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="501.000000" x2="825.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="511.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">order_id</text><text x="692.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="805.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="501.000000" x2="825.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="511.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">tracking_number</text><text x="692.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="805.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">PK</text><line x1="501.000000" x2="825.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="511.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">status</text><text x="692.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="805.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="501.000000" x2="825.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 108.500000 220.000000 C 108.500000 256.000000 141.300000 281.974451 268.903823 344.120824" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1194213708)" /></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 359.000000 202.000000 C 359.000000 252.400000 359.000000 276.000000 359.000000 312.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1194213708)" /></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 663.000000 202.000000 C 663.000000 252.400000 619.600000 283.400000 449.712726 351.511488" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1194213708)" /></g><mask id="1194213708" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1029" height="664">
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><g id="users"><g class="shape" ><rect x="0.000000" y="0.000000" width="217.000000" height="216.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="217.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="119.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="197.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="119.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="197.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="131.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="119.000000" y="131.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="197.000000" y="131.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="144.000000" y2="144.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="167.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="119.000000" y="167.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="197.000000" y="167.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="180.000000" y2="180.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="203.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="119.000000" y="203.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="197.000000" y="203.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="217.000000" y1="216.000000" y2="216.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="products"><g class="shape" ><rect x="277.000000" y="18.000000" width="164.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="277.000000" y="18.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="287.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">products</text><text x="287.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="355.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="421.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="287.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">price</text><text x="355.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">decimal</text><text x="421.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="287.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">sku</text><text x="355.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="421.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="287.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="355.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="421.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="277.000000" x2="441.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="orders"><g class="shape" ><rect x="273.000000" y="316.000000" width="173.000000" height="144.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="273.000000" y="316.000000" width="173.000000" height="36.000000" class="class_header fill-N1" /><text x="283.000000" y="341.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">orders</text><text x="283.000000" y="375.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="404.000000" y="375.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="426.000000" y="375.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="273.000000" x2="446.000000" y1="388.000000" y2="388.000000" class=" stroke-N1" style="stroke-width:2" /><text x="283.000000" y="411.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">user_id</text><text x="404.000000" y="411.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="426.000000" y="411.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="273.000000" x2="446.000000" y1="424.000000" y2="424.000000" class=" stroke-N1" style="stroke-width:2" /><text x="283.000000" y="447.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">product_id</text><text x="404.000000" y="447.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="426.000000" y="447.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="273.000000" x2="446.000000" y1="460.000000" y2="460.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="shipments"><g class="shape" ><rect x="501.000000" y="18.000000" width="324.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="501.000000" y="18.000000" width="324.000000" height="36.000000" class="class_header fill-N1" /><text x="511.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">shipments</text><text x="511.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="692.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="805.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="501.000000" x2="825.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="511.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">order_id</text><text x="692.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="805.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="501.000000" x2="825.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="511.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">tracking_number</text><text x="692.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="805.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">PK</text><line x1="501.000000" x2="825.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="511.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">status</text><text x="692.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="805.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="501.000000" x2="825.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 108.500000 220.000000 C 108.500000 256.000000 141.300000 281.974451 268.903823 344.120824" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1194213708)" /></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 359.000000 202.000000 C 359.000000 252.400000 359.000000 276.000000 359.000000 312.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1194213708)" /></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 663.000000 202.000000 C 663.000000 252.400000 619.600000 283.400000 449.712726 351.511488" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1194213708)" /></g><mask id="1194213708" maskUnits="userSpaceOnUse" x="-102" y="-102" width="1029" height="664">
 <rect x="-102" y="-102" width="1029" height="664" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg b/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg
index 71f8e83df..94031d787 100644
--- a/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2790" height="2473" viewBox="-102 -102 2790 2473"><rect x="-102.000000" y="-102.000000" width="2790.000000" height="2473.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2790 2473"><svg id="d2-svg" width="2790" height="2473" viewBox="-102 -102 2790 2473"><rect x="-102.000000" y="-102.000000" width="2790.000000" height="2473.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#CDD6F4;}.fill-N2{fill:#BAC2DE;}.fill-N3{fill:#A6ADC8;}.fill-N4{fill:#585B70;}.fill-N5{fill:#45475A;}.fill-N6{fill:#313244;}.fill-N7{fill:#1E1E2E;}.fill-B1{fill:#CBA6f7;}.fill-B2{fill:#CBA6f7;}.fill-B3{fill:#6C7086;}.fill-B4{fill:#585B70;}.fill-B5{fill:#45475A;}.fill-B6{fill:#313244;}.fill-AA2{fill:#f38BA8;}.fill-AA4{fill:#45475A;}.fill-AA5{fill:#313244;}.fill-AB4{fill:#45475A;}.fill-AB5{fill:#313244;}.stroke-N1{stroke:#CDD6F4;}.stroke-N2{stroke:#BAC2DE;}.stroke-N3{stroke:#A6ADC8;}.stroke-N4{stroke:#585B70;}.stroke-N5{stroke:#45475A;}.stroke-N6{stroke:#313244;}.stroke-N7{stroke:#1E1E2E;}.stroke-B1{stroke:#CBA6f7;}.stroke-B2{stroke:#CBA6f7;}.stroke-B3{stroke:#6C7086;}.stroke-B4{stroke:#585B70;}.stroke-B5{stroke:#45475A;}.stroke-B6{stroke:#313244;}.stroke-AA2{stroke:#f38BA8;}.stroke-AA4{stroke:#45475A;}.stroke-AA5{stroke:#313244;}.stroke-AB4{stroke:#45475A;}.stroke-AB5{stroke:#313244;}.background-color-N1{background-color:#CDD6F4;}.background-color-N2{background-color:#BAC2DE;}.background-color-N3{background-color:#A6ADC8;}.background-color-N4{background-color:#585B70;}.background-color-N5{background-color:#45475A;}.background-color-N6{background-color:#313244;}.background-color-N7{background-color:#1E1E2E;}.background-color-B1{background-color:#CBA6f7;}.background-color-B2{background-color:#CBA6f7;}.background-color-B3{background-color:#6C7086;}.background-color-B4{background-color:#585B70;}.background-color-B5{background-color:#45475A;}.background-color-B6{background-color:#313244;}.background-color-AA2{background-color:#f38BA8;}.background-color-AA4{background-color:#45475A;}.background-color-AA5{background-color:#313244;}.background-color-AB4{background-color:#45475A;}.background-color-AB5{background-color:#313244;}.color-N1{color:#CDD6F4;}.color-N2{color:#BAC2DE;}.color-N3{color:#A6ADC8;}.color-N4{color:#585B70;}.color-N5{color:#45475A;}.color-N6{color:#313244;}.color-N7{color:#1E1E2E;}.color-B1{color:#CBA6f7;}.color-B2{color:#CBA6f7;}.color-B3{color:#6C7086;}.color-B4{color:#585B70;}.color-B5{color:#45475A;}.color-B6{color:#313244;}.color-AA2{color:#f38BA8;}.color-AA4{color:#45475A;}.color-AA5{color:#313244;}.color-AB4{color:#45475A;}.color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -810,4 +790,4 @@
 <rect x="1012.000000" y="1493.000000" width="121" height="23" fill="black"></rect>
 <rect x="1217.000000" y="1851.000000" width="136" height="23" fill="black"></rect>
 <rect x="2053.000000" y="1715.000000" width="137" height="23" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg b/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg
index fa53abf7d..755d40041 100644
--- a/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="48" viewBox="-2 -2 116 48"><rect x="-2.000000" y="-2.000000" width="116.000000" height="48.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 116 48"><svg id="d2-svg" width="116" height="48" viewBox="-2 -2 116 48"><rect x="-2.000000" y="-2.000000" width="116.000000" height="48.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-2" y="-2" width="116" height="48">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-2" y="-2" width="116" height="48">
 <rect x="-2" y="-2" width="116" height="48" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg b/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg
index f93941744..c55d08e2d 100644
--- a/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="104" viewBox="-2 -2 104 104"><rect x="-2.000000" y="-2.000000" width="104.000000" height="104.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 104 104"><svg id="d2-svg" width="104" height="104" viewBox="-2 -2 104 104"><rect x="-2.000000" y="-2.000000" width="104.000000" height="104.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-2" y="-2" width="104" height="104">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-2" y="-2" width="104" height="104">
 <rect x="-2" y="-2" width="104" height="104" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg b/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg
index 75b92981a..991818ab5 100644
--- a/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg
+++ b/e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="16" viewBox="-2 -2 54 16"><rect x="-2.000000" y="-2.000000" width="54.000000" height="16.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 54 16"><svg id="d2-svg" width="54" height="16" viewBox="-2 -2 54 16"><rect x="-2.000000" y="-2.000000" width="54.000000" height="16.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-2" y="-2" width="54" height="16">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-2" y="-2" width="54" height="16">
 <rect x="-2" y="-2" width="54" height="16" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg b/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg
index fd1b12c7c..dc081725e 100644
--- a/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="372" height="86" viewBox="-2 -18 372 86"><rect x="-2.000000" y="-18.000000" width="372.000000" height="86.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 372 86"><svg id="d2-svg" width="372" height="86" viewBox="-2 -18 372 86"><rect x="-2.000000" y="-18.000000" width="372.000000" height="86.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="h&amp;y"><g class="shape" ><rect x="0.000000" y="0.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(82 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="h&amp;y"><g class="shape" ><rect x="0.000000" y="0.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(82 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -56,4 +36,4 @@
 </g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="158.000000" y="0.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="192.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="287.000000" y="0.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="327.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="1813696622" maskUnits="userSpaceOnUse" x="-2" y="-18" width="372" height="86">
 <rect x="-2" y="-18" width="372" height="86" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg b/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg
index 60641e43c..e4ef913ef 100644
--- a/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="292" height="86" viewBox="10 -6 292 86"><rect x="10.000000" y="-6.000000" width="292.000000" height="86.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 292 86"><svg id="d2-svg" width="292" height="86" viewBox="10 -6 292 86"><rect x="10.000000" y="-6.000000" width="292.000000" height="86.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="h&amp;y"><g class="shape" ><rect x="12.000000" y="12.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="61.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(94 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="h&amp;y"><g class="shape" ><rect x="12.000000" y="12.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="61.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;∈</text><g transform="translate(94 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -56,4 +36,4 @@
 </g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="130.000000" y="12.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="164.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="219.000000" y="12.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="1299322987" maskUnits="userSpaceOnUse" x="10" y="-6" width="292" height="86">
 <rect x="10" y="-6" width="292" height="86" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg b/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
index 11d27a5e8..566c8a395 100644
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="683" height="154" viewBox="-2 -2 683 154"><rect x="-2.000000" y="-2.000000" width="683.000000" height="154.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 683 154"><svg id="d2-svg" width="683" height="154" viewBox="-2 -2 683 154"><rect x="-2.000000" y="-2.000000" width="683.000000" height="154.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -45,27 +45,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hello world"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="hello world"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">#&#160;2&#160;leading,&#160;2&#160;trailing</tspan>
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#000000" class="text-mono-bold">def</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">hello</tspan>():
@@ -85,4 +65,4 @@
 </text></g></g></g><mask id="60125551" maskUnits="userSpaceOnUse" x="-2" y="-2" width="683" height="154">
 <rect x="-2" y="-2" width="683" height="154" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg b/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
index 23fe057d0..2915f552d 100644
--- a/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="603" height="154" viewBox="10 10 603 154"><rect x="10.000000" y="10.000000" width="603.000000" height="154.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 603 154"><svg id="d2-svg" width="603" height="154" viewBox="10 10 603 154"><rect x="10.000000" y="10.000000" width="603.000000" height="154.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -45,27 +45,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hello world"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="hello world"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="239.000000" height="150.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">#&#160;2&#160;leading,&#160;2&#160;trailing</tspan>
 </text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#000000" class="text-mono-bold">def</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">hello</tspan>():
@@ -85,4 +65,4 @@
 </text></g></g></g><mask id="2533851426" maskUnits="userSpaceOnUse" x="10" y="10" width="603" height="154">
 <rect x="10" y="10" width="603" height="154" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg
index 20d57b50f..695de8999 100644
--- a/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre-disconnect/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1245" height="1872" viewBox="-2 0 1245 1872"><rect x="-2.000000" y="0.000000" width="1245.000000" height="1872.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1245 1872"><svg id="d2-svg" width="1245" height="1872" viewBox="-2 0 1245 1872"><rect x="-2.000000" y="0.000000" width="1245.000000" height="1872.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="394.000000" height="1829.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="s"><g class="shape" ><rect x="565.000000" y="827.000000" width="258.000000" height="636.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="694.000000" y="814.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">s</text></g><g id="k"><g class="shape" ><rect x="1108.000000" y="434.000000" width="132.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1174.000000" y="421.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">k</text></g><g id="u"><g class="shape" ><rect x="844.000000" y="827.000000" width="397.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1042.500000" y="814.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">u</text></g><g id="h"><g class="shape" ><rect x="741.000000" y="41.000000" width="172.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="827.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">h</text></g><g id="y"><g class="shape" ><rect x="414.000000" y="1220.000000" width="131.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="479.500000" y="1207.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">y</text></g><g id="a.k"><g class="shape" ><rect x="20.000000" y="111.000000" width="131.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="85.500000" y="99.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">k</text></g><g id="a.f"><g class="shape" ><rect x="21.000000" y="504.000000" width="353.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.500000" y="492.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">f</text></g><g id="s.n"><g class="shape" ><rect x="585.000000" y="897.000000" width="131.000000" height="139.000000" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="650.500000" y="885.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">n</text></g><g id="k.s"><g class="shape" ><rect x="1148.000000" y="522.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1174.000000" y="560.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="u.o"><g class="shape" ><rect x="1147.000000" y="915.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1174.000000" y="953.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="h.m"><g class="shape" ><rect x="761.000000" y="111.000000" width="132.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="827.000000" y="99.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">m</text></g><g id="u.s"><g class="shape" ><rect x="864.000000" y="897.000000" width="130.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="929.000000" y="885.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="u.c"><g class="shape" ><rect x="1034.000000" y="915.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1060.500000" y="953.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.z"><g class="shape" ><rect x="671.000000" y="1290.000000" width="133.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="737.500000" y="1278.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">z</text></g><g id="y.r"><g class="shape" ><rect x="454.000000" y="1308.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="479.500000" y="1346.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="a.g"><g class="shape" ><rect x="133.000000" y="1697.000000" width="129.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.500000" y="1685.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">g</text></g><g id="a.k.t"><g class="shape" ><rect x="60.000000" y="147.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="185.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="a.f.i"><g class="shape" ><rect x="61.000000" y="540.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.f.g"><g class="shape" ><rect x="170.000000" y="540.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="197.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h.m.s"><g class="shape" ><rect x="801.000000" y="147.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="827.000000" y="185.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="a.f.j"><g class="shape" ><rect x="284.000000" y="540.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="309.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="u.s.j"><g class="shape" ><rect x="904.000000" y="933.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="929.000000" y="971.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="s.z.c"><g class="shape" ><rect x="711.000000" y="1326.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="737.500000" y="1364.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.n.f"><g class="shape" ><rect x="625.000000" y="933.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="650.500000" y="971.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="a.g.i"><g class="shape" ><rect x="173.000000" y="1734.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="197.500000" y="1772.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.(k.t -&gt; f.i)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 85.500000 215.500000 C 85.500000 242.700000 85.500000 260.900000 85.500000 277.250000 C 85.500000 293.600000 85.500000 315.400000 85.500000 331.750000 C 85.500000 348.100000 85.500000 369.900000 85.500000 386.250000 C 85.500000 402.600000 85.500000 482.600000 85.500000 537.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(a.f.g -&gt; s.n)[0]"><path d="M 197.000000 608.500000 C 197.000000 619.300000 197.000000 633.400000 197.000000 649.750000 C 197.000000 666.100000 197.000000 687.900000 197.000000 704.250000 C 197.000000 720.600000 197.000000 742.400000 197.000000 758.750000 C 197.000000 775.100000 274.600000 866.800000 581.211661 970.716066" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(k.s &lt;-&gt; u.o)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1173.500000 592.500000 C 1173.500000 615.700000 1173.500000 633.400000 1173.500000 649.750000 C 1173.500000 666.100000 1173.500000 687.900000 1173.500000 704.250000 C 1173.500000 720.600000 1173.500000 742.400000 1173.500000 758.750000 C 1173.500000 775.100000 1173.500000 855.600000 1173.500000 912.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(h.m.s -&gt; a.f.g)[0]"><path d="M 827.250000 215.500000 C 827.250000 226.300000 827.250000 240.400000 827.250000 256.750000 C 827.250000 273.100000 701.200000 294.900000 512.125000 311.250000 C 323.050000 327.600000 197.000000 349.400000 197.000000 365.750000 C 197.000000 382.100000 197.000000 466.200000 197.000000 537.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(a.f.j -&gt; u.s.j)[0]"><path d="M 309.000000 608.500000 C 309.000000 619.300000 309.000000 633.400000 309.000000 649.750000 C 309.000000 666.100000 309.000000 687.900000 309.000000 704.250000 C 309.000000 720.600000 309.000000 742.400000 309.000000 758.750000 C 309.000000 775.100000 427.900000 864.993785 899.582265 962.161861" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(u.c -&gt; s.z.c)[0]"><path d="M 1060.000000 983.500000 C 1060.000000 1008.700000 1060.000000 1026.400000 1060.000000 1042.750000 C 1060.000000 1059.100000 995.400000 1080.900000 898.500000 1097.250000 C 801.600000 1113.600000 737.000000 1135.400000 737.000000 1151.750000 C 737.000000 1168.100000 737.000000 1252.200000 737.000000 1323.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(s.n -&gt; y.r)[0]"><marker id="mk-284534808" markerWidth="40.000000" markerHeight="48.000000" refX="28.000000" refY="24.000000" viewBox="0.000000 0.000000 40.000000 48.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 40.000000,24.000000 0.000000,48.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 650.500000 1042.000000 C 650.500000 1063.400000 650.500000 1080.900000 650.500000 1097.250000 C 650.500000 1113.600000 650.500000 1135.400000 650.500000 1151.750000 C 650.500000 1168.100000 621.300000 1252.400000 515.413409 1320.936184" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-284534808)" mask="url(#3801187244)" /></g><g id="(y.r -&gt; a.g.i)[0]"><path d="M 479.500000 1376.500000 C 479.500000 1401.700000 479.500000 1419.400000 479.500000 1435.750000 C 479.500000 1452.100000 423.000000 1480.800000 338.250000 1507.500000 C 253.500000 1534.200000 197.000000 1659.600000 197.000000 1730.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /><text x="304.500000" y="1500.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="304.500000" dy="0.000000">1</tspan><tspan x="304.500000" dy="17.250000">2</tspan><tspan x="304.500000" dy="17.250000">3</tspan><tspan x="304.500000" dy="17.250000">4</tspan></text></g><mask id="3801187244" maskUnits="userSpaceOnUse" x="-2" y="0" width="1245" height="1872">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="394.000000" height="1829.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="s"><g class="shape" ><rect x="565.000000" y="827.000000" width="258.000000" height="636.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="694.000000" y="814.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">s</text></g><g id="k"><g class="shape" ><rect x="1108.000000" y="434.000000" width="132.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1174.000000" y="421.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">k</text></g><g id="u"><g class="shape" ><rect x="844.000000" y="827.000000" width="397.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1042.500000" y="814.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">u</text></g><g id="h"><g class="shape" ><rect x="741.000000" y="41.000000" width="172.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="827.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">h</text></g><g id="y"><g class="shape" ><rect x="414.000000" y="1220.000000" width="131.000000" height="243.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="479.500000" y="1207.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">y</text></g><g id="a.k"><g class="shape" ><rect x="20.000000" y="111.000000" width="131.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="85.500000" y="99.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">k</text></g><g id="a.f"><g class="shape" ><rect x="21.000000" y="504.000000" width="353.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.500000" y="492.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">f</text></g><g id="s.n"><g class="shape" ><rect x="585.000000" y="897.000000" width="131.000000" height="139.000000" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="650.500000" y="885.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">n</text></g><g id="k.s"><g class="shape" ><rect x="1148.000000" y="522.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1174.000000" y="560.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="u.o"><g class="shape" ><rect x="1147.000000" y="915.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1174.000000" y="953.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="h.m"><g class="shape" ><rect x="761.000000" y="111.000000" width="132.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="827.000000" y="99.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">m</text></g><g id="u.s"><g class="shape" ><rect x="864.000000" y="897.000000" width="130.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="929.000000" y="885.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="u.c"><g class="shape" ><rect x="1034.000000" y="915.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1060.500000" y="953.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.z"><g class="shape" ><rect x="671.000000" y="1290.000000" width="133.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="737.500000" y="1278.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">z</text></g><g id="y.r"><g class="shape" ><rect x="454.000000" y="1308.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="479.500000" y="1346.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="a.g"><g class="shape" ><rect x="133.000000" y="1697.000000" width="129.000000" height="139.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.500000" y="1685.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">g</text></g><g id="a.k.t"><g class="shape" ><rect x="60.000000" y="147.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="185.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="a.f.i"><g class="shape" ><rect x="61.000000" y="540.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.f.g"><g class="shape" ><rect x="170.000000" y="540.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="197.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h.m.s"><g class="shape" ><rect x="801.000000" y="147.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="827.000000" y="185.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="a.f.j"><g class="shape" ><rect x="284.000000" y="540.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="309.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="u.s.j"><g class="shape" ><rect x="904.000000" y="933.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="929.000000" y="971.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="s.z.c"><g class="shape" ><rect x="711.000000" y="1326.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="737.500000" y="1364.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.n.f"><g class="shape" ><rect x="625.000000" y="933.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="650.500000" y="971.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="a.g.i"><g class="shape" ><rect x="173.000000" y="1734.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="197.500000" y="1772.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.(k.t -&gt; f.i)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 85.500000 215.500000 C 85.500000 242.700000 85.500000 260.900000 85.500000 277.250000 C 85.500000 293.600000 85.500000 315.400000 85.500000 331.750000 C 85.500000 348.100000 85.500000 369.900000 85.500000 386.250000 C 85.500000 402.600000 85.500000 482.600000 85.500000 537.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(a.f.g -&gt; s.n)[0]"><path d="M 197.000000 608.500000 C 197.000000 619.300000 197.000000 633.400000 197.000000 649.750000 C 197.000000 666.100000 197.000000 687.900000 197.000000 704.250000 C 197.000000 720.600000 197.000000 742.400000 197.000000 758.750000 C 197.000000 775.100000 274.600000 866.800000 581.211661 970.716066" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(k.s &lt;-&gt; u.o)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1173.500000 592.500000 C 1173.500000 615.700000 1173.500000 633.400000 1173.500000 649.750000 C 1173.500000 666.100000 1173.500000 687.900000 1173.500000 704.250000 C 1173.500000 720.600000 1173.500000 742.400000 1173.500000 758.750000 C 1173.500000 775.100000 1173.500000 855.600000 1173.500000 912.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(h.m.s -&gt; a.f.g)[0]"><path d="M 827.250000 215.500000 C 827.250000 226.300000 827.250000 240.400000 827.250000 256.750000 C 827.250000 273.100000 701.200000 294.900000 512.125000 311.250000 C 323.050000 327.600000 197.000000 349.400000 197.000000 365.750000 C 197.000000 382.100000 197.000000 466.200000 197.000000 537.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(a.f.j -&gt; u.s.j)[0]"><path d="M 309.000000 608.500000 C 309.000000 619.300000 309.000000 633.400000 309.000000 649.750000 C 309.000000 666.100000 309.000000 687.900000 309.000000 704.250000 C 309.000000 720.600000 309.000000 742.400000 309.000000 758.750000 C 309.000000 775.100000 427.900000 864.993785 899.582265 962.161861" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(u.c -&gt; s.z.c)[0]"><path d="M 1060.000000 983.500000 C 1060.000000 1008.700000 1060.000000 1026.400000 1060.000000 1042.750000 C 1060.000000 1059.100000 995.400000 1080.900000 898.500000 1097.250000 C 801.600000 1113.600000 737.000000 1135.400000 737.000000 1151.750000 C 737.000000 1168.100000 737.000000 1252.200000 737.000000 1323.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /></g><g id="(s.n -&gt; y.r)[0]"><marker id="mk-284534808" markerWidth="40.000000" markerHeight="48.000000" refX="28.000000" refY="24.000000" viewBox="0.000000 0.000000 40.000000 48.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 40.000000,24.000000 0.000000,48.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 650.500000 1042.000000 C 650.500000 1063.400000 650.500000 1080.900000 650.500000 1097.250000 C 650.500000 1113.600000 650.500000 1135.400000 650.500000 1151.750000 C 650.500000 1168.100000 621.300000 1252.400000 515.413409 1320.936184" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-284534808)" mask="url(#3801187244)" /></g><g id="(y.r -&gt; a.g.i)[0]"><path d="M 479.500000 1376.500000 C 479.500000 1401.700000 479.500000 1419.400000 479.500000 1435.750000 C 479.500000 1452.100000 423.000000 1480.800000 338.250000 1507.500000 C 253.500000 1534.200000 197.000000 1659.600000 197.000000 1730.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3801187244)" /><text x="304.500000" y="1500.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="304.500000" dy="0.000000">1</tspan><tspan x="304.500000" dy="17.250000">2</tspan><tspan x="304.500000" dy="17.250000">3</tspan><tspan x="304.500000" dy="17.250000">4</tspan></text></g><mask id="3801187244" maskUnits="userSpaceOnUse" x="-2" y="0" width="1245" height="1872">
 <rect x="-2" y="0" width="1245" height="1872" fill="white"></rect>
 <rect x="300.000000" y="1484.000000" width="9" height="69" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg b/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg
index 3c71fa8df..1160fcd8e 100644
--- a/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre-disconnect/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="706" height="1953" viewBox="10 10 706 1953"><rect x="10.000000" y="10.000000" width="706.000000" height="1953.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 706 1953"><svg id="d2-svg" width="706" height="1953" viewBox="10 10 706 1953"><rect x="10.000000" y="10.000000" width="706.000000" height="1953.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="184.000000" y="373.000000" width="421.000000" height="527.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="394.500000" y="406.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="s"><g class="shape" ><rect x="277.000000" y="1401.000000" width="424.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="489.000000" y="1434.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">s</text></g><g id="k"><g class="shape" ><rect x="12.000000" y="734.000000" width="152.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="88.000000" y="767.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">k</text></g><g id="u"><g class="shape" ><rect x="254.000000" y="1040.000000" width="397.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="452.500000" y="1073.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">u</text></g><g id="h"><g class="shape" ><rect x="269.000000" y="12.000000" width="252.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="395.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">h</text></g><g id="y"><g class="shape" ><rect x="327.000000" y="1752.000000" width="151.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="402.500000" y="1785.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">y</text></g><g id="a.k"><g class="shape" ><rect x="234.000000" y="423.000000" width="151.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="309.500000" y="452.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">k</text></g><g id="a.f"><g class="shape" ><rect x="235.000000" y="679.000000" width="293.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="381.500000" y="708.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">f</text></g><g id="s.n"><g class="shape" ><rect x="327.000000" y="1453.000000" width="151.000000" height="166.000000" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="402.500000" y="1482.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">n</text></g><g id="k.s"><g class="shape" ><rect x="62.000000" y="784.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.000000" y="822.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="u.o"><g class="shape" ><rect x="304.000000" y="1095.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="331.000000" y="1133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="h.m"><g class="shape" ><rect x="319.000000" y="62.000000" width="152.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="395.000000" y="91.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">m</text></g><g id="u.s"><g class="shape" ><rect x="378.000000" y="1095.000000" width="150.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="453.000000" y="1124.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="u.c"><g class="shape" ><rect x="548.000000" y="1195.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="574.500000" y="1233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.z"><g class="shape" ><rect x="498.000000" y="1456.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="574.500000" y="1485.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">z</text></g><g id="y.r"><g class="shape" ><rect x="377.000000" y="1802.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="402.500000" y="1840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="a.g"><g class="shape" ><rect x="406.000000" y="428.000000" width="149.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="480.500000" y="457.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">g</text></g><g id="a.k.t"><g class="shape" ><rect x="284.000000" y="473.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="309.500000" y="511.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="a.f.i"><g class="shape" ><rect x="285.000000" y="729.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="309.500000" y="767.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.f.g"><g class="shape" ><rect x="354.000000" y="729.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="381.000000" y="767.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h.m.s"><g class="shape" ><rect x="369.000000" y="112.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="395.000000" y="150.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="a.f.j"><g class="shape" ><rect x="428.000000" y="729.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="453.000000" y="767.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="u.s.j"><g class="shape" ><rect x="428.000000" y="1145.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="453.000000" y="1183.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="s.z.c"><g class="shape" ><rect x="548.000000" y="1506.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="574.500000" y="1544.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.n.f"><g class="shape" ><rect x="377.000000" y="1503.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="402.500000" y="1541.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="a.g.i"><g class="shape" ><rect x="456.000000" y="478.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.500000" y="516.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.(k.t -&gt; f.i)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 309.500000 541.000000 L 309.500000 725.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(a.f.g -&gt; s.n)[0]"><path d="M 381.000000 797.000000 L 381.000000 935.000000 S 381.000000 945.000000 371.000000 945.000000 L 253.000000 945.000000 S 243.000000 945.000000 243.000000 955.000000 L 243.000000 1346.000000 S 243.000000 1356.000000 253.000000 1356.000000 L 392.500000 1356.000000 S 402.500000 1356.000000 402.500000 1366.000000 L 402.500000 1449.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(k.s &lt;-&gt; u.o)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.000000 854.000000 L 88.000000 985.000000 S 88.000000 995.000000 98.000000 995.000000 L 321.000000 995.000000 S 331.000000 995.000000 331.000000 1005.000000 L 331.000000 1091.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(h.m.s -&gt; a.f.g)[0]"><path d="M 395.000000 180.000000 L 395.000000 627.000000 C 395.000000 641.000000 381.000000 627.000000 381.000000 641.000000 L 381.000000 725.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(a.f.j -&gt; u.s.j)[0]"><path d="M 453.000000 797.000000 L 453.000000 1141.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(u.c -&gt; s.z.c)[0]"><path d="M 574.500000 1263.000000 L 574.500000 1502.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(s.n -&gt; y.r)[0]"><marker id="mk-284534808" markerWidth="40.000000" markerHeight="48.000000" refX="28.000000" refY="24.000000" viewBox="0.000000 0.000000 40.000000 48.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 40.000000,24.000000 0.000000,48.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 402.500000 1624.500000 L 402.500000 1789.000000" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-284534808)" mask="url(#408098276)" /></g><g id="(y.r -&gt; a.g.i)[0]"><path d="M 402.500000 1870.000000 L 402.500000 1953.000000 S 402.500000 1963.000000 412.500000 1963.000000 L 701.000000 1963.000000 S 711.000000 1963.000000 711.000000 1953.000000 L 711.000000 338.000000 S 711.000000 328.000000 701.000000 328.000000 L 490.500000 328.000000 S 480.500000 328.000000 480.500000 338.000000 L 480.500000 474.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /><text x="711.500000" y="1139.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="711.500000" dy="0.000000">1</tspan><tspan x="711.500000" dy="17.250000">2</tspan><tspan x="711.500000" dy="17.250000">3</tspan><tspan x="711.500000" dy="17.250000">4</tspan></text></g><mask id="408098276" maskUnits="userSpaceOnUse" x="10" y="10" width="706" height="1953">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="184.000000" y="373.000000" width="421.000000" height="527.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="394.500000" y="406.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="s"><g class="shape" ><rect x="277.000000" y="1401.000000" width="424.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="489.000000" y="1434.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">s</text></g><g id="k"><g class="shape" ><rect x="12.000000" y="734.000000" width="152.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="88.000000" y="767.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">k</text></g><g id="u"><g class="shape" ><rect x="254.000000" y="1040.000000" width="397.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="452.500000" y="1073.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">u</text></g><g id="h"><g class="shape" ><rect x="269.000000" y="12.000000" width="252.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="395.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">h</text></g><g id="y"><g class="shape" ><rect x="327.000000" y="1752.000000" width="151.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="402.500000" y="1785.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">y</text></g><g id="a.k"><g class="shape" ><rect x="234.000000" y="423.000000" width="151.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="309.500000" y="452.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">k</text></g><g id="a.f"><g class="shape" ><rect x="235.000000" y="679.000000" width="293.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="381.500000" y="708.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">f</text></g><g id="s.n"><g class="shape" ><rect x="327.000000" y="1453.000000" width="151.000000" height="166.000000" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="402.500000" y="1482.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">n</text></g><g id="k.s"><g class="shape" ><rect x="62.000000" y="784.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.000000" y="822.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="u.o"><g class="shape" ><rect x="304.000000" y="1095.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="331.000000" y="1133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="h.m"><g class="shape" ><rect x="319.000000" y="62.000000" width="152.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="395.000000" y="91.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">m</text></g><g id="u.s"><g class="shape" ><rect x="378.000000" y="1095.000000" width="150.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="453.000000" y="1124.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="u.c"><g class="shape" ><rect x="548.000000" y="1195.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="574.500000" y="1233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.z"><g class="shape" ><rect x="498.000000" y="1456.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="574.500000" y="1485.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">z</text></g><g id="y.r"><g class="shape" ><rect x="377.000000" y="1802.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="402.500000" y="1840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="a.g"><g class="shape" ><rect x="406.000000" y="428.000000" width="149.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="480.500000" y="457.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">g</text></g><g id="a.k.t"><g class="shape" ><rect x="284.000000" y="473.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="309.500000" y="511.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="a.f.i"><g class="shape" ><rect x="285.000000" y="729.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="309.500000" y="767.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.f.g"><g class="shape" ><rect x="354.000000" y="729.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="381.000000" y="767.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h.m.s"><g class="shape" ><rect x="369.000000" y="112.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="395.000000" y="150.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="a.f.j"><g class="shape" ><rect x="428.000000" y="729.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="453.000000" y="767.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="u.s.j"><g class="shape" ><rect x="428.000000" y="1145.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="453.000000" y="1183.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="s.z.c"><g class="shape" ><rect x="548.000000" y="1506.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="574.500000" y="1544.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="s.n.f"><g class="shape" ><rect x="377.000000" y="1503.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="402.500000" y="1541.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="a.g.i"><g class="shape" ><rect x="456.000000" y="478.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.500000" y="516.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="a.(k.t -&gt; f.i)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 309.500000 541.000000 L 309.500000 725.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(a.f.g -&gt; s.n)[0]"><path d="M 381.000000 797.000000 L 381.000000 935.000000 S 381.000000 945.000000 371.000000 945.000000 L 253.000000 945.000000 S 243.000000 945.000000 243.000000 955.000000 L 243.000000 1346.000000 S 243.000000 1356.000000 253.000000 1356.000000 L 392.500000 1356.000000 S 402.500000 1356.000000 402.500000 1366.000000 L 402.500000 1449.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(k.s &lt;-&gt; u.o)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.000000 854.000000 L 88.000000 985.000000 S 88.000000 995.000000 98.000000 995.000000 L 321.000000 995.000000 S 331.000000 995.000000 331.000000 1005.000000 L 331.000000 1091.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(h.m.s -&gt; a.f.g)[0]"><path d="M 395.000000 180.000000 L 395.000000 627.000000 C 395.000000 641.000000 381.000000 627.000000 381.000000 641.000000 L 381.000000 725.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(a.f.j -&gt; u.s.j)[0]"><path d="M 453.000000 797.000000 L 453.000000 1141.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(u.c -&gt; s.z.c)[0]"><path d="M 574.500000 1263.000000 L 574.500000 1502.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /></g><g id="(s.n -&gt; y.r)[0]"><marker id="mk-284534808" markerWidth="40.000000" markerHeight="48.000000" refX="28.000000" refY="24.000000" viewBox="0.000000 0.000000 40.000000 48.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 40.000000,24.000000 0.000000,48.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 402.500000 1624.500000 L 402.500000 1789.000000" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-284534808)" mask="url(#408098276)" /></g><g id="(y.r -&gt; a.g.i)[0]"><path d="M 402.500000 1870.000000 L 402.500000 1953.000000 S 402.500000 1963.000000 412.500000 1963.000000 L 701.000000 1963.000000 S 711.000000 1963.000000 711.000000 1953.000000 L 711.000000 338.000000 S 711.000000 328.000000 701.000000 328.000000 L 490.500000 328.000000 S 480.500000 328.000000 480.500000 338.000000 L 480.500000 474.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#408098276)" /><text x="711.500000" y="1139.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="711.500000" dy="0.000000">1</tspan><tspan x="711.500000" dy="17.250000">2</tspan><tspan x="711.500000" dy="17.250000">3</tspan><tspan x="711.500000" dy="17.250000">4</tspan></text></g><mask id="408098276" maskUnits="userSpaceOnUse" x="10" y="10" width="706" height="1953">
 <rect x="10" y="10" width="706" height="1953" fill="white"></rect>
 <rect x="707.000000" y="1123.000000" width="9" height="69" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
index d555850c7..4233fc703 100644
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="362" height="530" viewBox="-2 0 362 530"><rect x="-2.000000" y="0.000000" width="362.000000" height="530.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 362 530"><svg id="d2-svg" width="362" height="530" viewBox="-2 0 362 530"><rect x="-2.000000" y="0.000000" width="362.000000" height="530.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="358.000000" height="487.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="179.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="40.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="23.000000" y="355.000000" width="298.000000" height="139.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="172.000000" y="343.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="153.000000" y="75.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="265.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="291.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="152.000000" y="391.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="429.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 66.500000 144.000000 C 66.500000 212.400000 66.700000 326.400000 67.391931 352.001460" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#3264091923)" /><text x="67.000000" y="231.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="67.000000" dy="0.000000">line 1</tspan><tspan x="67.000000" dy="17.250000">line 2</tspan><tspan x="67.000000" dy="17.250000">line 3</tspan><tspan x="67.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 179.000000 144.000000 C 179.000000 212.400000 179.000000 248.000000 179.000000 316.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3264091923)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 291.500000 146.000000 C 291.500000 212.400000 291.300000 326.400000 290.608069 352.001460" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3264091923)" /></g><mask id="3264091923" maskUnits="userSpaceOnUse" x="-2" y="0" width="362" height="530">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="358.000000" height="487.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="179.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="40.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="23.000000" y="355.000000" width="298.000000" height="139.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="172.000000" y="343.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="153.000000" y="75.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.000000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="265.000000" y="75.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="291.500000" y="113.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="152.000000" y="391.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="429.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 66.500000 144.000000 C 66.500000 212.400000 66.700000 326.400000 67.391931 352.001460" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#3264091923)" /><text x="67.000000" y="231.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="67.000000" dy="0.000000">line 1</tspan><tspan x="67.000000" dy="17.250000">line 2</tspan><tspan x="67.000000" dy="17.250000">line 3</tspan><tspan x="67.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 179.000000 144.000000 C 179.000000 212.400000 179.000000 248.000000 179.000000 316.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3264091923)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 291.500000 146.000000 C 291.500000 212.400000 291.300000 326.400000 290.608069 352.001460" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3264091923)" /></g><mask id="3264091923" maskUnits="userSpaceOnUse" x="-2" y="0" width="362" height="530">
 <rect x="-2" y="0" width="362" height="530" fill="white"></rect>
 <rect x="49.000000" y="215.000000" width="36" height="69" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg b/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg
index 22a4bda2c..2056cbe39 100644
--- a/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_broken_arrowhead/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="294" height="555" viewBox="10 10 294 555"><rect x="10.000000" y="10.000000" width="294.000000" height="555.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 294 555"><svg id="d2-svg" width="294" height="555" viewBox="10 10 294 555"><rect x="10.000000" y="10.000000" width="294.000000" height="555.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="290.000000" height="551.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="157.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="76.000000" y="347.000000" width="154.000000" height="166.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="376.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="127.000000" y="201.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="199.000000" y="201.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="126.000000" y="397.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="435.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 88.500000 130.000000 L 88.500000 297.000000 S 88.500000 307.000000 98.500000 307.000000 L 105.000000 307.000000 S 115.000000 307.000000 115.000000 317.000000 L 115.000000 343.000000" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1205642168)" /><text x="89.000000" y="232.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="89.000000" dy="0.000000">line 1</tspan><tspan x="89.000000" dy="17.250000">line 2</tspan><tspan x="89.000000" dy="17.250000">line 3</tspan><tspan x="89.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 153.500000 269.000000 L 153.500000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 226.000000 271.000000 L 226.000000 297.000000 S 226.000000 307.000000 216.000000 307.000000 L 202.000000 307.000000 S 192.000000 307.000000 192.000000 317.000000 L 192.000000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><mask id="1205642168" maskUnits="userSpaceOnUse" x="10" y="10" width="294" height="555">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="290.000000" height="551.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="157.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="76.000000" y="347.000000" width="154.000000" height="166.000000" stroke="white" class=" fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="376.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c</text></g><g id="a.1"><g class="shape" ><rect x="127.000000" y="201.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="a.2"><g class="shape" ><rect x="199.000000" y="201.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="239.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="a.c.d"><g class="shape" ><rect x="126.000000" y="397.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="435.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.(b -&gt; c)[0]"><marker id="mk-1065319532" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" stroke="red" class="connection fill-N7" stroke-width="2" /> </marker><path d="M 88.500000 130.000000 L 88.500000 297.000000 S 88.500000 307.000000 98.500000 307.000000 L 105.000000 307.000000 S 115.000000 307.000000 115.000000 317.000000 L 115.000000 343.000000" stroke="red" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-1065319532)" mask="url(#1205642168)" /><text x="89.000000" y="232.000000" fill="red" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="89.000000" dy="0.000000">line 1</tspan><tspan x="89.000000" dy="17.250000">line 2</tspan><tspan x="89.000000" dy="17.250000">line 3</tspan><tspan x="89.000000" dy="17.250000">line 4</tspan></text></g><g id="a.(1 -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 153.500000 269.000000 L 153.500000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><g id="a.(2 &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 226.000000 271.000000 L 226.000000 297.000000 S 226.000000 307.000000 216.000000 307.000000 L 202.000000 307.000000 S 192.000000 307.000000 192.000000 317.000000 L 192.000000 343.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1205642168)" /></g><mask id="1205642168" maskUnits="userSpaceOnUse" x="10" y="10" width="294" height="555">
 <rect x="10" y="10" width="294" height="555" fill="white"></rect>
 <rect x="71.000000" y="216.000000" width="36" height="69" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
index 12cbe31a0..c5675d62b 100644
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2332" height="159" viewBox="-2 0 2332 159"><rect x="-2.000000" y="0.000000" width="2332.000000" height="159.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2332 159"><svg id="d2-svg" width="2332" height="159" viewBox="-2 0 2332 159"><rect x="-2.000000" y="0.000000" width="2332.000000" height="159.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,30 +31,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="build_workflow"><g class="shape" ><rect x="0.000000" y="41.000000" width="2328.000000" height="116.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1164.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105.000000" y="60.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="240.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="638.000000" y="60.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="742.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1194.000000" y="60.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1229.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1593.000000" y="60.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1672.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2129.000000" y="60.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2176.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 377.500000 99.000000 C 479.900000 99.000000 532.300000 99.000000 633.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="507.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 848.500000 99.000000 C 985.300000 99.000000 1054.700000 99.000000 1189.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1020.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1269.500000 99.000000 C 1395.900000 99.000000 1461.300000 99.000000 1588.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1429.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1753.500000 99.000000 C 1901.900000 99.000000 1977.300000 99.000000 2124.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1940.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="1566378409" maskUnits="userSpaceOnUse" x="-2" y="0" width="2332" height="159">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="build_workflow"><g class="shape" ><rect x="0.000000" y="41.000000" width="2328.000000" height="116.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1164.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105.000000" y="60.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="240.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="638.000000" y="60.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="742.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1194.000000" y="60.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1229.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1593.000000" y="60.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1672.000000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="2129.000000" y="60.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2176.500000" y="107.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 377.500000 99.000000 C 479.900000 99.000000 532.300000 99.000000 633.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="507.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 848.500000 99.000000 C 985.300000 99.000000 1054.700000 99.000000 1189.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1020.000000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1269.500000 99.000000 C 1395.900000 99.000000 1461.300000 99.000000 1588.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1429.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1753.500000 99.000000 C 1901.900000 99.000000 1977.300000 99.000000 2124.500000 99.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1566378409)" /><text x="1940.500000" y="105.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="1566378409" maskUnits="userSpaceOnUse" x="-2" y="0" width="2332" height="159">
 <rect x="-2" y="0" width="2332" height="159" fill="white"></rect>
 <rect x="480.000000" y="89.000000" width="54" height="21" fill="black"></rect>
 <rect x="951.000000" y="89.000000" width="138" height="21" fill="black"></rect>
 <rect x="1370.000000" y="89.000000" width="119" height="21" fill="black"></rect>
 <rect x="1856.000000" y="89.000000" width="169" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg b/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
index 8c9fc69b5..cb7cea922 100644
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1947" height="181" viewBox="10 10 1947 181"><rect x="10.000000" y="10.000000" width="1947.000000" height="181.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1947 181"><svg id="d2-svg" width="1947" height="181" viewBox="10 10 1947 181"><rect x="10.000000" y="10.000000" width="1947.000000" height="181.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,30 +31,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="build_workflow"><g class="shape" ><rect x="12.000000" y="12.000000" width="1943.000000" height="177.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="983.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62.000000" y="62.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="526.000000" y="62.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="630.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1013.000000" y="62.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1048.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1343.000000" y="62.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1422.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1810.000000" y="62.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1857.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 334.000000 100.500000 L 522.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="429.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 737.000000 100.500000 L 1009.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="874.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1088.000000 100.500000 L 1339.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1213.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1503.000000 100.500000 L 1806.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1655.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="2840142333" maskUnits="userSpaceOnUse" x="10" y="10" width="1947" height="181">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="build_workflow"><g class="shape" ><rect x="12.000000" y="12.000000" width="1943.000000" height="177.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="983.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62.000000" y="62.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="526.000000" y="62.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="630.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1013.000000" y="62.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1048.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1343.000000" y="62.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1422.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1810.000000" y="62.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1857.500000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 334.000000 100.500000 L 522.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="429.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 737.000000 100.500000 L 1009.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="874.000000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1088.000000 100.500000 L 1339.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1213.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1503.000000 100.500000 L 1806.000000 100.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2840142333)" /><text x="1655.500000" y="106.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Changes the live lambdas</text></g><mask id="2840142333" maskUnits="userSpaceOnUse" x="10" y="10" width="1947" height="181">
 <rect x="10" y="10" width="1947" height="181" fill="white"></rect>
 <rect x="402.000000" y="90.000000" width="54" height="21" fill="black"></rect>
 <rect x="805.000000" y="90.000000" width="138" height="21" fill="black"></rect>
 <rect x="1154.000000" y="90.000000" width="119" height="21" fill="black"></rect>
 <rect x="1571.000000" y="90.000000" width="169" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
index d98fa5c5c..9ad3efc4b 100644
--- a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="871" height="252" viewBox="-2 -2 871 252"><rect x="-2.000000" y="-2.000000" width="871.000000" height="252.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 871 252"><svg id="d2-svg" width="871" height="252" viewBox="-2 -2 871 252"><rect x="-2.000000" y="-2.000000" width="871.000000" height="252.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0.000000" y="0.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="45.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="45.500000" dy="0.000000">ninety</tspan><tspan x="45.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="151.000000" y="8.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="196.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="302.000000" y="0.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="353.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="353.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="353.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="464.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="511.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="624.000000" y="182.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.500000" y="220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="618.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="772.000000" y="8.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="819.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 511.000000 76.000000 C 511.000000 120.400000 533.500000 144.126623 619.978850 190.735354" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 665.000000 76.000000 C 665.000000 120.400000 665.000000 142.000000 665.000000 178.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 819.500000 76.000000 C 819.500000 120.400000 796.900000 144.000000 710.032868 190.124141" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><mask id="800397963" maskUnits="userSpaceOnUse" x="-2" y="-2" width="871" height="252">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0.000000" y="0.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="45.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="45.500000" dy="0.000000">ninety</tspan><tspan x="45.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="151.000000" y="8.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="196.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="302.000000" y="0.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="353.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="353.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="353.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="464.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="511.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="624.000000" y="182.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.500000" y="220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="618.000000" y="8.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="665.000000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="772.000000" y="8.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="819.500000" y="46.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 511.000000 76.000000 C 511.000000 120.400000 533.500000 144.126623 619.978850 190.735354" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 665.000000 76.000000 C 665.000000 120.400000 665.000000 142.000000 665.000000 178.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 819.500000 76.000000 C 819.500000 120.400000 796.900000 144.000000 710.032868 190.124141" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#800397963)" /></g><mask id="800397963" maskUnits="userSpaceOnUse" x="-2" y="-2" width="871" height="252">
 <rect x="-2" y="-2" width="871" height="252" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
index 86d39f9c8..d0035a7cb 100644
--- a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="671" height="232" viewBox="10 10 671 232"><rect x="10.000000" y="10.000000" width="671.000000" height="232.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 671 232"><svg id="d2-svg" width="671" height="232" viewBox="10 10 671 232"><rect x="10.000000" y="10.000000" width="671.000000" height="232.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12.000000" y="12.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="57.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="57.500000" dy="0.000000">ninety</tspan><tspan x="57.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="123.000000" y="20.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="168.500000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="234.000000" y="12.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="285.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="285.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="285.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="356.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="475.000000" y="174.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="516.500000" y="212.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="470.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="517.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="584.000000" y="28.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="631.500000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 403.000000 96.000000 L 403.000000 124.000000 S 403.000000 134.000000 413.000000 134.000000 L 486.250000 134.000000 S 496.250000 134.000000 496.250000 144.000000 L 496.250000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 517.000000 96.000000 L 517.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 631.500000 96.000000 L 631.500000 124.000000 S 631.500000 134.000000 621.500000 134.000000 L 547.750000 134.000000 S 537.750000 134.000000 537.750000 144.000000 L 537.750000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><mask id="3065707942" maskUnits="userSpaceOnUse" x="10" y="10" width="671" height="232">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12.000000" y="12.000000" width="91.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="57.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="57.500000" dy="0.000000">ninety</tspan><tspan x="57.500000" dy="18.500000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="123.000000" y="20.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="168.500000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="234.000000" y="12.000000" width="102.000000" height="82.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="285.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="285.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="285.000000" dy="18.500000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="356.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\yode</text></g><g id="there"><g class="shape" ><rect x="475.000000" y="174.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="516.500000" y="212.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="470.000000" y="28.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="517.000000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="584.000000" y="28.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="631.500000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 403.000000 96.000000 L 403.000000 124.000000 S 403.000000 134.000000 413.000000 134.000000 L 486.250000 134.000000 S 496.250000 134.000000 496.250000 144.000000 L 496.250000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 517.000000 96.000000 L 517.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 631.500000 96.000000 L 631.500000 124.000000 S 631.500000 134.000000 621.500000 134.000000 L 547.750000 134.000000 S 537.750000 134.000000 537.750000 144.000000 L 537.750000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3065707942)" /></g><mask id="3065707942" maskUnits="userSpaceOnUse" x="10" y="10" width="671" height="232">
 <rect x="10" y="10" width="671" height="232" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
index bdc158448..ccee755c1 100644
--- a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1258" height="1374" viewBox="-2 0 1258 1374"><rect x="-2.000000" y="0.000000" width="1258.000000" height="1374.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1258 1374"><svg id="d2-svg" width="1258" height="1374" viewBox="-2 0 1258 1374"><rect x="-2.000000" y="0.000000" width="1258.000000" height="1374.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="build_workflow"><g class="shape" ><rect x="0.000000" y="41.000000" width="350.000000" height="1331.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="175.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="370.000000" y="41.000000" width="291.000000" height="760.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="515.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="681.000000" y="41.000000" width="573.000000" height="760.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="967.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="40.000000" y="93.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.000000" y="140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="71.000000" y="342.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.500000" y="389.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="140.000000" y="671.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.500000" y="718.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="96.000000" y="993.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.000000" y="1040.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="128.000000" y="1242.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.500000" y="1289.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="410.000000" y="93.000000" width="211.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="515.500000" y="140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="411.000000" y="342.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="515.500000" y="389.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="468.000000" y="671.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="515.500000" y="718.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="879.000000" y="93.000000" width="178.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="968.000000" y="140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="863.000000" y="342.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="967.500000" y="389.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="920.000000" y="671.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="967.500000" y="718.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 175.000000 172.500000 C 175.000000 239.300000 175.000000 273.700000 175.000000 338.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 175.000000 421.500000 C 175.000000 520.300000 175.000000 570.700000 175.000000 667.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.000000" y="553.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 175.000000 752.500000 C 175.000000 806.900000 175.000000 924.700000 175.000000 989.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.500000" y="878.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 175.000000 1072.500000 C 175.000000 1139.300000 175.000000 1173.700000 175.000000 1238.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.500000" y="1164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 515.500000 172.500000 C 515.500000 239.300000 515.500000 273.700000 515.500000 338.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="516.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 515.500000 421.500000 C 515.500000 520.300000 515.500000 570.700000 515.500000 667.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="515.500000" y="513.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px"><tspan x="515.500000" dy="0.000000">Builds zip</tspan><tspan x="515.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="515.500000" dy="21.200000"> </tspan><tspan x="515.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="515.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 967.500000 172.500000 C 967.500000 239.300000 967.500000 273.700000 967.500000 338.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="967.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggered manually/push to master test test test test test test test</text></g><g id="apollo_workflow.(GHA -&gt; AWS)[0]"><path d="M 967.500000 421.500000 C 967.500000 520.300000 967.500000 570.700000 967.500000 667.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="967.500000" y="553.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">test</text></g><mask id="817203183" maskUnits="userSpaceOnUse" x="-2" y="0" width="1258" height="1374">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="build_workflow"><g class="shape" ><rect x="0.000000" y="41.000000" width="350.000000" height="1331.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="175.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="370.000000" y="41.000000" width="291.000000" height="760.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="515.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="681.000000" y="41.000000" width="573.000000" height="760.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="967.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="40.000000" y="93.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.000000" y="140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="71.000000" y="342.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.500000" y="389.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="140.000000" y="671.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.500000" y="718.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="96.000000" y="993.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.000000" y="1040.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="128.000000" y="1242.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="175.500000" y="1289.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="410.000000" y="93.000000" width="211.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="515.500000" y="140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="411.000000" y="342.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="515.500000" y="389.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="468.000000" y="671.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="515.500000" y="718.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="879.000000" y="93.000000" width="178.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="968.000000" y="140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="863.000000" y="342.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="967.500000" y="389.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="920.000000" y="671.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="967.500000" y="718.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 175.000000 172.500000 C 175.000000 239.300000 175.000000 273.700000 175.000000 338.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 175.000000 421.500000 C 175.000000 520.300000 175.000000 570.700000 175.000000 667.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.000000" y="553.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 175.000000 752.500000 C 175.000000 806.900000 175.000000 924.700000 175.000000 989.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.500000" y="878.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 175.000000 1072.500000 C 175.000000 1139.300000 175.000000 1173.700000 175.000000 1238.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="175.500000" y="1164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 515.500000 172.500000 C 515.500000 239.300000 515.500000 273.700000 515.500000 338.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="516.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 515.500000 421.500000 C 515.500000 520.300000 515.500000 570.700000 515.500000 667.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="515.500000" y="513.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px"><tspan x="515.500000" dy="0.000000">Builds zip</tspan><tspan x="515.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="515.500000" dy="21.200000"> </tspan><tspan x="515.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="515.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 967.500000 172.500000 C 967.500000 239.300000 967.500000 273.700000 967.500000 338.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="967.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggered manually/push to master test test test test test test test</text></g><g id="apollo_workflow.(GHA -&gt; AWS)[0]"><path d="M 967.500000 421.500000 C 967.500000 520.300000 967.500000 570.700000 967.500000 667.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#817203183)" /><text x="967.500000" y="553.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">test</text></g><mask id="817203183" maskUnits="userSpaceOnUse" x="-2" y="0" width="1258" height="1374">
 <rect x="-2" y="0" width="1258" height="1374" fill="white"></rect>
 <rect x="142.000000" y="244.000000" width="67" height="26" fill="black"></rect>
 <rect x="79.000000" y="533.000000" width="192" height="26" fill="black"></rect>
@@ -61,4 +41,4 @@
 <rect x="439.000000" y="493.000000" width="153" height="106" fill="black"></rect>
 <rect x="701.000000" y="244.000000" width="533" height="26" fill="black"></rect>
 <rect x="952.000000" y="533.000000" width="31" height="26" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
index d2abc3ca3..80b30db2e 100644
--- a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1359" height="1153" viewBox="10 10 1359 1153"><rect x="10.000000" y="10.000000" width="1359.000000" height="1153.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1359 1153"><svg id="d2-svg" width="1359" height="1153" viewBox="10 10 1359 1153"><rect x="10.000000" y="10.000000" width="1359.000000" height="1153.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="build_workflow"><g class="shape" ><rect x="12.000000" y="12.000000" width="370.000000" height="1149.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="402.000000" y="215.000000" width="311.000000" height="743.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="557.500000" y="248.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="733.000000" y="255.000000" width="634.000000" height="663.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1050.000000" y="288.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62.000000" y="62.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="92.000000" y="305.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="196.500000" y="352.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="161.000000" y="548.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="196.500000" y="595.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="118.000000" y="791.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="838.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="149.000000" y="1034.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="196.500000" y="1081.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="452.000000" y="265.000000" width="211.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="557.500000" y="312.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="453.000000" y="508.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="557.500000" y="555.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="510.000000" y="831.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="557.500000" y="878.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="960.000000" y="305.000000" width="178.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1049.000000" y="352.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="945.000000" y="548.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1049.500000" y="595.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="1002.000000" y="791.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1049.500000" y="838.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 197.000000 141.000000 L 197.000000 301.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.500000" y="229.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 197.000000 384.000000 L 197.000000 544.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.000000" y="472.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 197.000000 629.000000 L 197.000000 787.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.500000" y="715.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 197.000000 870.000000 L 197.000000 1030.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.500000" y="958.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 557.500000 344.000000 L 557.500000 504.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="558.000000" y="432.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 557.500000 587.000000 L 557.500000 827.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="557.500000" y="675.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px"><tspan x="557.500000" dy="0.000000">Builds zip</tspan><tspan x="557.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="557.500000" dy="21.200000"> </tspan><tspan x="557.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="557.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 1049.500000 384.000000 L 1049.500000 544.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="1049.500000" y="472.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggered manually/push to master test test test test test test test</text></g><g id="apollo_workflow.(GHA -&gt; AWS)[0]"><path d="M 1049.500000 627.000000 L 1049.500000 787.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="1049.500000" y="715.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">test</text></g><mask id="1824034706" maskUnits="userSpaceOnUse" x="10" y="10" width="1359" height="1153">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="build_workflow"><g class="shape" ><rect x="12.000000" y="12.000000" width="370.000000" height="1149.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="402.000000" y="215.000000" width="311.000000" height="743.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="557.500000" y="248.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="733.000000" y="255.000000" width="634.000000" height="663.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1050.000000" y="288.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="62.000000" y="62.000000" width="270.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="92.000000" y="305.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="196.500000" y="352.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="161.000000" y="548.000000" width="71.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="196.500000" y="595.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="118.000000" y="791.000000" width="158.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="838.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="149.000000" y="1034.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="196.500000" y="1081.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="452.000000" y="265.000000" width="211.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="557.500000" y="312.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="453.000000" y="508.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="557.500000" y="555.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="510.000000" y="831.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="557.500000" y="878.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="960.000000" y="305.000000" width="178.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1049.000000" y="352.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="945.000000" y="548.000000" width="209.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1049.500000" y="595.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="1002.000000" y="791.000000" width="95.000000" height="77.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1049.500000" y="838.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:25px">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 197.000000 141.000000 L 197.000000 301.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.500000" y="229.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 197.000000 384.000000 L 197.000000 544.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.000000" y="472.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 197.000000 629.000000 L 197.000000 787.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.500000" y="715.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 197.000000 870.000000 L 197.000000 1030.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="197.500000" y="958.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 557.500000 344.000000 L 557.500000 504.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="558.000000" y="432.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 557.500000 587.000000 L 557.500000 827.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="557.500000" y="675.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px"><tspan x="557.500000" dy="0.000000">Builds zip</tspan><tspan x="557.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="557.500000" dy="21.200000"> </tspan><tspan x="557.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="557.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 1049.500000 384.000000 L 1049.500000 544.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="1049.500000" y="472.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">Triggered manually/push to master test test test test test test test</text></g><g id="apollo_workflow.(GHA -&gt; AWS)[0]"><path d="M 1049.500000 627.000000 L 1049.500000 787.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1824034706)" /><text x="1049.500000" y="715.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:20px">test</text></g><mask id="1824034706" maskUnits="userSpaceOnUse" x="10" y="10" width="1359" height="1153">
 <rect x="10" y="10" width="1359" height="1153" fill="white"></rect>
 <rect x="164.000000" y="209.000000" width="67" height="26" fill="black"></rect>
 <rect x="101.000000" y="452.000000" width="192" height="26" fill="black"></rect>
@@ -61,4 +41,4 @@
 <rect x="481.000000" y="655.000000" width="153" height="106" fill="black"></rect>
 <rect x="783.000000" y="452.000000" width="533" height="26" fill="black"></rect>
 <rect x="1034.000000" y="695.000000" width="31" height="26" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
index 6e4e7c84b..12f594c0b 100644
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="292" height="132" viewBox="-2 -2 292 132"><rect x="-2.000000" y="-2.000000" width="292.000000" height="132.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 292 132"><svg id="d2-svg" width="292" height="132" viewBox="-2 -2 292 132"><rect x="-2.000000" y="-2.000000" width="292.000000" height="132.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-2" y="-2" width="292" height="132">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-2" y="-2" width="292" height="132">
 <rect x="-2" y="-2" width="292" height="132" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
index 8f3b72af4..3dd7372e5 100644
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="252" height="132" viewBox="10 10 252 132"><rect x="10.000000" y="10.000000" width="252.000000" height="132.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 252 132"><svg id="d2-svg" width="252" height="132" viewBox="10 10 252 132"><rect x="10.000000" y="10.000000" width="252.000000" height="132.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="10" y="10" width="252" height="132">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="10" y="10" width="252" height="132">
 <rect x="10" y="10" width="252" height="132" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg
index 6a8a304aa..2907e4ada 100644
--- a/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="270" height="168" viewBox="-2 0 270 168"><rect x="-2.000000" y="0.000000" width="270.000000" height="168.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 270 168"><svg id="d2-svg" width="270" height="168" viewBox="-2 0 270 168"><rect x="-2.000000" y="0.000000" width="270.000000" height="168.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="0.000000" y="41.000000" width="266.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="133.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="40.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="173.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="199.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 94.699280 85.996998 C 114.333333 73.810345 121.000000 70.500000 123.000000 70.500000 C 125.000000 70.500000 127.666667 77.100000 129.666667 87.000000 C 131.666667 96.900000 131.666667 110.100000 129.666667 120.000000 C 127.666667 129.900000 114.333333 133.189655 96.398561 122.057727" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3864958051)" /></g><mask id="3864958051" maskUnits="userSpaceOnUse" x="-2" y="0" width="270" height="168">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="41.000000" width="266.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="133.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="40.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="173.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="199.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 94.699280 85.996998 C 114.333333 73.810345 121.000000 70.500000 123.000000 70.500000 C 125.000000 70.500000 127.666667 77.100000 129.666667 87.000000 C 131.666667 96.900000 131.666667 110.100000 129.666667 120.000000 C 127.666667 129.900000 114.333333 133.189655 96.398561 122.057727" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3864958051)" /></g><mask id="3864958051" maskUnits="userSpaceOnUse" x="-2" y="0" width="270" height="168">
 <rect x="-2" y="0" width="270" height="168" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg
index 94ea344c1..6057ac64a 100644
--- a/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="280" height="170" viewBox="10 10 280 170"><rect x="10.000000" y="10.000000" width="280.000000" height="170.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 280 170"><svg id="d2-svg" width="280" height="170" viewBox="10 10 280 170"><rect x="10.000000" y="10.000000" width="280.000000" height="170.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="276.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="150.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="112.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="185.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="211.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 110.000000 84.000000 L 72.000000 84.000000 S 62.000000 84.000000 62.000000 94.000000 L 62.000000 96.000000 S 62.000000 106.000000 72.000000 106.000000 L 108.000000 106.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2867371107)" /></g><mask id="2867371107" maskUnits="userSpaceOnUse" x="10" y="10" width="280" height="170">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="276.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="150.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="112.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="185.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="211.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 110.000000 84.000000 L 72.000000 84.000000 S 62.000000 84.000000 62.000000 94.000000 L 62.000000 96.000000 S 62.000000 106.000000 72.000000 106.000000 L 108.000000 106.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2867371107)" /></g><mask id="2867371107" maskUnits="userSpaceOnUse" x="10" y="10" width="280" height="170">
 <rect x="10" y="10" width="280" height="170" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
index 965fbb65f..2a1bc9f37 100644
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="950" height="318" viewBox="-2 -2 950 318"><rect x="-2.000000" y="-2.000000" width="950.000000" height="318.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 950 318"><svg id="d2-svg" width="950" height="318" viewBox="-2 -2 950 318"><rect x="-2.000000" y="-2.000000" width="950.000000" height="318.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -794,4 +774,4 @@ inserted here</p>
 </div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="40.000000" y="198.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="72.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="165.000000" y="198.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="290.000000" y="198.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="322.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="415.000000" y="198.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="447.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="540.000000" y="198.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="573.000000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="666.000000" y="198.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="698.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="841.000000" y="198.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.500000 38.000000 C 72.500000 85.600000 72.500000 158.000000 72.500000 194.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#146194444)" /></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 322.500000 38.000000 C 322.500000 85.600000 322.500000 158.000000 322.500000 194.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#146194444)" /></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 698.500000 38.000000 C 698.500000 85.600000 698.500000 158.000000 698.500000 194.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#146194444)" /></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 873.500000 50.000000 C 873.500000 88.000000 873.500000 158.000000 873.500000 194.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#146194444)" /></g><mask id="146194444" maskUnits="userSpaceOnUse" x="-2" y="-2" width="950" height="318">
 <rect x="-2" y="-2" width="950" height="318" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
index 28a0b528d..1cba56cff 100644
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="680" height="303" viewBox="10 10 680 303"><rect x="10.000000" y="10.000000" width="680.000000" height="303.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 680 303"><svg id="d2-svg" width="680" height="303" viewBox="10 10 680 303"><rect x="10.000000" y="10.000000" width="680.000000" height="303.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -794,4 +774,4 @@ inserted here</p>
 </div></foreignObject></g></g><g id="queue.M0"><g class="shape" ><rect x="62.000000" y="195.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="94.500000" y="233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M0</text></g><g id="queue.M1"><g class="shape" ><rect x="147.000000" y="195.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.500000" y="233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M1</text></g><g id="queue.M2"><g class="shape" ><rect x="232.000000" y="195.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="264.500000" y="233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M2</text></g><g id="queue.M3"><g class="shape" ><rect x="317.000000" y="195.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="349.500000" y="233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M3</text></g><g id="queue.M4"><g class="shape" ><rect x="402.000000" y="195.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="435.000000" y="233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M4</text></g><g id="queue.M5"><g class="shape" ><rect x="488.000000" y="195.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="520.500000" y="233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M5</text></g><g id="queue.M6"><g class="shape" ><rect x="573.000000" y="195.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="605.500000" y="233.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M6</text></g><g id="(m0_desc -&gt; queue.M0)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 94.500000 62.000000 L 94.500000 191.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2267869129)" /></g><g id="(m2_desc -&gt; queue.M2)[0]"><path d="M 264.500000 62.000000 L 264.500000 191.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2267869129)" /></g><g id="(m5_desc -&gt; queue.M5)[0]"><path d="M 470.500000 62.000000 L 470.500000 90.000000 S 470.500000 100.000000 480.500000 100.000000 L 510.500000 100.000000 S 520.500000 100.000000 520.500000 110.000000 L 520.500000 191.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2267869129)" /></g><g id="(m6_desc -&gt; queue.M6)[0]"><path d="M 605.500000 62.000000 L 605.500000 191.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2267869129)" /></g><mask id="2267869129" maskUnits="userSpaceOnUse" x="10" y="10" width="680" height="303">
 <rect x="10" y="10" width="680" height="303" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg b/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg
index 3f319ae38..e50e0740f 100644
--- a/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_class_height/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="745" height="188" viewBox="-2 -2 745 188"><rect x="-2.000000" y="-2.000000" width="745.000000" height="188.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 745 188"><svg id="d2-svg" width="745" height="188" viewBox="-2 -2 745 188"><rect x="-2.000000" y="-2.000000" width="745.000000" height="188.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class1"><g class="shape" ><rect x="0.000000" y="0.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="159.500000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="299.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="299.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="0.000000" x2="319.000000" y1="184.000000" y2="184.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="560.000000" y="99.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="379.000000" x2="741.000000" y1="138.000000" y2="138.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="3149201134" maskUnits="userSpaceOnUse" x="-2" y="-2" width="745" height="188">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class1"><g class="shape" ><rect x="0.000000" y="0.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="159.500000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="299.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="299.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="0.000000" x2="319.000000" y1="184.000000" y2="184.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="379.000000" y="46.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="560.000000" y="99.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="379.000000" x2="741.000000" y1="138.000000" y2="138.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="3149201134" maskUnits="userSpaceOnUse" x="-2" y="-2" width="745" height="188">
 <rect x="-2" y="-2" width="745" height="188" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg b/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg
index b2208a25b..e8917234f 100644
--- a/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_class_height/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="705" height="188" viewBox="10 10 705 188"><rect x="10.000000" y="10.000000" width="705.000000" height="188.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 705 188"><svg id="d2-svg" width="705" height="188" viewBox="10 10 705 188"><rect x="10.000000" y="10.000000" width="705.000000" height="188.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class1"><g class="shape" ><rect x="12.000000" y="12.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="171.500000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="311.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="311.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="12.000000" x2="331.000000" y1="196.000000" y2="196.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="532.000000" y="111.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="351.000000" x2="713.000000" y1="150.000000" y2="150.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="2428178623" maskUnits="userSpaceOnUse" x="10" y="10" width="705" height="188">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class1"><g class="shape" ><rect x="12.000000" y="12.000000" width="319.000000" height="184.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="319.000000" height="92.000000" class="class_header fill-N1" /><text x="171.500000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class with rows</text><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="311.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="311.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><line x1="12.000000" x2="331.000000" y1="196.000000" y2="196.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="class2"><g class="shape" ><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="58.000000" width="362.000000" height="92.000000" class="class_header fill-N1" /><text x="532.000000" y="111.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">class without rows</text><line x1="351.000000" x2="713.000000" y1="150.000000" y2="150.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="2428178623" maskUnits="userSpaceOnUse" x="10" y="10" width="705" height="188">
 <rect x="10" y="10" width="705" height="188" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg b/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
index f70d2051f..817d8d385 100644
--- a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="232" viewBox="0 0 106 232"><rect x="0.000000" y="0.000000" width="106.000000" height="232.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 106 232"><svg id="d2-svg" width="106" height="232" viewBox="0 0 106 232"><rect x="0.000000" y="0.000000" width="106.000000" height="232.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="A"><g class="shape" ><rect x="13.000000" y="0.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="0.000000" y="166.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 53.000000 67.000000 C 53.000000 106.000000 53.000000 126.000000 53.000000 163.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2807129037)" /></g><mask id="2807129037" maskUnits="userSpaceOnUse" x="0" y="0" width="106" height="232">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="A"><g class="shape" ><rect x="13.000000" y="0.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="0.000000" y="166.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="53.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 53.000000 67.000000 C 53.000000 106.000000 53.000000 126.000000 53.000000 163.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2807129037)" /></g><mask id="2807129037" maskUnits="userSpaceOnUse" x="0" y="0" width="106" height="232">
 <rect x="0" y="0" width="106" height="232" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
index 9d68a2002..992894372 100644
--- a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="202" viewBox="12 12 106 202"><rect x="12.000000" y="12.000000" width="106.000000" height="202.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 106 202"><svg id="d2-svg" width="106" height="202" viewBox="12 12 106 202"><rect x="12.000000" y="12.000000" width="106.000000" height="202.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="A"><g class="shape" ><rect x="25.000000" y="12.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="12.000000" y="148.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 65.000000 79.000000 L 65.000000 145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2528305922)" /></g><mask id="2528305922" maskUnits="userSpaceOnUse" x="12" y="12" width="106" height="202">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="A"><g class="shape" ><rect x="25.000000" y="12.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="B"><g class="shape" ><rect x="12.000000" y="148.000000" width="106.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="65.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 65.000000 79.000000 L 65.000000 145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2528305922)" /></g><mask id="2528305922" maskUnits="userSpaceOnUse" x="12" y="12" width="106" height="202">
 <rect x="12" y="12" width="106" height="202" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg b/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg
index 6839341a7..b59d3bb60 100644
--- a/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/just-width/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="266" height="65" viewBox="-2 -2 266 65"><rect x="-2.000000" y="-2.000000" width="266.000000" height="65.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 266 65"><svg id="d2-svg" width="266" height="65" viewBox="-2 -2 266 65"><rect x="-2.000000" y="-2.000000" width="266.000000" height="65.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="131.000000" y="36.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="824054296" maskUnits="userSpaceOnUse" x="-2" y="-2" width="266" height="65">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="131.000000" y="36.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="824054296" maskUnits="userSpaceOnUse" x="-2" y="-2" width="266" height="65">
 <rect x="-2" y="-2" width="266" height="65" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/just-width/elk/sketch.exp.svg b/e2etests/testdata/regression/just-width/elk/sketch.exp.svg
index 38b501b1f..6d44fc5f4 100644
--- a/e2etests/testdata/regression/just-width/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/just-width/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="266" height="65" viewBox="10 10 266 65"><rect x="10.000000" y="10.000000" width="266.000000" height="65.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 266 65"><svg id="d2-svg" width="266" height="65" viewBox="10 10 266 65"><rect x="10.000000" y="10.000000" width="266.000000" height="65.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.000000" y="48.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="1205229616" maskUnits="userSpaceOnUse" x="10" y="10" width="266" height="65">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="262.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.000000" y="48.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">teamwork: having someone to blame</text></g><mask id="1205229616" maskUnits="userSpaceOnUse" x="10" y="10" width="266" height="65">
 <rect x="10" y="10" width="266" height="65" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg b/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
index 054e89f8f..3e498d2cd 100644
--- a/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="451" viewBox="-2 -2 99 451"><rect x="-2.000000" y="-2.000000" width="99.000000" height="451.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 99 451"><svg id="d2-svg" width="99" height="451" viewBox="-2 -2 99 451"><rect x="-2.000000" y="-2.000000" width="99.000000" height="451.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -797,4 +777,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="21.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="47.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="21.000000" y="381.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="47.500000" y="419.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 47.500000 68.000000 C 47.500000 106.000000 47.500000 126.000000 47.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2203567259)" /></g><g id="(md -&gt; b)[0]"><path d="M 47.500000 283.000000 C 47.500000 321.000000 47.500000 341.000000 47.500000 377.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2203567259)" /></g><mask id="2203567259" maskUnits="userSpaceOnUse" x="-2" y="-2" width="99" height="451">
 <rect x="-2" y="-2" width="99" height="451" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg b/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
index 5b6277010..25e250eda 100644
--- a/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="391" viewBox="10 10 99 391"><rect x="10.000000" y="10.000000" width="99.000000" height="391.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 99 391"><svg id="d2-svg" width="99" height="391" viewBox="10 10 99 391"><rect x="10.000000" y="10.000000" width="99.000000" height="391.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -797,4 +777,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="33.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="33.000000" y="333.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="371.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.500000 80.000000 L 59.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#343103504)" /></g><g id="(md -&gt; b)[0]"><path d="M 59.500000 265.000000 L 59.500000 329.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#343103504)" /></g><mask id="343103504" maskUnits="userSpaceOnUse" x="10" y="10" width="99" height="391">
 <rect x="10" y="10" width="99" height="391" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/nested_steps/dagre/sketch.exp.svg b/e2etests/testdata/regression/nested_steps/dagre/sketch.exp.svg
index ffe9cf134..fd0e6737c 100644
--- a/e2etests/testdata/regression/nested_steps/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/nested_steps/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="311" height="404" viewBox="-2 0 311 404"><rect x="-2.000000" y="0.000000" width="311.000000" height="404.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 311 404"><svg id="d2-svg" width="311" height="404" viewBox="-2 0 311 404"><rect x="-2.000000" y="0.000000" width="311.000000" height="404.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="173.000000" height="361.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="86.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><path d="M 214 50 L 272 50 L 307 101 L 272 151 L 214 151 L 249 101 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="260.500000" y="106.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><path d="M 213 251 L 272 251 L 307 302 L 272 352 L 213 352 L 248 302 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="260.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.a"><g class="shape" ><path d="M 40 70 L 98 70 L 133 121 L 98 171 L 40 171 L 75 121 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="86.500000" y="126.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.b"><g class="shape" ><path d="M 40 271 L 98 271 L 133 322 L 98 372 L 40 372 L 75 322 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="86.500000" y="327.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 86.020201 173.999898 C 86.400000 211.600000 86.600000 231.600000 86.960398 268.000196" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#136280660)" /></g><g id="(c -&gt; d)[0]"><path d="M 260.000000 153.000000 C 260.000000 191.000000 260.000000 211.000000 260.000000 247.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#136280660)" /></g><mask id="136280660" maskUnits="userSpaceOnUse" x="-2" y="0" width="311" height="404">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="173.000000" height="361.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="86.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><path d="M 214 50 L 272 50 L 307 101 L 272 151 L 214 151 L 249 101 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="260.500000" y="106.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><path d="M 213 251 L 272 251 L 307 302 L 272 352 L 213 352 L 248 302 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="260.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.a"><g class="shape" ><path d="M 40 70 L 98 70 L 133 121 L 98 171 L 40 171 L 75 121 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="86.500000" y="126.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.b"><g class="shape" ><path d="M 40 271 L 98 271 L 133 322 L 98 372 L 40 372 L 75 322 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="86.500000" y="327.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 86.020201 173.999898 C 86.400000 211.600000 86.600000 231.600000 86.960398 268.000196" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#136280660)" /></g><g id="(c -&gt; d)[0]"><path d="M 260.000000 153.000000 C 260.000000 191.000000 260.000000 211.000000 260.000000 247.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#136280660)" /></g><mask id="136280660" maskUnits="userSpaceOnUse" x="-2" y="0" width="311" height="404">
 <rect x="-2" y="0" width="311" height="404" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/nested_steps/elk/sketch.exp.svg b/e2etests/testdata/regression/nested_steps/elk/sketch.exp.svg
index 49888dd16..e7feaef48 100644
--- a/e2etests/testdata/regression/nested_steps/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/nested_steps/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="310" height="547" viewBox="10 10 310 547"><rect x="10.000000" y="10.000000" width="310.000000" height="547.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 310 547"><svg id="d2-svg" width="310" height="547" viewBox="10 10 310 547"><rect x="10.000000" y="10.000000" width="310.000000" height="547.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="193.000000" height="372.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="108.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><path d="M 225 283 L 283 283 L 318 334 L 283 384 L 225 384 L 260 334 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="271.500000" y="339.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><path d="M 224 454 L 283 454 L 318 505 L 283 555 L 224 555 L 259 505 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="271.000000" y="510.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.a"><g class="shape" ><path d="M 62 62 L 120 62 L 155 113 L 120 163 L 62 163 L 97 113 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="108.500000" y="118.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.b"><g class="shape" ><path d="M 62 233 L 120 233 L 155 284 L 120 334 L 62 334 L 97 284 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="108.500000" y="289.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 108.000000 165.000000 L 108.000000 229.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3805020734)" /></g><g id="(c -&gt; d)[0]"><path d="M 271.000000 386.000000 L 271.000000 450.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3805020734)" /></g><mask id="3805020734" maskUnits="userSpaceOnUse" x="10" y="10" width="310" height="547">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="193.000000" height="372.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="108.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><path d="M 225 283 L 283 283 L 318 334 L 283 384 L 225 384 L 260 334 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="271.500000" y="339.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><path d="M 224 454 L 283 454 L 318 505 L 283 555 L 224 555 L 259 505 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="271.000000" y="510.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="a.a"><g class="shape" ><path d="M 62 62 L 120 62 L 155 113 L 120 163 L 62 163 L 97 113 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="108.500000" y="118.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.b"><g class="shape" ><path d="M 62 233 L 120 233 L 155 284 L 120 334 L 62 334 L 97 284 Z" class=" stroke-B1 fill-AB5" style="stroke-width:2;" /></g><text x="108.500000" y="289.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 108.000000 165.000000 L 108.000000 229.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3805020734)" /></g><g id="(c -&gt; d)[0]"><path d="M 271.000000 386.000000 L 271.000000 450.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3805020734)" /></g><mask id="3805020734" maskUnits="userSpaceOnUse" x="10" y="10" width="310" height="547">
 <rect x="10" y="10" width="310" height="547" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg b/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
index f2ec06ef5..d45ce2029 100644
--- a/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="42" viewBox="-2 -2 77 42"><rect x="-2.000000" y="-2.000000" width="77.000000" height="42.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 77 42"><svg id="d2-svg" width="77" height="42" viewBox="-2 -2 77 42"><rect x="-2.000000" y="-2.000000" width="77.000000" height="42.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="1323269655" maskUnits="userSpaceOnUse" x="-2" y="-2" width="77" height="42">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ></g><g transform="translate(0.000000 0.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="1323269655" maskUnits="userSpaceOnUse" x="-2" y="-2" width="77" height="42">
 <rect x="-2" y="-2" width="77" height="42" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg b/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
index 3fba888fe..1408e59b5 100644
--- a/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="42" viewBox="10 10 77 42"><rect x="10.000000" y="10.000000" width="77.000000" height="42.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 77 42"><svg id="d2-svg" width="77" height="42" viewBox="10 10 77 42"><rect x="10.000000" y="10.000000" width="77.000000" height="42.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="4118793327" maskUnits="userSpaceOnUse" x="10" y="10" width="77" height="42">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ></g><g transform="translate(12.000000 12.000000)"><rect width="73.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">x&#160;-&gt;&#160;y</text></g></g></g><mask id="4118793327" maskUnits="userSpaceOnUse" x="10" y="10" width="77" height="42">
 <rect x="10" y="10" width="77" height="42" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
index 0492893da..2352836e0 100644
--- a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1086" height="404" viewBox="-2 -2 1086 404"><rect x="-2.000000" y="-2.000000" width="1086.000000" height="404.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1086 404"><svg id="d2-svg" width="1086" height="404" viewBox="-2 -2 1086 404"><rect x="-2.000000" y="-2.000000" width="1086.000000" height="404.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="541.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" x2="1082.000000" y1="92.000000" y2="92.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="217.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="351.000000" y="328.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="328.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="353.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="361.000000" y="387.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="402.000000" y="387.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="712.000000" y="387.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="351.000000" x2="732.000000" y1="400.000000" y2="400.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><mask id="79555003" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1086" height="404">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="541.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" x2="1082.000000" y1="92.000000" y2="92.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="192.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="217.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="351.000000" y="328.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="351.000000" y="328.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="361.000000" y="353.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="361.000000" y="387.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="402.000000" y="387.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="712.000000" y="387.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="351.000000" x2="732.000000" y1="400.000000" y2="400.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 541.000000 94.000000 C 541.000000 132.000000 541.000000 152.000000 541.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 230.000000 C 541.000000 268.000000 541.000000 288.000000 541.000000 324.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#79555003)" /></g><mask id="79555003" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1086" height="404">
 <rect x="-2" y="-2" width="1086" height="404" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
index ee4967e76..c3390c7a6 100644
--- a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1086" height="344" viewBox="10 10 1086 344"><rect x="10.000000" y="10.000000" width="1086.000000" height="344.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1086 344"><svg id="d2-svg" width="1086" height="344" viewBox="10 10 1086 344"><rect x="10.000000" y="10.000000" width="1086.000000" height="344.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="553.000000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" x2="1094.000000" y1="104.000000" y2="104.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="199.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="362.000000" y="280.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="280.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="305.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="372.000000" y="339.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="413.000000" y="339.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="723.000000" y="339.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="362.000000" x2="743.000000" y1="352.000000" y2="352.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 553.000000 106.000000 L 553.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 212.000000 L 553.000000 276.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><mask id="3719347756" maskUnits="userSpaceOnUse" x="10" y="10" width="1086" height="344">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="1082.000000" height="92.000000" class="class_header fill-N1" /><text x="553.000000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" x2="1094.000000" y1="104.000000" y2="104.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><g id="table"><g class="shape" ><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="174.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="199.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect x="362.000000" y="280.000000" width="381.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="362.000000" y="280.000000" width="381.000000" height="36.000000" class="class_header fill-N1" /><text x="372.000000" y="305.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">RefreshAuthorizationPolicyCache</text><text x="372.000000" y="339.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">ok</text><text x="413.000000" y="339.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="723.000000" y="339.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="362.000000" x2="743.000000" y1="352.000000" y2="352.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 553.000000 106.000000 L 553.000000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 212.000000 L 553.000000 276.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3719347756)" /></g><mask id="3719347756" maskUnits="userSpaceOnUse" x="10" y="10" width="1086" height="344">
 <rect x="10" y="10" width="1086" height="344" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg b/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
index aff28f744..7b52f3e2e 100644
--- a/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="554" height="273" viewBox="0 -2 554 273"><rect x="0.000000" y="-2.000000" width="554.000000" height="273.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 554 273"><svg id="d2-svg" width="554" height="273" viewBox="0 -2 554 273"><rect x="0.000000" y="-2.000000" width="554.000000" height="273.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -797,4 +777,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="135.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 161.000000 68.000000 C 161.000000 120.800000 161.000000 148.300000 161.000000 199.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4082817813)" /><text x="161.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="161.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="161.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="4082817813" maskUnits="userSpaceOnUse" x="0" y="-2" width="554" height="273">
 <rect x="0" y="-2" width="554" height="273" fill="white"></rect>
 <rect x="0.000000" y="116.000000" width="322" height="37" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg b/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
index 4230c6a26..89de10292 100644
--- a/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="513" height="313" viewBox="12 10 513 313"><rect x="12.000000" y="10.000000" width="513.000000" height="313.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 513 313"><svg id="d2-svg" width="513" height="313" viewBox="12 10 513 313"><rect x="12.000000" y="10.000000" width="513.000000" height="313.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -797,4 +777,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="146.000000" y="255.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="293.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 173.000000 80.000000 L 173.000000 251.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2191417488)" /><text x="173.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="173.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="173.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="2191417488" maskUnits="userSpaceOnUse" x="12" y="10" width="513" height="313">
 <rect x="12" y="10" width="513" height="313" fill="white"></rect>
 <rect x="12.000000" y="148.000000" width="322" height="37" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
index 0e636dfe4..6bc41b004 100644
--- a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1225" height="455" viewBox="-2 0 1225 455"><rect x="-2.000000" y="0.000000" width="1225.000000" height="455.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1225 455"><svg id="d2-svg" width="1225" height="455" viewBox="-2 0 1225 455"><rect x="-2.000000" y="0.000000" width="1225.000000" height="455.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,30 +31,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="k8s"><g class="shape" ><rect x="0.000000" y="41.000000" width="1221.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="610.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0.000000" y="328.000000" width="395.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.500000" y="315.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="86.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="152.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="278.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="344.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="470.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="536.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="662.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="728.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="855.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="921.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1048.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1114.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="131.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="169.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="279.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="317.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 168.000000 C 59.000000 214.400000 59.000000 246.900000 59.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="59.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 141.000000 168.000000 C 141.000000 214.400000 141.000000 246.900000 141.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="141.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 217.000000 168.000000 C 217.000000 214.400000 217.000000 238.700000 217.000000 283.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="217.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 278.000000 168.000000 C 278.000000 214.400000 278.000000 246.900000 278.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="278.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">vault</text></g><mask id="2370069283" maskUnits="userSpaceOnUse" x="-2" y="0" width="1225" height="455">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="k8s"><g class="shape" ><rect x="0.000000" y="41.000000" width="1221.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="610.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="0.000000" y="328.000000" width="395.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="197.500000" y="315.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="86.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="152.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="278.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="344.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="470.000000" y="70.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="536.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="662.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="728.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="855.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="921.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="1048.000000" y="70.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1114.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="131.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="169.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="279.000000" y="357.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="317.000000" y="395.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 168.000000 C 59.000000 214.400000 59.000000 246.900000 59.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="59.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 141.000000 168.000000 C 141.000000 214.400000 141.000000 246.900000 141.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="141.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 217.000000 168.000000 C 217.000000 214.400000 217.000000 238.700000 217.000000 283.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="217.500000" y="232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 278.000000 168.000000 C 278.000000 214.400000 278.000000 246.900000 278.000000 324.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2370069283)" /><text x="278.500000" y="253.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">vault</text></g><mask id="2370069283" maskUnits="userSpaceOnUse" x="-2" y="0" width="1225" height="455">
 <rect x="-2" y="0" width="1225" height="455" fill="white"></rect>
 <rect x="30.000000" y="237.000000" width="59" height="21" fill="black"></rect>
 <rect x="109.000000" y="237.000000" width="65" height="21" fill="black"></rect>
 <rect x="194.000000" y="216.000000" width="47" height="21" fill="black"></rect>
 <rect x="261.000000" y="237.000000" width="35" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg b/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
index de8a1df32..657438724 100644
--- a/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="999" height="557" viewBox="10 10 999 557"><rect x="10.000000" y="10.000000" width="999.000000" height="557.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 999 557"><svg id="d2-svg" width="999" height="557" viewBox="10 10 999 557"><rect x="10.000000" y="10.000000" width="999.000000" height="557.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,30 +31,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="k8s"><g class="shape" ><rect x="12.000000" y="12.000000" width="995.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="509.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="301.000000" y="399.000000" width="272.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="437.000000" y="432.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="62.000000" y="62.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="128.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="214.000000" y="62.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="280.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="366.000000" y="62.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="432.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="518.000000" y="62.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="584.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="671.000000" y="62.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="737.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="824.000000" y="62.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="890.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="351.000000" y="449.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="389.000000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="447.000000" y="449.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="485.000000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 211.000000 180.000000 L 211.000000 299.000000 S 211.000000 309.000000 221.000000 309.000000 L 345.600000 309.000000 S 355.600000 309.000000 355.600000 319.000000 L 355.600000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="262.500000" y="315.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 410.000000 180.000000 L 410.000000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="410.500000" y="294.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 609.000000 180.000000 L 609.000000 299.000000 S 609.000000 309.000000 599.000000 309.000000 L 474.400000 309.000000 S 464.400000 309.000000 464.400000 319.000000 L 464.400000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="557.500000" y="315.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 808.000000 180.000000 L 808.000000 349.000000 S 808.000000 359.000000 798.000000 359.000000 L 528.800000 359.000000 S 518.800000 359.000000 518.800000 369.000000 L 518.800000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="733.500000" y="365.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">vault</text></g><mask id="2844165230" maskUnits="userSpaceOnUse" x="10" y="10" width="999" height="557">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="k8s"><g class="shape" ><rect x="12.000000" y="12.000000" width="995.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="509.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Kubernetes</text></g><g id="osvc"><g class="shape" ><rect x="301.000000" y="399.000000" width="272.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="437.000000" y="432.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">opensvc</text></g><g id="k8s.m1"><g class="shape" ><rect x="62.000000" y="62.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="128.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master1</text></g><g id="k8s.m2"><g class="shape" ><rect x="214.000000" y="62.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="280.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master2</text></g><g id="k8s.m3"><g class="shape" ><rect x="366.000000" y="62.000000" width="132.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="432.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-master3</text></g><g id="k8s.w1"><g class="shape" ><rect x="518.000000" y="62.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="584.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker1</text></g><g id="k8s.w2"><g class="shape" ><rect x="671.000000" y="62.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="737.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker2</text></g><g id="k8s.w3"><g class="shape" ><rect x="824.000000" y="62.000000" width="133.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="890.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k8s-worker3</text></g><g id="osvc.vm1"><g class="shape" ><rect x="351.000000" y="449.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="389.000000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM1</text></g><g id="osvc.vm2"><g class="shape" ><rect x="447.000000" y="449.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="485.000000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VM2</text></g><g id="(k8s -&gt; osvc)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 211.000000 180.000000 L 211.000000 299.000000 S 211.000000 309.000000 221.000000 309.000000 L 345.600000 309.000000 S 355.600000 309.000000 355.600000 319.000000 L 355.600000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="262.500000" y="315.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">keycloak</text></g><g id="(k8s -&gt; osvc)[1]"><path d="M 410.000000 180.000000 L 410.000000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="410.500000" y="294.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">heptapod</text></g><g id="(k8s -&gt; osvc)[2]"><path d="M 609.000000 180.000000 L 609.000000 299.000000 S 609.000000 309.000000 599.000000 309.000000 L 474.400000 309.000000 S 464.400000 309.000000 464.400000 319.000000 L 464.400000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="557.500000" y="315.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">harbor</text></g><g id="(k8s -&gt; osvc)[3]"><path d="M 808.000000 180.000000 L 808.000000 349.000000 S 808.000000 359.000000 798.000000 359.000000 L 528.800000 359.000000 S 518.800000 359.000000 518.800000 369.000000 L 518.800000 395.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2844165230)" /><text x="733.500000" y="365.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">vault</text></g><mask id="2844165230" maskUnits="userSpaceOnUse" x="10" y="10" width="999" height="557">
 <rect x="10" y="10" width="999" height="557" fill="white"></rect>
 <rect x="233.000000" y="299.000000" width="59" height="21" fill="black"></rect>
 <rect x="378.000000" y="278.000000" width="65" height="21" fill="black"></rect>
 <rect x="534.000000" y="299.000000" width="47" height="21" fill="black"></rect>
 <rect x="716.000000" y="349.000000" width="35" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
index e98414f7a..4009182df 100644
--- a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="122" viewBox="-2 -2 160 122"><rect x="-2.000000" y="-2.000000" width="160.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 160 122"><svg id="d2-svg" width="160" height="122" viewBox="-2 -2 160 122"><rect x="-2.000000" y="-2.000000" width="160.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="my network"><g class="shape" ><rect x="0.000000" y="0.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="48.500000" y="29.500000" width="59" height="59" /><text x="78.000000" y="21.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="722444197" maskUnits="userSpaceOnUse" x="-2" y="-2" width="160" height="122">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="my network"><g class="shape" ><rect x="0.000000" y="0.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="48.500000" y="29.500000" width="59" height="59" /><text x="78.000000" y="21.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="722444197" maskUnits="userSpaceOnUse" x="-2" y="-2" width="160" height="122">
 <rect x="-2" y="-2" width="160" height="122" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
index e1a94b631..3346f4056 100644
--- a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="122" viewBox="10 10 160 122"><rect x="10.000000" y="10.000000" width="160.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 160 122"><svg id="d2-svg" width="160" height="122" viewBox="10 10 160 122"><rect x="10.000000" y="10.000000" width="160.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="my network"><g class="shape" ><rect x="12.000000" y="12.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="60.500000" y="41.500000" width="59" height="59" /><text x="90.000000" y="33.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="2778741965" maskUnits="userSpaceOnUse" x="10" y="10" width="160" height="122">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="my network"><g class="shape" ><rect x="12.000000" y="12.000000" width="156.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="60.500000" y="41.500000" width="59" height="59" /><text x="90.000000" y="33.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">my network</text></g><mask id="2778741965" maskUnits="userSpaceOnUse" x="10" y="10" width="160" height="122">
 <rect x="10" y="10" width="160" height="122" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence-note-escape-group/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence-note-escape-group/dagre/sketch.exp.svg
index 9c59a888f..493cc56df 100644
--- a/e2etests/testdata/regression/sequence-note-escape-group/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence-note-escape-group/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="433" height="402" viewBox="-134 50 433 402"><rect x="-134.000000" y="50.000000" width="433.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 433 402"><svg id="d2-svg" width="433" height="402" viewBox="-134 50 433 402"><rect x="-134.000000" y="50.000000" width="433.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,28 +17,8 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-134" y="50" width="433" height="402">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-134" y="50" width="433" height="402">
 <rect x="-134" y="50" width="433" height="402" fill="white"></rect>
 <rect x="-129.000000" y="166.000000" width="76" height="16" fill="black"></rect>
 <rect x="-117.000000" y="207.000000" width="160" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence-note-escape-group/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence-note-escape-group/elk/sketch.exp.svg
index 9c59a888f..493cc56df 100644
--- a/e2etests/testdata/regression/sequence-note-escape-group/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence-note-escape-group/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="433" height="402" viewBox="-134 50 433 402"><rect x="-134.000000" y="50.000000" width="433.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 433 402"><svg id="d2-svg" width="433" height="402" viewBox="-134 50 433 402"><rect x="-134.000000" y="50.000000" width="433.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,28 +17,8 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-134" y="50" width="433" height="402">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="197.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="247.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="(b -- )[0]"><path d="M 247.000000 120.000000 L 247.000000 451.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#751485896)" /></g><g id="&#34;04:20,11:20&#34;"><g class="shape blend" ><rect x="-134.000000" y="161.000000" width="433.000000" height="248.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-129.000000" y="166.000000" width="76.000000" height="21.000000" class=" fill-N5" /><text x="-91.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">04:20,11:20</text></g><g id="&#34;04:20,11:20&#34;.loop through each table"><g class="shape blend" ><rect x="-122.000000" y="202.000000" width="409.000000" height="195.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-117.000000" y="207.000000" width="160.000000" height="21.000000" class=" fill-N5" /><text x="-37.000000" y="223.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">loop through each table</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 382.000000 L 243.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#751485896)" /></g><g id="a.&#34;start_time = datetime.datetime.now&#34;"><g class="shape" ><path d="M -82 246 H 186 C 187 246 188 246 189 247 L 206 263 C 207 264 207 265 207 266 V 312 C 207 312 207 312 207 312 H -82 C -82 312 -82 312 -82 312 V 247 C -82 246 -82 246 -82 246 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 206 312 H -81 C -82 312 -82 312 -82 311 V 247 C -82 246 -82 246 -81 246 H 185 C 186 246 186 246 186 247 V 264 C 186 265 187 266 188 266 H 206 C 207 266 207 266 207 267 V 311 C 206 312 207 312 206 312 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="284.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">start_time = datetime.datetime.now</text></g><mask id="751485896" maskUnits="userSpaceOnUse" x="-134" y="50" width="433" height="402">
 <rect x="-134" y="50" width="433" height="402" fill="white"></rect>
 <rect x="-129.000000" y="166.000000" width="76" height="16" fill="black"></rect>
 <rect x="-117.000000" y="207.000000" width="160" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
index 6b1ed64c9..d4af503bc 100644
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="274" height="712" viewBox="0 0 274 712"><rect x="0.000000" y="0.000000" width="274.000000" height="712.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 274 712"><svg id="d2-svg" width="274" height="712" viewBox="0 0 274 712"><rect x="0.000000" y="0.000000" width="274.000000" height="712.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="foo"><g class="shape" ><rect x="0.000000" y="0.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="0.000000" y="406.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="439.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="162.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="12.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="162.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 137.000000 307.000000 C 137.000000 346.000000 137.000000 366.000000 137.000000 403.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="(foo.a -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foo.b -- )[0]"><path d="M 212.000000 156.000000 L 212.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.c -- )[0]"><path d="M 62.000000 562.000000 L 62.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.d -- )[0]"><path d="M 212.000000 562.000000 L 212.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 64.000000 224.000000 L 208.000000 224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 64.000000 630.000000 L 208.000000 630.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><mask id="1413854125" maskUnits="userSpaceOnUse" x="0" y="0" width="274" height="712">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="foo"><g class="shape" ><rect x="0.000000" y="0.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="0.000000" y="406.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="137.000000" y="439.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="162.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="12.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="162.000000" y="494.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="532.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 137.000000 307.000000 C 137.000000 346.000000 137.000000 366.000000 137.000000 403.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="(foo.a -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foo.b -- )[0]"><path d="M 212.000000 156.000000 L 212.000000 293.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.c -- )[0]"><path d="M 62.000000 562.000000 L 62.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="(foobar.d -- )[0]"><path d="M 212.000000 562.000000 L 212.000000 699.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1413854125)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 64.000000 224.000000 L 208.000000 224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 64.000000 630.000000 L 208.000000 630.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1413854125)" /></g><mask id="1413854125" maskUnits="userSpaceOnUse" x="0" y="0" width="274" height="712">
 <rect x="0" y="0" width="274" height="712" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
index fa6069418..ae590d8c8 100644
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="274" height="682" viewBox="12 12 274 682"><rect x="12.000000" y="12.000000" width="274.000000" height="682.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 274 682"><svg id="d2-svg" width="274" height="682" viewBox="12 12 274 682"><rect x="12.000000" y="12.000000" width="274.000000" height="682.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="foo"><g class="shape" ><rect x="12.000000" y="12.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="12.000000" y="388.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="421.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="174.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="174.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 149.000000 319.000000 L 149.000000 385.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="(foo.a -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foo.b -- )[0]"><path d="M 224.000000 168.000000 L 224.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.c -- )[0]"><path d="M 74.000000 544.000000 L 74.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.d -- )[0]"><path d="M 224.000000 544.000000 L 224.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 76.000000 236.000000 L 220.000000 236.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 76.000000 612.000000 L 220.000000 612.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><mask id="3226515924" maskUnits="userSpaceOnUse" x="12" y="12" width="274" height="682">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="foo"><g class="shape" ><rect x="12.000000" y="12.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foo</text></g><g id="foobar"><g class="shape" ><rect x="12.000000" y="388.000000" width="274.000000" height="306.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="149.000000" y="421.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="foo.b"><g class="shape" ><rect x="174.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="foobar.d"><g class="shape" ><rect x="174.000000" y="476.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="224.000000" y="514.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 149.000000 319.000000 L 149.000000 385.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="(foo.a -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foo.b -- )[0]"><path d="M 224.000000 168.000000 L 224.000000 305.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.c -- )[0]"><path d="M 74.000000 544.000000 L 74.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="(foobar.d -- )[0]"><path d="M 224.000000 544.000000 L 224.000000 681.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3226515924)" /></g><g id="foo.(a -&gt; b)[0]"><path d="M 76.000000 236.000000 L 220.000000 236.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><g id="foobar.(c -&gt; d)[0]"><path d="M 76.000000 612.000000 L 220.000000 612.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3226515924)" /></g><mask id="3226515924" maskUnits="userSpaceOnUse" x="12" y="12" width="274" height="682">
 <rect x="12" y="12" width="274" height="682" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
index 15eaf01ea..6367c7286 100644
--- a/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="138" viewBox="10 50 254 138"><rect x="10.000000" y="50.000000" width="254.000000" height="138.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 254 138"><svg id="d2-svg" width="254" height="138" viewBox="10 50 254 138"><rect x="10.000000" y="50.000000" width="254.000000" height="138.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="138">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="138">
 <rect x="10" y="50" width="254" height="138" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
index 15eaf01ea..6367c7286 100644
--- a/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="138" viewBox="10 50 254 138"><rect x="10.000000" y="50.000000" width="254.000000" height="138.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 254 138"><svg id="d2-svg" width="254" height="138" viewBox="10 50 254 138"><rect x="10.000000" y="50.000000" width="254.000000" height="138.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="138">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 187.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2677123374)" /></g><mask id="2677123374" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="138">
 <rect x="10" y="50" width="254" height="138" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg
index 085cc71f8..44f404f95 100644
--- a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="472" height="1917" viewBox="10 50 472 1917"><rect x="10.000000" y="50.000000" width="472.000000" height="1917.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 472 1917"><svg id="d2-svg" width="472" height="1917" viewBox="10 50 472 1917"><rect x="10.000000" y="50.000000" width="472.000000" height="1917.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">C</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="a.a"><g class="shape" ><rect x="56.000000" y="480.000000" width="12.000000" height="104.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="group 1"><g class="shape blend" ><rect x="22.000000" y="173.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="178.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group 2"><g class="shape blend" ><rect x="22.000000" y="302.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="307.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="323.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 2</text></g><g id="group 3"><g class="shape blend" ><rect x="22.000000" y="401.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="406.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="422.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 3</text></g><g id="group 4"><g class="shape blend" ><rect x="28.000000" y="530.000000" width="224.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="33.000000" y="535.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="59.000000" y="551.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 4</text></g><g id="group 5"><g class="shape blend" ><rect x="172.000000" y="629.000000" width="160.000000" height="174.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="634.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="203.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 5</text></g><g id="group 6"><g class="shape blend" ><rect x="22.000000" y="828.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="833.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="849.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 6</text></g><g id="group 7"><g class="shape blend" ><rect x="22.000000" y="927.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="932.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="948.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 7</text></g><g id="group 8"><g class="shape blend" ><rect x="22.000000" y="1056.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1061.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1077.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 8</text></g><g id="group 9"><g class="shape blend" ><rect x="22.000000" y="1285.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1290.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1306.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 9</text></g><g id="group 10"><g class="shape blend" ><rect x="322.000000" y="1554.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1559.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1575.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 10</text></g><g id="group 11"><g class="shape blend" ><rect x="322.000000" y="1753.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1758.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1774.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 11</text></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 132.000000 217.000000 S 142.000000 217.000000 142.000000 227.000000 L 142.000000 252.000000 S 142.000000 262.000000 132.000000 262.000000 L 66.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 346.000000 L 208.000000 346.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a.a)[0]"><path d="M 64.000000 445.000000 L 132.000000 445.000000 S 142.000000 445.000000 142.000000 455.000000 L 142.000000 480.000000 S 142.000000 490.000000 132.000000 490.000000 L 72.000000 490.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a.a -&gt; b)[0]"><path d="M 70.000000 574.000000 L 208.000000 574.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[0]"><path d="M 214.000000 673.000000 L 282.000000 673.000000 S 292.000000 673.000000 292.000000 683.000000 L 292.000000 708.000000 S 292.000000 718.000000 282.000000 718.000000 L 216.000000 718.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[1]"><path d="M 214.000000 743.000000 L 282.000000 743.000000 S 292.000000 743.000000 292.000000 753.000000 L 292.000000 778.000000 S 292.000000 788.000000 282.000000 788.000000 L 216.000000 788.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; a)[0]"><path d="M 210.000000 872.000000 L 66.000000 872.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[1]"><path d="M 64.000000 971.000000 L 132.000000 971.000000 S 142.000000 971.000000 142.000000 981.000000 L 142.000000 1006.000000 S 142.000000 1016.000000 132.000000 1016.000000 L 66.000000 1016.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[2]"><path d="M 64.000000 1100.000000 L 132.000000 1100.000000 S 142.000000 1100.000000 142.000000 1110.000000 L 142.000000 1135.000000 S 142.000000 1145.000000 132.000000 1145.000000 L 66.000000 1145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[4]"><path d="M 64.000000 1200.000000 L 132.000000 1200.000000 S 142.000000 1200.000000 142.000000 1210.000000 L 142.000000 1235.000000 S 142.000000 1245.000000 132.000000 1245.000000 L 66.000000 1245.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[3]"><path d="M 64.000000 1329.000000 L 132.000000 1329.000000 S 142.000000 1329.000000 142.000000 1339.000000 L 142.000000 1364.000000 S 142.000000 1374.000000 132.000000 1374.000000 L 66.000000 1374.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[5]"><path d="M 64.000000 1429.000000 L 132.000000 1429.000000 S 142.000000 1429.000000 142.000000 1439.000000 L 142.000000 1464.000000 S 142.000000 1474.000000 132.000000 1474.000000 L 66.000000 1474.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 1499.000000 L 358.000000 1499.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[0]"><path d="M 364.000000 1598.000000 L 432.000000 1598.000000 S 442.000000 1598.000000 442.000000 1608.000000 L 442.000000 1633.000000 S 442.000000 1643.000000 432.000000 1643.000000 L 366.000000 1643.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 1698.000000 L 358.000000 1698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[1]"><path d="M 364.000000 1797.000000 L 432.000000 1797.000000 S 442.000000 1797.000000 442.000000 1807.000000 L 442.000000 1832.000000 S 442.000000 1842.000000 432.000000 1842.000000 L 366.000000 1842.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[2]"><path d="M 214.000000 1897.000000 L 358.000000 1897.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><mask id="3222084673" maskUnits="userSpaceOnUse" x="10" y="50" width="472" height="1917">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">C</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="a.a"><g class="shape" ><rect x="56.000000" y="480.000000" width="12.000000" height="104.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="group 1"><g class="shape blend" ><rect x="22.000000" y="173.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="178.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group 2"><g class="shape blend" ><rect x="22.000000" y="302.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="307.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="323.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 2</text></g><g id="group 3"><g class="shape blend" ><rect x="22.000000" y="401.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="406.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="422.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 3</text></g><g id="group 4"><g class="shape blend" ><rect x="28.000000" y="530.000000" width="224.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="33.000000" y="535.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="59.000000" y="551.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 4</text></g><g id="group 5"><g class="shape blend" ><rect x="172.000000" y="629.000000" width="160.000000" height="174.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="634.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="203.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 5</text></g><g id="group 6"><g class="shape blend" ><rect x="22.000000" y="828.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="833.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="849.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 6</text></g><g id="group 7"><g class="shape blend" ><rect x="22.000000" y="927.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="932.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="948.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 7</text></g><g id="group 8"><g class="shape blend" ><rect x="22.000000" y="1056.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1061.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1077.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 8</text></g><g id="group 9"><g class="shape blend" ><rect x="22.000000" y="1285.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1290.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1306.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 9</text></g><g id="group 10"><g class="shape blend" ><rect x="322.000000" y="1554.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1559.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1575.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 10</text></g><g id="group 11"><g class="shape blend" ><rect x="322.000000" y="1753.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1758.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1774.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 11</text></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 132.000000 217.000000 S 142.000000 217.000000 142.000000 227.000000 L 142.000000 252.000000 S 142.000000 262.000000 132.000000 262.000000 L 66.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 346.000000 L 208.000000 346.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a.a)[0]"><path d="M 64.000000 445.000000 L 132.000000 445.000000 S 142.000000 445.000000 142.000000 455.000000 L 142.000000 480.000000 S 142.000000 490.000000 132.000000 490.000000 L 72.000000 490.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a.a -&gt; b)[0]"><path d="M 70.000000 574.000000 L 208.000000 574.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[0]"><path d="M 214.000000 673.000000 L 282.000000 673.000000 S 292.000000 673.000000 292.000000 683.000000 L 292.000000 708.000000 S 292.000000 718.000000 282.000000 718.000000 L 216.000000 718.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[1]"><path d="M 214.000000 743.000000 L 282.000000 743.000000 S 292.000000 743.000000 292.000000 753.000000 L 292.000000 778.000000 S 292.000000 788.000000 282.000000 788.000000 L 216.000000 788.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; a)[0]"><path d="M 210.000000 872.000000 L 66.000000 872.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[1]"><path d="M 64.000000 971.000000 L 132.000000 971.000000 S 142.000000 971.000000 142.000000 981.000000 L 142.000000 1006.000000 S 142.000000 1016.000000 132.000000 1016.000000 L 66.000000 1016.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[2]"><path d="M 64.000000 1100.000000 L 132.000000 1100.000000 S 142.000000 1100.000000 142.000000 1110.000000 L 142.000000 1135.000000 S 142.000000 1145.000000 132.000000 1145.000000 L 66.000000 1145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[4]"><path d="M 64.000000 1200.000000 L 132.000000 1200.000000 S 142.000000 1200.000000 142.000000 1210.000000 L 142.000000 1235.000000 S 142.000000 1245.000000 132.000000 1245.000000 L 66.000000 1245.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[3]"><path d="M 64.000000 1329.000000 L 132.000000 1329.000000 S 142.000000 1329.000000 142.000000 1339.000000 L 142.000000 1364.000000 S 142.000000 1374.000000 132.000000 1374.000000 L 66.000000 1374.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[5]"><path d="M 64.000000 1429.000000 L 132.000000 1429.000000 S 142.000000 1429.000000 142.000000 1439.000000 L 142.000000 1464.000000 S 142.000000 1474.000000 132.000000 1474.000000 L 66.000000 1474.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 1499.000000 L 358.000000 1499.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[0]"><path d="M 364.000000 1598.000000 L 432.000000 1598.000000 S 442.000000 1598.000000 442.000000 1608.000000 L 442.000000 1633.000000 S 442.000000 1643.000000 432.000000 1643.000000 L 366.000000 1643.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 1698.000000 L 358.000000 1698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[1]"><path d="M 364.000000 1797.000000 L 432.000000 1797.000000 S 442.000000 1797.000000 442.000000 1807.000000 L 442.000000 1832.000000 S 442.000000 1842.000000 432.000000 1842.000000 L 366.000000 1842.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[2]"><path d="M 214.000000 1897.000000 L 358.000000 1897.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><mask id="3222084673" maskUnits="userSpaceOnUse" x="10" y="50" width="472" height="1917">
 <rect x="10" y="50" width="472" height="1917" fill="white"></rect>
 <rect x="27.000000" y="178.000000" width="52" height="16" fill="black"></rect>
 <rect x="27.000000" y="307.000000" width="52" height="16" fill="black"></rect>
@@ -50,4 +30,4 @@
 <rect x="27.000000" y="1290.000000" width="52" height="16" fill="black"></rect>
 <rect x="327.000000" y="1559.000000" width="60" height="16" fill="black"></rect>
 <rect x="327.000000" y="1758.000000" width="60" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg
index 085cc71f8..44f404f95 100644
--- a/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_self_edge_group_overlap/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="472" height="1917" viewBox="10 50 472 1917"><rect x="10.000000" y="50.000000" width="472.000000" height="1917.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 472 1917"><svg id="d2-svg" width="472" height="1917" viewBox="10 50 472 1917"><rect x="10.000000" y="50.000000" width="472.000000" height="1917.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">C</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="a.a"><g class="shape" ><rect x="56.000000" y="480.000000" width="12.000000" height="104.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="group 1"><g class="shape blend" ><rect x="22.000000" y="173.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="178.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group 2"><g class="shape blend" ><rect x="22.000000" y="302.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="307.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="323.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 2</text></g><g id="group 3"><g class="shape blend" ><rect x="22.000000" y="401.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="406.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="422.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 3</text></g><g id="group 4"><g class="shape blend" ><rect x="28.000000" y="530.000000" width="224.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="33.000000" y="535.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="59.000000" y="551.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 4</text></g><g id="group 5"><g class="shape blend" ><rect x="172.000000" y="629.000000" width="160.000000" height="174.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="634.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="203.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 5</text></g><g id="group 6"><g class="shape blend" ><rect x="22.000000" y="828.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="833.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="849.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 6</text></g><g id="group 7"><g class="shape blend" ><rect x="22.000000" y="927.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="932.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="948.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 7</text></g><g id="group 8"><g class="shape blend" ><rect x="22.000000" y="1056.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1061.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1077.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 8</text></g><g id="group 9"><g class="shape blend" ><rect x="22.000000" y="1285.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1290.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1306.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 9</text></g><g id="group 10"><g class="shape blend" ><rect x="322.000000" y="1554.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1559.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1575.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 10</text></g><g id="group 11"><g class="shape blend" ><rect x="322.000000" y="1753.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1758.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1774.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 11</text></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 132.000000 217.000000 S 142.000000 217.000000 142.000000 227.000000 L 142.000000 252.000000 S 142.000000 262.000000 132.000000 262.000000 L 66.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 346.000000 L 208.000000 346.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a.a)[0]"><path d="M 64.000000 445.000000 L 132.000000 445.000000 S 142.000000 445.000000 142.000000 455.000000 L 142.000000 480.000000 S 142.000000 490.000000 132.000000 490.000000 L 72.000000 490.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a.a -&gt; b)[0]"><path d="M 70.000000 574.000000 L 208.000000 574.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[0]"><path d="M 214.000000 673.000000 L 282.000000 673.000000 S 292.000000 673.000000 292.000000 683.000000 L 292.000000 708.000000 S 292.000000 718.000000 282.000000 718.000000 L 216.000000 718.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[1]"><path d="M 214.000000 743.000000 L 282.000000 743.000000 S 292.000000 743.000000 292.000000 753.000000 L 292.000000 778.000000 S 292.000000 788.000000 282.000000 788.000000 L 216.000000 788.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; a)[0]"><path d="M 210.000000 872.000000 L 66.000000 872.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[1]"><path d="M 64.000000 971.000000 L 132.000000 971.000000 S 142.000000 971.000000 142.000000 981.000000 L 142.000000 1006.000000 S 142.000000 1016.000000 132.000000 1016.000000 L 66.000000 1016.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[2]"><path d="M 64.000000 1100.000000 L 132.000000 1100.000000 S 142.000000 1100.000000 142.000000 1110.000000 L 142.000000 1135.000000 S 142.000000 1145.000000 132.000000 1145.000000 L 66.000000 1145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[4]"><path d="M 64.000000 1200.000000 L 132.000000 1200.000000 S 142.000000 1200.000000 142.000000 1210.000000 L 142.000000 1235.000000 S 142.000000 1245.000000 132.000000 1245.000000 L 66.000000 1245.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[3]"><path d="M 64.000000 1329.000000 L 132.000000 1329.000000 S 142.000000 1329.000000 142.000000 1339.000000 L 142.000000 1364.000000 S 142.000000 1374.000000 132.000000 1374.000000 L 66.000000 1374.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[5]"><path d="M 64.000000 1429.000000 L 132.000000 1429.000000 S 142.000000 1429.000000 142.000000 1439.000000 L 142.000000 1464.000000 S 142.000000 1474.000000 132.000000 1474.000000 L 66.000000 1474.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 1499.000000 L 358.000000 1499.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[0]"><path d="M 364.000000 1598.000000 L 432.000000 1598.000000 S 442.000000 1598.000000 442.000000 1608.000000 L 442.000000 1633.000000 S 442.000000 1643.000000 432.000000 1643.000000 L 366.000000 1643.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 1698.000000 L 358.000000 1698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[1]"><path d="M 364.000000 1797.000000 L 432.000000 1797.000000 S 442.000000 1797.000000 442.000000 1807.000000 L 442.000000 1832.000000 S 442.000000 1842.000000 432.000000 1842.000000 L 366.000000 1842.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[2]"><path d="M 214.000000 1897.000000 L 358.000000 1897.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><mask id="3222084673" maskUnits="userSpaceOnUse" x="10" y="50" width="472" height="1917">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">C</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1966.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3222084673)" /></g><g id="a.a"><g class="shape" ><rect x="56.000000" y="480.000000" width="12.000000" height="104.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="group 1"><g class="shape blend" ><rect x="22.000000" y="173.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="178.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group 2"><g class="shape blend" ><rect x="22.000000" y="302.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="307.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="323.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 2</text></g><g id="group 3"><g class="shape blend" ><rect x="22.000000" y="401.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="406.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="422.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 3</text></g><g id="group 4"><g class="shape blend" ><rect x="28.000000" y="530.000000" width="224.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="33.000000" y="535.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="59.000000" y="551.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 4</text></g><g id="group 5"><g class="shape blend" ><rect x="172.000000" y="629.000000" width="160.000000" height="174.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="634.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="203.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 5</text></g><g id="group 6"><g class="shape blend" ><rect x="22.000000" y="828.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="833.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="849.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 6</text></g><g id="group 7"><g class="shape blend" ><rect x="22.000000" y="927.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="932.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="948.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 7</text></g><g id="group 8"><g class="shape blend" ><rect x="22.000000" y="1056.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1061.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1077.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 8</text></g><g id="group 9"><g class="shape blend" ><rect x="22.000000" y="1285.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="1290.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="53.000000" y="1306.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 9</text></g><g id="group 10"><g class="shape blend" ><rect x="322.000000" y="1554.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1559.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1575.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 10</text></g><g id="group 11"><g class="shape blend" ><rect x="322.000000" y="1753.000000" width="160.000000" height="104.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="327.000000" y="1758.000000" width="60.000000" height="21.000000" class=" fill-N5" /><text x="357.000000" y="1774.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 11</text></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 132.000000 217.000000 S 142.000000 217.000000 142.000000 227.000000 L 142.000000 252.000000 S 142.000000 262.000000 132.000000 262.000000 L 66.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 346.000000 L 208.000000 346.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a.a)[0]"><path d="M 64.000000 445.000000 L 132.000000 445.000000 S 142.000000 445.000000 142.000000 455.000000 L 142.000000 480.000000 S 142.000000 490.000000 132.000000 490.000000 L 72.000000 490.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a.a -&gt; b)[0]"><path d="M 70.000000 574.000000 L 208.000000 574.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[0]"><path d="M 214.000000 673.000000 L 282.000000 673.000000 S 292.000000 673.000000 292.000000 683.000000 L 292.000000 708.000000 S 292.000000 718.000000 282.000000 718.000000 L 216.000000 718.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; b)[1]"><path d="M 214.000000 743.000000 L 282.000000 743.000000 S 292.000000 743.000000 292.000000 753.000000 L 292.000000 778.000000 S 292.000000 788.000000 282.000000 788.000000 L 216.000000 788.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; a)[0]"><path d="M 210.000000 872.000000 L 66.000000 872.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[1]"><path d="M 64.000000 971.000000 L 132.000000 971.000000 S 142.000000 971.000000 142.000000 981.000000 L 142.000000 1006.000000 S 142.000000 1016.000000 132.000000 1016.000000 L 66.000000 1016.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[2]"><path d="M 64.000000 1100.000000 L 132.000000 1100.000000 S 142.000000 1100.000000 142.000000 1110.000000 L 142.000000 1135.000000 S 142.000000 1145.000000 132.000000 1145.000000 L 66.000000 1145.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[4]"><path d="M 64.000000 1200.000000 L 132.000000 1200.000000 S 142.000000 1200.000000 142.000000 1210.000000 L 142.000000 1235.000000 S 142.000000 1245.000000 132.000000 1245.000000 L 66.000000 1245.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[3]"><path d="M 64.000000 1329.000000 L 132.000000 1329.000000 S 142.000000 1329.000000 142.000000 1339.000000 L 142.000000 1364.000000 S 142.000000 1374.000000 132.000000 1374.000000 L 66.000000 1374.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(a -&gt; a)[5]"><path d="M 64.000000 1429.000000 L 132.000000 1429.000000 S 142.000000 1429.000000 142.000000 1439.000000 L 142.000000 1464.000000 S 142.000000 1474.000000 132.000000 1474.000000 L 66.000000 1474.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 1499.000000 L 358.000000 1499.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[0]"><path d="M 364.000000 1598.000000 L 432.000000 1598.000000 S 442.000000 1598.000000 442.000000 1608.000000 L 442.000000 1633.000000 S 442.000000 1643.000000 432.000000 1643.000000 L 366.000000 1643.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 1698.000000 L 358.000000 1698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(c -&gt; c)[1]"><path d="M 364.000000 1797.000000 L 432.000000 1797.000000 S 442.000000 1797.000000 442.000000 1807.000000 L 442.000000 1832.000000 S 442.000000 1842.000000 432.000000 1842.000000 L 366.000000 1842.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><g id="(b -&gt; c)[2]"><path d="M 214.000000 1897.000000 L 358.000000 1897.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3222084673)" /></g><mask id="3222084673" maskUnits="userSpaceOnUse" x="10" y="50" width="472" height="1917">
 <rect x="10" y="50" width="472" height="1917" fill="white"></rect>
 <rect x="27.000000" y="178.000000" width="52" height="16" fill="black"></rect>
 <rect x="27.000000" y="307.000000" width="52" height="16" fill="black"></rect>
@@ -50,4 +30,4 @@
 <rect x="27.000000" y="1290.000000" width="52" height="16" fill="black"></rect>
 <rect x="327.000000" y="1559.000000" width="60" height="16" fill="black"></rect>
 <rect x="327.000000" y="1758.000000" width="60" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
index 901c173bb..2d0ad1320 100644
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="323" viewBox="10 50 132 323"><rect x="10.000000" y="50.000000" width="132.000000" height="323.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 132 323"><svg id="d2-svg" width="132" height="323" viewBox="10 50 132 323"><rect x="10.000000" y="50.000000" width="132.000000" height="323.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="10" y="50" width="132" height="323">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="10" y="50" width="132" height="323">
 <rect x="10" y="50" width="132" height="323" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
index 901c173bb..2d0ad1320 100644
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="323" viewBox="10 50 132 323"><rect x="10.000000" y="50.000000" width="132.000000" height="323.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 132 323"><svg id="d2-svg" width="132" height="323" viewBox="10 50 132 323"><rect x="10.000000" y="50.000000" width="132.000000" height="323.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="10" y="50" width="132" height="323">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 372.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#227146576)" /></g><g id="b.1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="135.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 72.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><g id="b.(1 -&gt; 1)[1]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#227146576)" /></g><mask id="227146576" maskUnits="userSpaceOnUse" x="10" y="50" width="132" height="323">
 <rect x="10" y="50" width="132" height="323" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
index fcea627dc..772ee443c 100644
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1192" height="112" viewBox="-2 -2 1192 112"><rect x="-2.000000" y="-2.000000" width="1192.000000" height="112.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1192 112"><svg id="d2-svg" width="1192" height="112" viewBox="-2 -2 1192 112"><rect x="-2.000000" y="-2.000000" width="1192.000000" height="112.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="table"><g class="shape" ><rect x="0.000000" y="0.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="272.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="514.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="272.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="514.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="594.000000" y="0.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="594.000000" y="0.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="604.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="604.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="866.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1168.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="594.000000" x2="1188.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="604.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="866.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1168.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="594.000000" x2="1188.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="1114961276" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1192" height="112">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="table"><g class="shape" ><rect x="0.000000" y="0.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="272.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="514.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="272.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="514.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="534.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="594.000000" y="0.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="594.000000" y="0.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="604.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="604.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="866.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1168.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="594.000000" x2="1188.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="604.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="866.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1168.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="594.000000" x2="1188.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="1114961276" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1192" height="112">
 <rect x="-2" y="-2" width="1192" height="112" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
index fb0000253..2d05fac9f 100644
--- a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1152" height="112" viewBox="10 10 1152 112"><rect x="10.000000" y="10.000000" width="1152.000000" height="112.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1152 112"><svg id="d2-svg" width="1152" height="112" viewBox="10 10 1152 112"><rect x="10.000000" y="10.000000" width="1152.000000" height="112.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="table"><g class="shape" ><rect x="12.000000" y="12.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="284.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="526.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="284.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="526.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="566.000000" y="12.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="566.000000" y="12.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="576.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="576.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="838.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1140.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="566.000000" x2="1160.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="576.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="838.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1140.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="566.000000" x2="1160.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="2685206526" maskUnits="userSpaceOnUse" x="10" y="10" width="1152" height="112">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="table"><g class="shape" ><rect x="12.000000" y="12.000000" width="534.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="534.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_overflow</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="284.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="526.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="284.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="526.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="546.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="table_constrained"><g class="shape" ><rect x="566.000000" y="12.000000" width="594.000000" height="108.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="566.000000" y="12.000000" width="594.000000" height="36.000000" class="class_header fill-N1" /><text x="576.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">sql_table_constrained_overflow</text><text x="576.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">short</text><text x="838.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="1140.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">UNQ</text><line x1="566.000000" x2="1160.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="576.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">loooooooooooooooooooong</text><text x="838.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">short</text><text x="1140.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">FK</text><line x1="566.000000" x2="1160.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><mask id="2685206526" maskUnits="userSpaceOnUse" x="10" y="10" width="1152" height="112">
 <rect x="10" y="10" width="1152" height="112" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
index 93d7d208b..01d3438f2 100644
--- a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426" height="828" viewBox="-2 -2 426 828"><rect x="-2.000000" y="-2.000000" width="426.000000" height="828.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 426 828"><svg id="d2-svg" width="426" height="828" viewBox="-2 -2 426 828"><rect x="-2.000000" y="-2.000000" width="426.000000" height="828.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,29 +38,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="107.000000" y="468.000000" width="208.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="107.000000" y="468.000000" width="208.000000" height="31.000000" class="class_header fill-N1" /><text x="117.000000" y="519.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="218.000000" y="519.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="295.000000" y="519.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="530.000000" y2="530.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="550.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="218.000000" y="550.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="550.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="561.000000" y2="561.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="581.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="218.000000" y="581.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="581.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="592.000000" y2="592.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="612.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="218.000000" y="612.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="612.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="623.000000" y2="623.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="643.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="218.000000" y="643.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="295.000000" y="643.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="654.000000" y2="654.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(113.000000 754.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="107.000000" y="468.000000" width="208.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="107.000000" y="468.000000" width="208.000000" height="31.000000" class="class_header fill-N1" /><text x="117.000000" y="519.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="218.000000" y="519.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="295.000000" y="519.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="530.000000" y2="530.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="550.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="218.000000" y="550.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="550.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="561.000000" y2="561.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="581.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="218.000000" y="581.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="581.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="592.000000" y2="592.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="612.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="218.000000" y="612.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="612.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="623.000000" y2="623.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="643.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="218.000000" y="643.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="295.000000" y="643.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="654.000000" y2="654.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(113.000000 754.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 211.000000 370.000000 C 211.000000 408.000000 211.000000 428.000000 211.000000 464.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1305024980)" /></g><g id="(users -&gt; code)[0]"><path d="M 211.000000 656.000000 C 211.000000 694.000000 211.000000 714.000000 211.000000 750.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1305024980)" /></g><mask id="1305024980" maskUnits="userSpaceOnUse" x="-2" y="-2" width="426" height="828">
 <rect x="-2" y="-2" width="426" height="828" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
index 00006864b..d02e9bdcb 100644
--- a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426" height="768" viewBox="10 10 426 768"><rect x="10.000000" y="10.000000" width="426.000000" height="768.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 426 768"><svg id="d2-svg" width="426" height="768" viewBox="10 10 426 768"><rect x="10.000000" y="10.000000" width="426.000000" height="768.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,29 +38,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="414.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="414.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="224.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="224.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="414.000000" y="224.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="434.000000" y1="242.000000" y2="242.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="270.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="270.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="414.000000" y="270.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="316.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="316.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="414.000000" y="316.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="362.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="362.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="414.000000" y="362.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="119.000000" y="450.000000" width="208.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="119.000000" y="450.000000" width="208.000000" height="31.000000" class="class_header fill-N1" /><text x="129.000000" y="501.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="230.000000" y="501.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="307.000000" y="501.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="512.000000" y2="512.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="532.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="230.000000" y="532.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="532.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="543.000000" y2="543.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="563.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="230.000000" y="563.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="563.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="574.000000" y2="574.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="594.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="230.000000" y="594.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="594.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="605.000000" y2="605.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="625.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="230.000000" y="625.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="307.000000" y="625.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="636.000000" y2="636.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(125.000000 706.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="414.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="414.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="224.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="224.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="414.000000" y="224.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="434.000000" y1="242.000000" y2="242.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="270.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="270.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="414.000000" y="270.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="316.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="316.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="414.000000" y="316.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="362.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="362.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="414.000000" y="362.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="119.000000" y="450.000000" width="208.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="119.000000" y="450.000000" width="208.000000" height="31.000000" class="class_header fill-N1" /><text x="129.000000" y="501.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="230.000000" y="501.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="307.000000" y="501.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="512.000000" y2="512.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="532.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="230.000000" y="532.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="532.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="543.000000" y2="543.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="563.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="230.000000" y="563.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="563.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="574.000000" y2="574.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="594.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="230.000000" y="594.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="594.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="605.000000" y2="605.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="625.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="230.000000" y="625.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="307.000000" y="625.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="636.000000" y2="636.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(125.000000 706.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 223.000000 382.000000 L 223.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4221976759)" /></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 638.000000 L 223.000000 702.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4221976759)" /></g><mask id="4221976759" maskUnits="userSpaceOnUse" x="10" y="10" width="426" height="768">
 <rect x="10" y="10" width="426" height="768" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
index 0f521355a..dbb10b97c 100644
--- a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="236" viewBox="-2 -2 170 236"><rect x="-2.000000" y="-2.000000" width="170.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 170 236"><svg id="d2-svg" width="170" height="236" viewBox="-2 -2 170 236"><rect x="-2.000000" y="-2.000000" width="170.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="57.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.410707 67.653297 C 33.307229 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><g id="(a -&gt; c)[0]"><path d="M 106.589293 67.653297 C 132.692771 106.000000 139.500000 126.000000 139.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><mask id="1453433269" maskUnits="userSpaceOnUse" x="-2" y="-2" width="170" height="236">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="57.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.410707 67.653297 C 33.307229 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><g id="(a -&gt; c)[0]"><path d="M 106.589293 67.653297 C 132.692771 106.000000 139.500000 126.000000 139.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1453433269)" /></g><mask id="1453433269" maskUnits="userSpaceOnUse" x="-2" y="-2" width="170" height="236">
 <rect x="-2" y="-2" width="170" height="236" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
index 13644d96b..9b1ad4383 100644
--- a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="216" viewBox="10 10 130 216"><rect x="10.000000" y="10.000000" width="130.000000" height="216.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 130 216"><svg id="d2-svg" width="130" height="216" viewBox="10 10 130 216"><rect x="10.000000" y="10.000000" width="130.000000" height="216.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="20.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="46.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><g id="(a -&gt; c)[0]"><path d="M 56.166667 80.000000 L 56.166667 108.000000 S 56.166667 118.000000 66.166667 118.000000 L 101.500000 118.000000 S 111.500000 118.000000 111.500000 128.000000 L 111.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><mask id="1903041909" maskUnits="userSpaceOnUse" x="10" y="10" width="130" height="216">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="20.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="46.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><g id="(a -&gt; c)[0]"><path d="M 56.166667 80.000000 L 56.166667 108.000000 S 56.166667 118.000000 66.166667 118.000000 L 101.500000 118.000000 S 111.500000 118.000000 111.500000 128.000000 L 111.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1903041909)" /></g><mask id="1903041909" maskUnits="userSpaceOnUse" x="10" y="10" width="130" height="216">
 <rect x="10" y="10" width="130" height="216" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
index 96128e661..e3a3d6f26 100644
--- a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="236" viewBox="-2 -2 57 236"><rect x="-2.000000" y="-2.000000" width="57.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 236"><svg id="d2-svg" width="57" height="236" viewBox="-2 -2 57 236"><rect x="-2.000000" y="-2.000000" width="57.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4219960005)" /></g><mask id="4219960005" maskUnits="userSpaceOnUse" x="-2" y="-2" width="57" height="236">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4219960005)" /></g><mask id="4219960005" maskUnits="userSpaceOnUse" x="-2" y="-2" width="57" height="236">
 <rect x="-2" y="-2" width="57" height="236" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
index be1468736..3f328c182 100644
--- a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="206" viewBox="10 10 57 206"><rect x="10.000000" y="10.000000" width="57.000000" height="206.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 206"><svg id="d2-svg" width="57" height="206" viewBox="10 10 57 206"><rect x="10.000000" y="10.000000" width="57.000000" height="206.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4208391940)" /></g><mask id="4208391940" maskUnits="userSpaceOnUse" x="10" y="10" width="57" height="206">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4208391940)" /></g><mask id="4208391940" maskUnits="userSpaceOnUse" x="10" y="10" width="57" height="206">
 <rect x="10" y="10" width="57" height="206" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg b/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
index cbcf7c52a..ccf9303af 100644
--- a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="138" height="434" viewBox="-2 0 138 434"><rect x="-2.000000" y="0.000000" width="138.000000" height="434.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 138 434"><svg id="d2-svg" width="138" height="434" viewBox="-2 0 138 434"><rect x="-2.000000" y="0.000000" width="138.000000" height="434.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="1.000000" y="41.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="307.000000" width="134.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.000000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="a.b"><g class="shape" ><rect x="41.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="40.000000" y="336.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.000000" y="374.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.000000 138.500000 C 67.000000 160.100000 67.000000 176.000000 67.000000 191.000000 C 67.000000 206.000000 67.000000 280.100000 67.000000 332.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#854360138)" /></g><mask id="854360138" maskUnits="userSpaceOnUse" x="-2" y="0" width="138" height="434">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="1.000000" y="41.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="307.000000" width="134.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="67.000000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="a.b"><g class="shape" ><rect x="41.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="40.000000" y="336.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="67.000000" y="374.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.000000 138.500000 C 67.000000 160.100000 67.000000 176.000000 67.000000 191.000000 C 67.000000 206.000000 67.000000 280.100000 67.000000 332.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#854360138)" /></g><mask id="854360138" maskUnits="userSpaceOnUse" x="-2" y="0" width="138" height="434">
 <rect x="-2" y="0" width="138" height="434" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg b/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
index 04a57f53f..9d45cbba8 100644
--- a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="158" height="416" viewBox="10 10 158 416"><rect x="10.000000" y="10.000000" width="158.000000" height="416.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 158 416"><svg id="d2-svg" width="158" height="416" viewBox="10 10 158 416"><rect x="10.000000" y="10.000000" width="158.000000" height="416.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="88.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="12.000000" y="258.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="89.000000" y="291.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="62.000000" y="308.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="89.000000" y="346.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 89.000000 130.000000 L 89.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4008481812)" /></g><mask id="4008481812" maskUnits="userSpaceOnUse" x="10" y="10" width="158" height="416">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="88.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="12.000000" y="258.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="89.000000" y="291.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="62.000000" y="308.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="89.000000" y="346.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 89.000000 130.000000 L 89.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4008481812)" /></g><mask id="4008481812" maskUnits="userSpaceOnUse" x="10" y="10" width="158" height="416">
 <rect x="10" y="10" width="158" height="416" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg b/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
index 13979986f..8df550579 100644
--- a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="257" viewBox="-2 -2 57 257"><rect x="-2.000000" y="-2.000000" width="57.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 257"><svg id="d2-svg" width="57" height="257" viewBox="-2 -2 57 257"><rect x="-2.000000" y="-2.000000" width="57.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1493420658)" /><text x="26.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="1493420658" maskUnits="userSpaceOnUse" x="-2" y="-2" width="57" height="257">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1493420658)" /><text x="26.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="1493420658" maskUnits="userSpaceOnUse" x="-2" y="-2" width="57" height="257">
 <rect x="-2" y="-2" width="57" height="257" fill="white"></rect>
 <rect x="10.000000" y="116.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg b/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
index 711d4e300..4597fde60 100644
--- a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="297" viewBox="10 10 57 297"><rect x="10.000000" y="10.000000" width="57.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 297"><svg id="d2-svg" width="57" height="297" viewBox="10 10 57 297"><rect x="10.000000" y="10.000000" width="57.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1493643223)" /><text x="38.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="1493643223" maskUnits="userSpaceOnUse" x="10" y="10" width="57" height="297">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1493643223)" /><text x="38.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="1493643223" maskUnits="userSpaceOnUse" x="10" y="10" width="57" height="297">
 <rect x="10" y="10" width="57" height="297" fill="white"></rect>
 <rect x="22.000000" y="148.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg b/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
index d805d1196..cab3a4fe2 100644
--- a/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 0 0"><rect x="0.000000" y="0.000000" width="0.000000" height="0.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 0 0"><svg id="d2-svg" width="0" height="0" viewBox="0 0 0 0"><rect x="0.000000" y="0.000000" width="0.000000" height="0.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><mask id="121760133" maskUnits="userSpaceOnUse" x="0" y="0" width="0" height="0">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><mask id="121760133" maskUnits="userSpaceOnUse" x="0" y="0" width="0" height="0">
 <rect x="0" y="0" width="0" height="0" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg b/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
index d805d1196..cab3a4fe2 100644
--- a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 0 0"><rect x="0.000000" y="0.000000" width="0.000000" height="0.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 0 0"><svg id="d2-svg" width="0" height="0" viewBox="0 0 0 0"><rect x="0.000000" y="0.000000" width="0.000000" height="0.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -10,27 +10,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><mask id="121760133" maskUnits="userSpaceOnUse" x="0" y="0" width="0" height="0">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><mask id="121760133" maskUnits="userSpaceOnUse" x="0" y="0" width="0" height="0">
 <rect x="0" y="0" width="0" height="0" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
index 77fc457bf..f67ff6e02 100644
--- a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1149" height="508" viewBox="-2 -2 1149 508"><rect x="-2.000000" y="-2.000000" width="1149.000000" height="508.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1149 508"><svg id="d2-svg" width="1149" height="508" viewBox="-2 -2 1149 508"><rect x="-2.000000" y="-2.000000" width="1149.000000" height="508.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="rectangle"><g class="shape" ><rect x="0.000000" y="13.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="9.000000" y="192.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.000000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 17 402 H 74 C 75 402 76 402 77 403 L 94 419 C 95 420 95 421 95 422 V 489 C 95 489 95 489 95 489 H 16 C 16 489 16 489 16 489 V 403 C 16 402 16 402 17 402 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 94 489 H 17 C 16 489 16 489 16 488 V 403 C 16 402 16 402 17 402 H 73 C 74 402 74 402 74 403 V 420 C 74 421 75 422 76 422 H 94 C 95 422 95 422 95 423 V 488 C 94 489 95 489 94 489 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="55.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 197 13 L 367 13 L 341 79 L 171 79 L 171 79 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="269.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 211 266 L 211 201 L 328 201 L 328 266 C 309 252 289 252 270 266 C 250 281 231 281 211 266 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="269.500000" y="234.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 217 410 C 217 386 264 386 269 386 C 274 386 321 386 321 410 V 480 C 321 504 274 504 269 504 C 264 504 217 504 217 480 V 410 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 217 410 C 217 434 264 434 269 434 C 274 434 321 434 321 410" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="269.000000" y="462.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 451 13 H 544 C 568 13 568 43 568 46 C 568 49 568 79 544 79 H 451 C 427 79 427 49 427 46 C 427 43 427 13 451 13 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 544 13 C 520 13 520 43 520 46 C 520 49 520 79 544 79" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="485.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 446 203 L 498 203 L 498 218 L 549 218 L 549 276 L 446 276 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="497.500000" y="252.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 440 395 L 521 395 L 556 446 L 521 496 L 440 496 L 475 446 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="498.000000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 646 1 V 47 H 694 V 92 L 724 47 H 742 V 1 H 647 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="693.500000" y="29.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 633 206 H 769 C 765 206 754 224 754 239 C 754 254 765 272 769 272 H 633 C 629 272 618 254 618 239 C 618 224 629 206 633 206 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="693.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 771 497 H 616 V 496 C 616 478 633 463 660 455 C 645 448 636 438 636 428 C 636 409 662 394 693 394 C 725 394 750 409 750 428 C 750 439 741 449 726 455 C 753 463 770 478 770 496 V 497 H 771 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="693.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 879 92 C 878 92 878 92 878 92 L 802 47 C 801 47 801 46 802 45 L 878 0 C 879 -0 880 -0 881 0 L 957 45 C 958 45 958 46 957 47 L 880 92 C 880 92 880 92 879 92 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="879.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="878.500000" cy="239.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="878.500000" cy="445.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1049 12 L 1017 46 L 1049 81 L 1113 81 L 1145 46 L 1113 12 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1081.000000" y="52.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1046 226 C 1046 227 1045 228 1045 228 C 1036 229 1029 240 1029 254 C 1029 269 1037 281 1047 281 H 1114 C 1125 281 1133 268 1133 253 C 1133 238 1125 226 1115 225 C 1114 225 1114 224 1113 223 C 1111 208 1100 197 1088 197 C 1080 197 1073 202 1068 209 C 1067 210 1067 210 1066 210 C 1064 209 1062 209 1060 209 C 1053 209 1047 216 1046 226 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1081.476000" y="259.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.500000 81.000000 C 55.500000 129.400000 55.500000 152.000000 55.500000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(square -&gt; page)[0]"><path d="M 55.500000 288.000000 C 55.500000 326.000000 55.600000 349.200000 55.969698 398.000115" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 269.000000 81.000000 C 269.000000 129.400000 269.000000 153.800000 269.000000 197.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 269.000000 269.000000 C 269.000000 322.200000 269.000000 346.000000 269.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(queue -&gt; package)[0]"><path d="M 497.015873 80.999937 C 497.400000 129.400000 497.600000 154.200000 497.967214 199.000134" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(package -&gt; step)[0]"><path d="M 497.016666 277.999931 C 497.400000 324.000000 497.600000 347.800000 497.966103 391.000144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 693.000000 49.000000 C 693.000000 123.000000 693.000000 154.800000 693.000000 202.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 693.000000 274.000000 C 693.000000 323.200000 693.000000 347.600000 693.000000 390.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 878.980001 93.999900 C 878.600000 132.000000 878.600000 154.400000 878.967743 200.000130" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 878.983871 275.999935 C 878.600000 323.600000 878.600000 348.800000 878.968751 396.000122" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1080.983607 82.999933 C 1080.600000 129.800000 1080.600000 153.400000 1080.964914 195.000154" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><mask id="1811206288" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1149" height="508">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="rectangle"><g class="shape" ><rect x="0.000000" y="13.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="9.000000" y="192.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.000000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 17 402 H 74 C 75 402 76 402 77 403 L 94 419 C 95 420 95 421 95 422 V 489 C 95 489 95 489 95 489 H 16 C 16 489 16 489 16 489 V 403 C 16 402 16 402 17 402 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 94 489 H 17 C 16 489 16 489 16 488 V 403 C 16 402 16 402 17 402 H 73 C 74 402 74 402 74 403 V 420 C 74 421 75 422 76 422 H 94 C 95 422 95 422 95 423 V 488 C 94 489 95 489 94 489 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="55.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 197 13 L 367 13 L 341 79 L 171 79 L 171 79 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="269.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 211 266 L 211 201 L 328 201 L 328 266 C 309 252 289 252 270 266 C 250 281 231 281 211 266 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="269.500000" y="234.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 217 410 C 217 386 264 386 269 386 C 274 386 321 386 321 410 V 480 C 321 504 274 504 269 504 C 264 504 217 504 217 480 V 410 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 217 410 C 217 434 264 434 269 434 C 274 434 321 434 321 410" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="269.000000" y="462.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 451 13 H 544 C 568 13 568 43 568 46 C 568 49 568 79 544 79 H 451 C 427 79 427 49 427 46 C 427 43 427 13 451 13 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 544 13 C 520 13 520 43 520 46 C 520 49 520 79 544 79" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="485.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 446 203 L 498 203 L 498 218 L 549 218 L 549 276 L 446 276 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="497.500000" y="252.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 440 395 L 521 395 L 556 446 L 521 496 L 440 496 L 475 446 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="498.000000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 646 1 V 47 H 694 V 92 L 724 47 H 742 V 1 H 647 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="693.500000" y="29.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 633 206 H 769 C 765 206 754 224 754 239 C 754 254 765 272 769 272 H 633 C 629 272 618 254 618 239 C 618 224 629 206 633 206 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="693.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 771 497 H 616 V 496 C 616 478 633 463 660 455 C 645 448 636 438 636 428 C 636 409 662 394 693 394 C 725 394 750 409 750 428 C 750 439 741 449 726 455 C 753 463 770 478 770 496 V 497 H 771 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="693.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 879 92 C 878 92 878 92 878 92 L 802 47 C 801 47 801 46 802 45 L 878 0 C 879 -0 880 -0 881 0 L 957 45 C 958 45 958 46 957 47 L 880 92 C 880 92 880 92 879 92 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="879.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="878.500000" cy="239.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="878.500000" cy="445.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1049 12 L 1017 46 L 1049 81 L 1113 81 L 1145 46 L 1113 12 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1081.000000" y="52.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1046 226 C 1046 227 1045 228 1045 228 C 1036 229 1029 240 1029 254 C 1029 269 1037 281 1047 281 H 1114 C 1125 281 1133 268 1133 253 C 1133 238 1125 226 1115 225 C 1114 225 1114 224 1113 223 C 1111 208 1100 197 1088 197 C 1080 197 1073 202 1068 209 C 1067 210 1067 210 1066 210 C 1064 209 1062 209 1060 209 C 1053 209 1047 216 1046 226 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1081.476000" y="259.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.500000 81.000000 C 55.500000 129.400000 55.500000 152.000000 55.500000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(square -&gt; page)[0]"><path d="M 55.500000 288.000000 C 55.500000 326.000000 55.600000 349.200000 55.969698 398.000115" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 269.000000 81.000000 C 269.000000 129.400000 269.000000 153.800000 269.000000 197.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 269.000000 269.000000 C 269.000000 322.200000 269.000000 346.000000 269.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(queue -&gt; package)[0]"><path d="M 497.015873 80.999937 C 497.400000 129.400000 497.600000 154.200000 497.967214 199.000134" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(package -&gt; step)[0]"><path d="M 497.016666 277.999931 C 497.400000 324.000000 497.600000 347.800000 497.966103 391.000144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 693.000000 49.000000 C 693.000000 123.000000 693.000000 154.800000 693.000000 202.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 693.000000 274.000000 C 693.000000 323.200000 693.000000 347.600000 693.000000 390.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 878.980001 93.999900 C 878.600000 132.000000 878.600000 154.400000 878.967743 200.000130" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 878.983871 275.999935 C 878.600000 323.600000 878.600000 348.800000 878.968751 396.000122" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1080.983607 82.999933 C 1080.600000 129.800000 1080.600000 153.400000 1080.964914 195.000154" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1811206288)" /></g><mask id="1811206288" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1149" height="508">
 <rect x="-2" y="-2" width="1149" height="508" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
index ce697274e..065f4247c 100644
--- a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="948" height="448" viewBox="10 10 948 448"><rect x="10.000000" y="10.000000" width="948.000000" height="448.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 948 448"><svg id="d2-svg" width="948" height="448" viewBox="10 10 948 448"><rect x="10.000000" y="10.000000" width="948.000000" height="448.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="rectangle"><g class="shape" ><rect x="12.000000" y="38.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="20.000000" y="174.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.000000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 29 338 H 86 C 87 338 88 338 89 339 L 106 355 C 107 356 107 357 107 358 V 425 C 107 425 107 425 107 425 H 29 C 28 425 28 425 28 425 V 339 C 28 338 28 338 29 338 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 106 425 H 29 C 28 425 28 425 28 424 V 339 C 28 338 28 338 29 338 H 85 C 86 338 86 338 86 339 V 356 C 86 357 87 358 88 358 H 106 C 107 358 107 358 107 359 V 424 C 106 425 107 425 106 425 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="67.500000" y="387.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 169 38 L 339 38 L 313 104 L 143 104 L 143 104 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="241.000000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 182 248 L 182 183 L 299 183 L 299 248 C 280 234 260 234 241 248 C 221 263 202 263 182 248 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="240.500000" y="216.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 189 362 C 189 338 236 338 241 338 C 246 338 293 338 293 362 V 432 C 293 456 246 456 241 456 C 236 456 189 456 189 432 V 362 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 189 362 C 189 386 236 386 241 386 C 246 386 293 386 293 362" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="241.000000" y="414.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 383 38 H 476 C 500 38 500 68 500 71 C 500 74 500 104 476 104 H 383 C 359 104 359 74 359 71 C 359 68 359 38 383 38 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 476 38 C 452 38 452 68 452 71 C 452 74 452 104 476 104" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="417.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 378 184 L 430 184 L 430 199 L 481 199 L 481 257 L 378 257 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="429.500000" y="233.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 371 338 L 452 338 L 487 389 L 452 439 L 371 439 L 406 389 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="429.000000" y="394.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 537 13 V 59 H 585 V 104 L 615 59 H 633 V 13 H 538 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="584.500000" y="41.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 524 188 H 660 C 656 188 645 206 645 221 C 645 236 656 254 660 254 H 524 C 520 254 509 236 509 221 C 509 206 520 188 524 188 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="584.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 662 441 H 507 V 440 C 507 422 524 407 551 399 C 536 392 527 382 527 372 C 527 353 553 338 584 338 C 616 338 641 353 641 372 C 641 383 632 393 617 399 C 644 407 661 422 661 440 V 441 H 662 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="584.500000" y="395.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 730 104 C 729 104 729 104 729 104 L 653 59 C 652 59 652 58 653 57 L 729 12 C 730 12 731 12 732 12 L 808 57 C 809 57 809 58 808 59 L 731 104 C 731 104 731 104 730 104 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="730.000000" y="63.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="730.500000" cy="221.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="730.500000" cy="383.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="389.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 860 35 L 828 69 L 860 104 L 924 104 L 956 69 L 924 35 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="892.000000" y="75.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 857 203 C 857 204 856 205 856 205 C 847 206 840 217 840 231 C 840 246 848 258 858 258 H 925 C 936 258 944 245 944 230 C 944 215 936 203 926 202 C 925 202 925 201 924 200 C 922 185 911 174 899 174 C 891 174 884 179 879 186 C 878 187 878 187 877 187 C 875 186 873 186 871 186 C 864 186 858 193 857 203 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="892.476000" y="236.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.500000 106.000000 L 67.500000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(square -&gt; page)[0]"><path d="M 67.514285 269.999949 L 67.971429 334.000102" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 241.000000 106.000000 L 241.000000 179.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 241.000000 250.000000 L 241.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(queue -&gt; package)[0]"><path d="M 429.024689 105.999848 L 429.950621 181.000305" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(package -&gt; step)[0]"><path d="M 429.000000 260.000000 L 429.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 585.000000 61.000000 L 585.000000 184.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 585.000000 256.000000 L 585.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 731.000000 106.000000 L 731.000000 182.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 731.000000 258.000000 L 731.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 892.972225 105.999807 L 892.055550 172.000386" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><mask id="3840630194" maskUnits="userSpaceOnUse" x="10" y="10" width="948" height="448">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="rectangle"><g class="shape" ><rect x="12.000000" y="38.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="20.000000" y="174.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.000000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 29 338 H 86 C 87 338 88 338 89 339 L 106 355 C 107 356 107 357 107 358 V 425 C 107 425 107 425 107 425 H 29 C 28 425 28 425 28 425 V 339 C 28 338 28 338 29 338 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 106 425 H 29 C 28 425 28 425 28 424 V 339 C 28 338 28 338 29 338 H 85 C 86 338 86 338 86 339 V 356 C 86 357 87 358 88 358 H 106 C 107 358 107 358 107 359 V 424 C 106 425 107 425 106 425 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="67.500000" y="387.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 169 38 L 339 38 L 313 104 L 143 104 L 143 104 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="241.000000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 182 248 L 182 183 L 299 183 L 299 248 C 280 234 260 234 241 248 C 221 263 202 263 182 248 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="240.500000" y="216.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 189 362 C 189 338 236 338 241 338 C 246 338 293 338 293 362 V 432 C 293 456 246 456 241 456 C 236 456 189 456 189 432 V 362 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 189 362 C 189 386 236 386 241 386 C 246 386 293 386 293 362" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="241.000000" y="414.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 383 38 H 476 C 500 38 500 68 500 71 C 500 74 500 104 476 104 H 383 C 359 104 359 74 359 71 C 359 68 359 38 383 38 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 476 38 C 452 38 452 68 452 71 C 452 74 452 104 476 104" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="417.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 378 184 L 430 184 L 430 199 L 481 199 L 481 257 L 378 257 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="429.500000" y="233.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 371 338 L 452 338 L 487 389 L 452 439 L 371 439 L 406 389 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="429.000000" y="394.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 537 13 V 59 H 585 V 104 L 615 59 H 633 V 13 H 538 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="584.500000" y="41.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 524 188 H 660 C 656 188 645 206 645 221 C 645 236 656 254 660 254 H 524 C 520 254 509 236 509 221 C 509 206 520 188 524 188 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="584.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 662 441 H 507 V 440 C 507 422 524 407 551 399 C 536 392 527 382 527 372 C 527 353 553 338 584 338 C 616 338 641 353 641 372 C 641 383 632 393 617 399 C 644 407 661 422 661 440 V 441 H 662 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="584.500000" y="395.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 730 104 C 729 104 729 104 729 104 L 653 59 C 652 59 652 58 653 57 L 729 12 C 730 12 731 12 732 12 L 808 57 C 809 57 809 58 808 59 L 731 104 C 731 104 731 104 730 104 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="730.000000" y="63.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="730.500000" cy="221.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="730.500000" cy="383.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="389.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 860 35 L 828 69 L 860 104 L 924 104 L 956 69 L 924 35 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="892.000000" y="75.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 857 203 C 857 204 856 205 856 205 C 847 206 840 217 840 231 C 840 246 848 258 858 258 H 925 C 936 258 944 245 944 230 C 944 215 936 203 926 202 C 925 202 925 201 924 200 C 922 185 911 174 899 174 C 891 174 884 179 879 186 C 878 187 878 187 877 187 C 875 186 873 186 871 186 C 864 186 858 193 857 203 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="892.476000" y="236.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.500000 106.000000 L 67.500000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(square -&gt; page)[0]"><path d="M 67.514285 269.999949 L 67.971429 334.000102" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 241.000000 106.000000 L 241.000000 179.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 241.000000 250.000000 L 241.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(queue -&gt; package)[0]"><path d="M 429.024689 105.999848 L 429.950621 181.000305" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(package -&gt; step)[0]"><path d="M 429.000000 260.000000 L 429.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 585.000000 61.000000 L 585.000000 184.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 585.000000 256.000000 L 585.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 731.000000 106.000000 L 731.000000 182.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 731.000000 258.000000 L 731.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 892.972225 105.999807 L 892.055550 172.000386" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3840630194)" /></g><mask id="3840630194" maskUnits="userSpaceOnUse" x="10" y="10" width="948" height="448">
 <rect x="10" y="10" width="948" height="448" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
index a75f87515..39fce41b9 100644
--- a/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1159" height="518" viewBox="-2 -12 1159 518"><rect x="-2.000000" y="-12.000000" width="1159.000000" height="518.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1159 518"><svg id="d2-svg" width="1159" height="518" viewBox="-2 -12 1159 518"><rect x="-2.000000" y="-12.000000" width="1159.000000" height="518.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="rectangle"><g class="shape" ><rect x="10.000000" y="3.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="0.000000" y="13.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="19.000000" y="182.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="9.000000" y="192.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.000000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 27 392 H 84 C 85 392 86 392 87 393 L 104 409 C 105 410 105 411 105 412 V 479 C 105 479 105 479 105 479 H 27 C 26 479 26 479 26 479 V 393 C 26 392 26 392 27 392 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 104 479 H 27 C 26 479 26 479 26 478 V 393 C 26 392 26 392 27 392 H 83 C 84 392 84 392 84 393 V 410 C 84 411 85 412 86 412 H 104 C 105 412 105 412 105 413 V 478 C 104 479 105 479 104 479 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 17 402 H 74 C 75 402 76 402 77 403 L 94 419 C 95 420 95 421 95 422 V 489 C 95 489 95 489 95 489 H 16 C 16 489 16 489 16 489 V 403 C 16 402 16 402 17 402 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 94 489 H 17 C 16 489 16 489 16 488 V 403 C 16 402 16 402 17 402 H 73 C 74 402 74 402 74 403 V 420 C 74 421 75 422 76 422 H 94 C 95 422 95 422 95 423 V 488 C 94 489 95 489 94 489 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="55.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 207 3 L 377 3 L 351 69 L 181 69 L 181 69 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 197 13 L 367 13 L 341 79 L 171 79 L 171 79 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="269.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 221 256 L 221 191 L 338 191 L 338 256 C 319 242 299 242 280 256 C 260 271 241 271 221 256 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 211 266 L 211 201 L 328 201 L 328 266 C 309 252 289 252 270 266 C 250 281 231 281 211 266 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="269.500000" y="234.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 227 400 C 227 376 274 376 279 376 C 284 376 331 376 331 400 V 470 C 331 494 284 494 279 494 C 274 494 227 494 227 470 V 400 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 227 400 C 227 424 274 424 279 424 C 284 424 331 424 331 400" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 217 410 C 217 386 264 386 269 386 C 274 386 321 386 321 410 V 480 C 321 504 274 504 269 504 C 264 504 217 504 217 480 V 410 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 217 410 C 217 434 264 434 269 434 C 274 434 321 434 321 410" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="269.000000" y="462.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 461 3 H 554 C 578 3 578 33 578 36 C 578 39 578 69 554 69 H 461 C 437 69 437 39 437 36 C 437 33 437 3 461 3 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 554 3 C 530 3 530 33 530 36 C 530 39 530 69 554 69" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 451 13 H 544 C 568 13 568 43 568 46 C 568 49 568 79 544 79 H 451 C 427 79 427 49 427 46 C 427 43 427 13 451 13 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 544 13 C 520 13 520 43 520 46 C 520 49 520 79 544 79" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="485.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 456 193 L 508 193 L 508 208 L 559 208 L 559 266 L 456 266 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 446 203 L 498 203 L 498 218 L 549 218 L 549 276 L 446 276 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="497.500000" y="252.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 450 385 L 531 385 L 566 436 L 531 486 L 450 486 L 485 436 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 440 395 L 521 395 L 556 446 L 521 496 L 440 496 L 475 446 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="498.000000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 656 -9 V 37 H 704 V 82 L 734 37 H 752 V -9 H 657 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 646 1 V 47 H 694 V 92 L 724 47 H 742 V 1 H 647 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="693.500000" y="29.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 643 196 H 779 C 775 196 764 214 764 229 C 764 244 775 262 779 262 H 643 C 639 262 628 244 628 229 C 628 214 639 196 643 196 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 633 206 H 769 C 765 206 754 224 754 239 C 754 254 765 272 769 272 H 633 C 629 272 618 254 618 239 C 618 224 629 206 633 206 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="693.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 781 487 H 626 V 486 C 626 468 643 453 670 445 C 655 438 646 428 646 418 C 646 399 672 384 703 384 C 735 384 760 399 760 418 C 760 429 751 439 736 445 C 763 453 780 468 780 486 V 487 H 781 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 771 497 H 616 V 496 C 616 478 633 463 660 455 C 645 448 636 438 636 428 C 636 409 662 394 693 394 C 725 394 750 409 750 428 C 750 439 741 449 726 455 C 753 463 770 478 770 496 V 497 H 771 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="693.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 889 82 C 888 82 888 82 888 82 L 812 37 C 811 37 811 36 812 35 L 888 -10 C 889 -10 890 -10 891 -10 L 967 35 C 968 35 968 36 967 37 L 890 82 C 890 82 890 82 889 82 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /><path d="M 879 92 C 878 92 878 92 878 92 L 802 47 C 801 47 801 46 802 45 L 878 0 C 879 -0 880 -0 881 0 L 957 45 C 958 45 958 46 957 47 L 880 92 C 880 92 880 92 879 92 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="879.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="888.500000" cy="229.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="48.500000" ry="35.000000" cx="878.500000" cy="239.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="888.500000" cy="435.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="45.500000" ry="45.500000" cx="878.500000" cy="445.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1059 2 L 1027 36 L 1059 71 L 1123 71 L 1155 36 L 1123 2 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 1049 12 L 1017 46 L 1049 81 L 1113 81 L 1145 46 L 1113 12 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1081.000000" y="52.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1056 216 C 1056 217 1055 218 1055 218 C 1046 219 1039 230 1039 244 C 1039 259 1047 271 1057 271 H 1124 C 1135 271 1143 258 1143 243 C 1143 228 1135 216 1125 215 C 1124 215 1124 214 1123 213 C 1121 198 1110 187 1098 187 C 1090 187 1083 192 1078 199 C 1077 200 1077 200 1076 200 C 1074 199 1072 199 1070 199 C 1063 199 1057 206 1056 216 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 1046 226 C 1046 227 1045 228 1045 228 C 1036 229 1029 240 1029 254 C 1029 269 1037 281 1047 281 H 1114 C 1125 281 1133 268 1133 253 C 1133 238 1125 226 1115 225 C 1114 225 1114 224 1113 223 C 1111 208 1100 197 1088 197 C 1080 197 1073 202 1068 209 C 1067 210 1067 210 1066 210 C 1064 209 1062 209 1060 209 C 1053 209 1047 216 1046 226 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1081.476000" y="259.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.500000 81.000000 C 55.500000 129.400000 55.500000 152.000000 55.500000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(square -&gt; page)[0]"><path d="M 55.500000 288.000000 C 55.500000 326.000000 55.600000 349.200000 55.969698 398.000115" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 269.000000 81.000000 C 269.000000 129.400000 269.000000 153.800000 269.000000 197.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 269.000000 269.000000 C 269.000000 322.200000 269.000000 346.000000 269.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(queue -&gt; package)[0]"><path d="M 497.015873 80.999937 C 497.400000 129.400000 497.600000 154.200000 497.967214 199.000134" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(package -&gt; step)[0]"><path d="M 497.016666 277.999931 C 497.400000 324.000000 497.600000 347.800000 497.966103 391.000144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 693.000000 49.000000 C 693.000000 123.000000 693.000000 154.800000 693.000000 202.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 693.000000 274.000000 C 693.000000 323.200000 693.000000 347.600000 693.000000 390.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 878.980001 93.999900 C 878.600000 132.000000 878.600000 154.400000 878.967743 200.000130" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 878.983871 275.999935 C 878.600000 323.600000 878.600000 348.800000 878.968751 396.000122" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1080.983607 82.999933 C 1080.600000 129.800000 1080.600000 153.400000 1080.964914 195.000154" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><mask id="1232916211" maskUnits="userSpaceOnUse" x="-2" y="-12" width="1159" height="518">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="rectangle"><g class="shape" ><rect x="10.000000" y="3.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="0.000000" y="13.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="19.000000" y="182.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="9.000000" y="192.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.000000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 27 392 H 84 C 85 392 86 392 87 393 L 104 409 C 105 410 105 411 105 412 V 479 C 105 479 105 479 105 479 H 27 C 26 479 26 479 26 479 V 393 C 26 392 26 392 27 392 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 104 479 H 27 C 26 479 26 479 26 478 V 393 C 26 392 26 392 27 392 H 83 C 84 392 84 392 84 393 V 410 C 84 411 85 412 86 412 H 104 C 105 412 105 412 105 413 V 478 C 104 479 105 479 104 479 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 17 402 H 74 C 75 402 76 402 77 403 L 94 419 C 95 420 95 421 95 422 V 489 C 95 489 95 489 95 489 H 16 C 16 489 16 489 16 489 V 403 C 16 402 16 402 17 402 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 94 489 H 17 C 16 489 16 489 16 488 V 403 C 16 402 16 402 17 402 H 73 C 74 402 74 402 74 403 V 420 C 74 421 75 422 76 422 H 94 C 95 422 95 422 95 423 V 488 C 94 489 95 489 94 489 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="55.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 207 3 L 377 3 L 351 69 L 181 69 L 181 69 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 197 13 L 367 13 L 341 79 L 171 79 L 171 79 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="269.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 221 256 L 221 191 L 338 191 L 338 256 C 319 242 299 242 280 256 C 260 271 241 271 221 256 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 211 266 L 211 201 L 328 201 L 328 266 C 309 252 289 252 270 266 C 250 281 231 281 211 266 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="269.500000" y="234.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 227 400 C 227 376 274 376 279 376 C 284 376 331 376 331 400 V 470 C 331 494 284 494 279 494 C 274 494 227 494 227 470 V 400 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 227 400 C 227 424 274 424 279 424 C 284 424 331 424 331 400" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 217 410 C 217 386 264 386 269 386 C 274 386 321 386 321 410 V 480 C 321 504 274 504 269 504 C 264 504 217 504 217 480 V 410 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 217 410 C 217 434 264 434 269 434 C 274 434 321 434 321 410" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="269.000000" y="462.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 461 3 H 554 C 578 3 578 33 578 36 C 578 39 578 69 554 69 H 461 C 437 69 437 39 437 36 C 437 33 437 3 461 3 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 554 3 C 530 3 530 33 530 36 C 530 39 530 69 554 69" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 451 13 H 544 C 568 13 568 43 568 46 C 568 49 568 79 544 79 H 451 C 427 79 427 49 427 46 C 427 43 427 13 451 13 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 544 13 C 520 13 520 43 520 46 C 520 49 520 79 544 79" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="485.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 456 193 L 508 193 L 508 208 L 559 208 L 559 266 L 456 266 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 446 203 L 498 203 L 498 218 L 549 218 L 549 276 L 446 276 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="497.500000" y="252.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 450 385 L 531 385 L 566 436 L 531 486 L 450 486 L 485 436 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 440 395 L 521 395 L 556 446 L 521 496 L 440 496 L 475 446 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="498.000000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 656 -9 V 37 H 704 V 82 L 734 37 H 752 V -9 H 657 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 646 1 V 47 H 694 V 92 L 724 47 H 742 V 1 H 647 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="693.500000" y="29.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 643 196 H 779 C 775 196 764 214 764 229 C 764 244 775 262 779 262 H 643 C 639 262 628 244 628 229 C 628 214 639 196 643 196 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 633 206 H 769 C 765 206 754 224 754 239 C 754 254 765 272 769 272 H 633 C 629 272 618 254 618 239 C 618 224 629 206 633 206 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="693.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 781 487 H 626 V 486 C 626 468 643 453 670 445 C 655 438 646 428 646 418 C 646 399 672 384 703 384 C 735 384 760 399 760 418 C 760 429 751 439 736 445 C 763 453 780 468 780 486 V 487 H 781 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 771 497 H 616 V 496 C 616 478 633 463 660 455 C 645 448 636 438 636 428 C 636 409 662 394 693 394 C 725 394 750 409 750 428 C 750 439 741 449 726 455 C 753 463 770 478 770 496 V 497 H 771 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="693.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 889 82 C 888 82 888 82 888 82 L 812 37 C 811 37 811 36 812 35 L 888 -10 C 889 -10 890 -10 891 -10 L 967 35 C 968 35 968 36 967 37 L 890 82 C 890 82 890 82 889 82 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /><path d="M 879 92 C 878 92 878 92 878 92 L 802 47 C 801 47 801 46 802 45 L 878 0 C 879 -0 880 -0 881 0 L 957 45 C 958 45 958 46 957 47 L 880 92 C 880 92 880 92 879 92 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="879.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="888.500000" cy="229.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="48.500000" ry="35.000000" cx="878.500000" cy="239.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="888.500000" cy="435.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="45.500000" ry="45.500000" cx="878.500000" cy="445.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1059 2 L 1027 36 L 1059 71 L 1123 71 L 1155 36 L 1123 2 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 1049 12 L 1017 46 L 1049 81 L 1113 81 L 1145 46 L 1113 12 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1081.000000" y="52.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1056 216 C 1056 217 1055 218 1055 218 C 1046 219 1039 230 1039 244 C 1039 259 1047 271 1057 271 H 1124 C 1135 271 1143 258 1143 243 C 1143 228 1135 216 1125 215 C 1124 215 1124 214 1123 213 C 1121 198 1110 187 1098 187 C 1090 187 1083 192 1078 199 C 1077 200 1077 200 1076 200 C 1074 199 1072 199 1070 199 C 1063 199 1057 206 1056 216 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 1046 226 C 1046 227 1045 228 1045 228 C 1036 229 1029 240 1029 254 C 1029 269 1037 281 1047 281 H 1114 C 1125 281 1133 268 1133 253 C 1133 238 1125 226 1115 225 C 1114 225 1114 224 1113 223 C 1111 208 1100 197 1088 197 C 1080 197 1073 202 1068 209 C 1067 210 1067 210 1066 210 C 1064 209 1062 209 1060 209 C 1053 209 1047 216 1046 226 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1081.476000" y="259.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.500000 81.000000 C 55.500000 129.400000 55.500000 152.000000 55.500000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(square -&gt; page)[0]"><path d="M 55.500000 288.000000 C 55.500000 326.000000 55.600000 349.200000 55.969698 398.000115" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 269.000000 81.000000 C 269.000000 129.400000 269.000000 153.800000 269.000000 197.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 269.000000 269.000000 C 269.000000 322.200000 269.000000 346.000000 269.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(queue -&gt; package)[0]"><path d="M 497.015873 80.999937 C 497.400000 129.400000 497.600000 154.200000 497.967214 199.000134" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(package -&gt; step)[0]"><path d="M 497.016666 277.999931 C 497.400000 324.000000 497.600000 347.800000 497.966103 391.000144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 693.000000 49.000000 C 693.000000 123.000000 693.000000 154.800000 693.000000 202.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 693.000000 274.000000 C 693.000000 323.200000 693.000000 347.600000 693.000000 390.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 878.980001 93.999900 C 878.600000 132.000000 878.600000 154.400000 878.967743 200.000130" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 878.983871 275.999935 C 878.600000 323.600000 878.600000 348.800000 878.968751 396.000122" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1080.983607 82.999933 C 1080.600000 129.800000 1080.600000 153.400000 1080.964914 195.000154" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1232916211)" /></g><mask id="1232916211" maskUnits="userSpaceOnUse" x="-2" y="-12" width="1159" height="518">
 <rect x="-2" y="-12" width="1159" height="518" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
index 5697a3622..c017db100 100644
--- a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="958" height="458" viewBox="10 0 958 458"><rect x="10.000000" y="0.000000" width="958.000000" height="458.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 958 458"><svg id="d2-svg" width="958" height="458" viewBox="10 0 958 458"><rect x="10.000000" y="0.000000" width="958.000000" height="458.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="rectangle"><g class="shape" ><rect x="22.000000" y="28.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="12.000000" y="38.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="30.000000" y="164.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="20.000000" y="174.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.000000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 39 328 H 96 C 97 328 98 328 99 329 L 116 345 C 117 346 117 347 117 348 V 415 C 117 415 117 415 117 415 H 39 C 38 415 38 415 38 415 V 329 C 38 328 38 328 39 328 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 116 415 H 39 C 38 415 38 415 38 414 V 329 C 38 328 38 328 39 328 H 95 C 96 328 96 328 96 329 V 346 C 96 347 97 348 98 348 H 116 C 117 348 117 348 117 349 V 414 C 116 415 117 415 116 415 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 29 338 H 86 C 87 338 88 338 89 339 L 106 355 C 107 356 107 357 107 358 V 425 C 107 425 107 425 107 425 H 29 C 28 425 28 425 28 425 V 339 C 28 338 28 338 29 338 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 106 425 H 29 C 28 425 28 425 28 424 V 339 C 28 338 28 338 29 338 H 85 C 86 338 86 338 86 339 V 356 C 86 357 87 358 88 358 H 106 C 107 358 107 358 107 359 V 424 C 106 425 107 425 106 425 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="67.500000" y="387.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 179 28 L 349 28 L 323 94 L 153 94 L 153 94 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 169 38 L 339 38 L 313 104 L 143 104 L 143 104 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="241.000000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 192 238 L 192 173 L 309 173 L 309 238 C 290 224 270 224 251 238 C 231 253 212 253 192 238 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 182 248 L 182 183 L 299 183 L 299 248 C 280 234 260 234 241 248 C 221 263 202 263 182 248 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="240.500000" y="216.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 199 352 C 199 328 246 328 251 328 C 256 328 303 328 303 352 V 422 C 303 446 256 446 251 446 C 246 446 199 446 199 422 V 352 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 199 352 C 199 376 246 376 251 376 C 256 376 303 376 303 352" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 189 362 C 189 338 236 338 241 338 C 246 338 293 338 293 362 V 432 C 293 456 246 456 241 456 C 236 456 189 456 189 432 V 362 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 189 362 C 189 386 236 386 241 386 C 246 386 293 386 293 362" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="241.000000" y="414.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 393 28 H 486 C 510 28 510 58 510 61 C 510 64 510 94 486 94 H 393 C 369 94 369 64 369 61 C 369 58 369 28 393 28 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 486 28 C 462 28 462 58 462 61 C 462 64 462 94 486 94" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 383 38 H 476 C 500 38 500 68 500 71 C 500 74 500 104 476 104 H 383 C 359 104 359 74 359 71 C 359 68 359 38 383 38 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 476 38 C 452 38 452 68 452 71 C 452 74 452 104 476 104" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="417.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 388 174 L 440 174 L 440 189 L 491 189 L 491 247 L 388 247 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 378 184 L 430 184 L 430 199 L 481 199 L 481 257 L 378 257 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="429.500000" y="233.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 381 328 L 462 328 L 497 379 L 462 429 L 381 429 L 416 379 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 371 338 L 452 338 L 487 389 L 452 439 L 371 439 L 406 389 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="429.000000" y="394.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 547 3 V 49 H 595 V 94 L 625 49 H 643 V 3 H 548 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 537 13 V 59 H 585 V 104 L 615 59 H 633 V 13 H 538 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="584.500000" y="41.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 534 178 H 670 C 666 178 655 196 655 211 C 655 226 666 244 670 244 H 534 C 530 244 519 226 519 211 C 519 196 530 178 534 178 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 524 188 H 660 C 656 188 645 206 645 221 C 645 236 656 254 660 254 H 524 C 520 254 509 236 509 221 C 509 206 520 188 524 188 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="584.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 672 431 H 517 V 430 C 517 412 534 397 561 389 C 546 382 537 372 537 362 C 537 343 563 328 594 328 C 626 328 651 343 651 362 C 651 373 642 383 627 389 C 654 397 671 412 671 430 V 431 H 672 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 662 441 H 507 V 440 C 507 422 524 407 551 399 C 536 392 527 382 527 372 C 527 353 553 338 584 338 C 616 338 641 353 641 372 C 641 383 632 393 617 399 C 644 407 661 422 661 440 V 441 H 662 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="584.500000" y="395.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 740 94 C 739 94 739 94 739 94 L 663 49 C 662 49 662 48 663 47 L 739 2 C 740 2 741 2 742 2 L 818 47 C 819 47 819 48 818 49 L 741 94 C 741 94 741 94 740 94 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /><path d="M 730 104 C 729 104 729 104 729 104 L 653 59 C 652 59 652 58 653 57 L 729 12 C 730 12 731 12 732 12 L 808 57 C 809 57 809 58 808 59 L 731 104 C 731 104 731 104 730 104 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="730.000000" y="63.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="740.500000" cy="211.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="48.500000" ry="35.000000" cx="730.500000" cy="221.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="740.500000" cy="373.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="45.500000" ry="45.500000" cx="730.500000" cy="383.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="389.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 870 25 L 838 59 L 870 94 L 934 94 L 966 59 L 934 25 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 860 35 L 828 69 L 860 104 L 924 104 L 956 69 L 924 35 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="892.000000" y="75.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 867 193 C 867 194 866 195 866 195 C 857 196 850 207 850 221 C 850 236 858 248 868 248 H 935 C 946 248 954 235 954 220 C 954 205 946 193 936 192 C 935 192 935 191 934 190 C 932 175 921 164 909 164 C 901 164 894 169 889 176 C 888 177 888 177 887 177 C 885 176 883 176 881 176 C 874 176 868 183 867 193 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 857 203 C 857 204 856 205 856 205 C 847 206 840 217 840 231 C 840 246 848 258 858 258 H 925 C 936 258 944 245 944 230 C 944 215 936 203 926 202 C 925 202 925 201 924 200 C 922 185 911 174 899 174 C 891 174 884 179 879 186 C 878 187 878 187 877 187 C 875 186 873 186 871 186 C 864 186 858 193 857 203 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="892.476000" y="236.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.500000 106.000000 L 67.500000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(square -&gt; page)[0]"><path d="M 67.514285 269.999949 L 67.971429 334.000102" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 241.000000 106.000000 L 241.000000 179.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 241.000000 250.000000 L 241.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(queue -&gt; package)[0]"><path d="M 429.024689 105.999848 L 429.950621 181.000305" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(package -&gt; step)[0]"><path d="M 429.000000 260.000000 L 429.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 585.000000 61.000000 L 585.000000 184.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 585.000000 256.000000 L 585.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 731.000000 106.000000 L 731.000000 182.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 731.000000 258.000000 L 731.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 892.972225 105.999807 L 892.055550 172.000386" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><mask id="4250605777" maskUnits="userSpaceOnUse" x="10" y="0" width="958" height="458">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="rectangle"><g class="shape" ><rect x="22.000000" y="28.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="12.000000" y="38.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><rect x="30.000000" y="164.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="20.000000" y="174.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.000000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" ><path d="M 39 328 H 96 C 97 328 98 328 99 329 L 116 345 C 117 346 117 347 117 348 V 415 C 117 415 117 415 117 415 H 39 C 38 415 38 415 38 415 V 329 C 38 328 38 328 39 328 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 116 415 H 39 C 38 415 38 415 38 414 V 329 C 38 328 38 328 39 328 H 95 C 96 328 96 328 96 329 V 346 C 96 347 97 348 98 348 H 116 C 117 348 117 348 117 349 V 414 C 116 415 117 415 116 415 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 29 338 H 86 C 87 338 88 338 89 339 L 106 355 C 107 356 107 357 107 358 V 425 C 107 425 107 425 107 425 H 29 C 28 425 28 425 28 425 V 339 C 28 338 28 338 29 338 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 106 425 H 29 C 28 425 28 425 28 424 V 339 C 28 338 28 338 29 338 H 85 C 86 338 86 338 86 339 V 356 C 86 357 87 358 88 358 H 106 C 107 358 107 358 107 359 V 424 C 106 425 107 425 106 425 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="67.500000" y="387.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 179 28 L 349 28 L 323 94 L 153 94 L 153 94 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 169 38 L 339 38 L 313 104 L 143 104 L 143 104 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="241.000000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 192 238 L 192 173 L 309 173 L 309 238 C 290 224 270 224 251 238 C 231 253 212 253 192 238 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 182 248 L 182 183 L 299 183 L 299 248 C 280 234 260 234 241 248 C 221 263 202 263 182 248 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="240.500000" y="216.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" ><path d="M 199 352 C 199 328 246 328 251 328 C 256 328 303 328 303 352 V 422 C 303 446 256 446 251 446 C 246 446 199 446 199 422 V 352 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 199 352 C 199 376 246 376 251 376 C 256 376 303 376 303 352" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 189 362 C 189 338 236 338 241 338 C 246 338 293 338 293 362 V 432 C 293 456 246 456 241 456 C 236 456 189 456 189 432 V 362 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 189 362 C 189 386 236 386 241 386 C 246 386 293 386 293 362" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="241.000000" y="414.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 393 28 H 486 C 510 28 510 58 510 61 C 510 64 510 94 486 94 H 393 C 369 94 369 64 369 61 C 369 58 369 28 393 28 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 486 28 C 462 28 462 58 462 61 C 462 64 462 94 486 94" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 383 38 H 476 C 500 38 500 68 500 71 C 500 74 500 104 476 104 H 383 C 359 104 359 74 359 71 C 359 68 359 38 383 38 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 476 38 C 452 38 452 68 452 71 C 452 74 452 104 476 104" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="417.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" ><path d="M 388 174 L 440 174 L 440 189 L 491 189 L 491 247 L 388 247 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 378 184 L 430 184 L 430 199 L 481 199 L 481 257 L 378 257 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="429.500000" y="233.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" ><path d="M 381 328 L 462 328 L 497 379 L 462 429 L 381 429 L 416 379 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 371 338 L 452 338 L 487 389 L 452 439 L 371 439 L 406 389 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="429.000000" y="394.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" ><path d="M 547 3 V 49 H 595 V 94 L 625 49 H 643 V 3 H 548 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 537 13 V 59 H 585 V 104 L 615 59 H 633 V 13 H 538 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="584.500000" y="41.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 534 178 H 670 C 666 178 655 196 655 211 C 655 226 666 244 670 244 H 534 C 530 244 519 226 519 211 C 519 196 530 178 534 178 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 524 188 H 660 C 656 188 645 206 645 221 C 645 236 656 254 660 254 H 524 C 520 254 509 236 509 221 C 509 206 520 188 524 188 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="584.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" ><path d="M 672 431 H 517 V 430 C 517 412 534 397 561 389 C 546 382 537 372 537 362 C 537 343 563 328 594 328 C 626 328 651 343 651 362 C 651 373 642 383 627 389 C 654 397 671 412 671 430 V 431 H 672 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /><path d="M 662 441 H 507 V 440 C 507 422 524 407 551 399 C 536 392 527 382 527 372 C 527 353 553 338 584 338 C 616 338 641 353 641 372 C 641 383 632 393 617 399 C 644 407 661 422 661 440 V 441 H 662 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="584.500000" y="395.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" ><path d="M 740 94 C 739 94 739 94 739 94 L 663 49 C 662 49 662 48 663 47 L 739 2 C 740 2 741 2 742 2 L 818 47 C 819 47 819 48 818 49 L 741 94 C 741 94 741 94 740 94 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /><path d="M 730 104 C 729 104 729 104 729 104 L 653 59 C 652 59 652 58 653 57 L 729 12 C 730 12 731 12 732 12 L 808 57 C 809 57 809 58 808 59 L 731 104 C 731 104 731 104 730 104 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="730.000000" y="63.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" ><ellipse rx="48.500000" ry="35.000000" cx="740.500000" cy="211.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="48.500000" ry="35.000000" cx="730.500000" cy="221.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" ><ellipse rx="45.500000" ry="45.500000" cx="740.500000" cy="373.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /><ellipse rx="45.500000" ry="45.500000" cx="730.500000" cy="383.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="389.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 870 25 L 838 59 L 870 94 L 934 94 L 966 59 L 934 25 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 860 35 L 828 69 L 860 104 L 924 104 L 956 69 L 924 35 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="892.000000" y="75.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 867 193 C 867 194 866 195 866 195 C 857 196 850 207 850 221 C 850 236 858 248 868 248 H 935 C 946 248 954 235 954 220 C 954 205 946 193 936 192 C 935 192 935 191 934 190 C 932 175 921 164 909 164 C 901 164 894 169 889 176 C 888 177 888 177 887 177 C 885 176 883 176 881 176 C 874 176 868 183 867 193 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 857 203 C 857 204 856 205 856 205 C 847 206 840 217 840 231 C 840 246 848 258 858 258 H 925 C 936 258 944 245 944 230 C 944 215 936 203 926 202 C 925 202 925 201 924 200 C 922 185 911 174 899 174 C 891 174 884 179 879 186 C 878 187 878 187 877 187 C 875 186 873 186 871 186 C 864 186 858 193 857 203 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="892.476000" y="236.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.500000 106.000000 L 67.500000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(square -&gt; page)[0]"><path d="M 67.514285 269.999949 L 67.971429 334.000102" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 241.000000 106.000000 L 241.000000 179.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 241.000000 250.000000 L 241.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(queue -&gt; package)[0]"><path d="M 429.024689 105.999848 L 429.950621 181.000305" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(package -&gt; step)[0]"><path d="M 429.000000 260.000000 L 429.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 585.000000 61.000000 L 585.000000 184.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 585.000000 256.000000 L 585.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 731.000000 106.000000 L 731.000000 182.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 731.000000 258.000000 L 731.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 892.972225 105.999807 L 892.055550 172.000386" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4250605777)" /></g><mask id="4250605777" maskUnits="userSpaceOnUse" x="10" y="0" width="958" height="458">
 <rect x="10" y="0" width="958" height="458" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
index 814c9777e..ceefdc00e 100644
--- a/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1149" height="508" viewBox="-2 -2 1149 508"><rect x="-2.000000" y="-2.000000" width="1149.000000" height="508.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1149 508"><svg id="d2-svg" width="1149" height="508" viewBox="-2 -2 1149 508"><rect x="-2.000000" y="-2.000000" width="1149.000000" height="508.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><defs>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><defs>
 	<filter id="shadow-filter" width="200%" height="200%" x="-50%" y="-50%">
 		<feGaussianBlur stdDeviation="1.7 " in="SourceGraphic"></feGaussianBlur>
 		<feFlood flood-color="#3d4574" flood-opacity="0.4" result="ShadowFeFlood" in="SourceGraphic"></feFlood>
@@ -48,4 +28,4 @@
 </defs><g id="rectangle"><g class="shape" filter="url(#shadow-filter)" ><rect x="0.000000" y="13.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" filter="url(#shadow-filter)" ><rect x="9.000000" y="192.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.000000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" filter="url(#shadow-filter)" ><path d="M 17 402 H 74 C 75 402 76 402 77 403 L 94 419 C 95 420 95 421 95 422 V 489 C 95 489 95 489 95 489 H 16 C 16 489 16 489 16 489 V 403 C 16 402 16 402 17 402 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 94 489 H 17 C 16 489 16 489 16 488 V 403 C 16 402 16 402 17 402 H 73 C 74 402 74 402 74 403 V 420 C 74 421 75 422 76 422 H 94 C 95 422 95 422 95 423 V 488 C 94 489 95 489 94 489 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="55.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" filter="url(#shadow-filter)" ><path d="M 197 13 L 367 13 L 341 79 L 171 79 L 171 79 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="269.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" filter="url(#shadow-filter)" ><path d="M 211 266 L 211 201 L 328 201 L 328 266 C 309 252 289 252 270 266 C 250 281 231 281 211 266 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="269.500000" y="234.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" filter="url(#shadow-filter)" ><path d="M 217 410 C 217 386 264 386 269 386 C 274 386 321 386 321 410 V 480 C 321 504 274 504 269 504 C 264 504 217 504 217 480 V 410 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 217 410 C 217 434 264 434 269 434 C 274 434 321 434 321 410" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="269.000000" y="462.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" filter="url(#shadow-filter)" ><path d="M 451 13 H 544 C 568 13 568 43 568 46 C 568 49 568 79 544 79 H 451 C 427 79 427 49 427 46 C 427 43 427 13 451 13 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 544 13 C 520 13 520 43 520 46 C 520 49 520 79 544 79" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="485.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" filter="url(#shadow-filter)" ><path d="M 446 203 L 498 203 L 498 218 L 549 218 L 549 276 L 446 276 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="497.500000" y="252.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" filter="url(#shadow-filter)" ><path d="M 440 395 L 521 395 L 556 446 L 521 496 L 440 496 L 475 446 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="498.000000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" filter="url(#shadow-filter)" ><path d="M 646 1 V 47 H 694 V 92 L 724 47 H 742 V 1 H 647 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="693.500000" y="29.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" filter="url(#shadow-filter)" ><path d="M 633 206 H 769 C 765 206 754 224 754 239 C 754 254 765 272 769 272 H 633 C 629 272 618 254 618 239 C 618 224 629 206 633 206 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="693.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" filter="url(#shadow-filter)" ><path d="M 771 497 H 616 V 496 C 616 478 633 463 660 455 C 645 448 636 438 636 428 C 636 409 662 394 693 394 C 725 394 750 409 750 428 C 750 439 741 449 726 455 C 753 463 770 478 770 496 V 497 H 771 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="693.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" filter="url(#shadow-filter)" ><path d="M 879 92 C 878 92 878 92 878 92 L 802 47 C 801 47 801 46 802 45 L 878 0 C 879 -0 880 -0 881 0 L 957 45 C 958 45 958 46 957 47 L 880 92 C 880 92 880 92 879 92 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="879.000000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" filter="url(#shadow-filter)" ><ellipse rx="48.500000" ry="35.000000" cx="878.500000" cy="239.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="244.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" filter="url(#shadow-filter)" ><ellipse rx="45.500000" ry="45.500000" cx="878.500000" cy="445.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="451.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" filter="url(#shadow-filter)" ><path d="M 1049 12 L 1017 46 L 1049 81 L 1113 81 L 1145 46 L 1113 12 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1081.000000" y="52.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" filter="url(#shadow-filter)" ><path d="M 1046 226 C 1046 227 1045 228 1045 228 C 1036 229 1029 240 1029 254 C 1029 269 1037 281 1047 281 H 1114 C 1125 281 1133 268 1133 253 C 1133 238 1125 226 1115 225 C 1114 225 1114 224 1113 223 C 1111 208 1100 197 1088 197 C 1080 197 1073 202 1068 209 C 1067 210 1067 210 1066 210 C 1064 209 1062 209 1060 209 C 1053 209 1047 216 1046 226 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1081.476000" y="259.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.500000 81.000000 C 55.500000 129.400000 55.500000 152.000000 55.500000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(square -&gt; page)[0]"><path d="M 55.500000 288.000000 C 55.500000 326.000000 55.600000 349.200000 55.969698 398.000115" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 269.000000 81.000000 C 269.000000 129.400000 269.000000 153.800000 269.000000 197.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 269.000000 269.000000 C 269.000000 322.200000 269.000000 346.000000 269.000000 382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(queue -&gt; package)[0]"><path d="M 497.015873 80.999937 C 497.400000 129.400000 497.600000 154.200000 497.967214 199.000134" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(package -&gt; step)[0]"><path d="M 497.016666 277.999931 C 497.400000 324.000000 497.600000 347.800000 497.966103 391.000144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 693.000000 49.000000 C 693.000000 123.000000 693.000000 154.800000 693.000000 202.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 693.000000 274.000000 C 693.000000 323.200000 693.000000 347.600000 693.000000 390.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 878.980001 93.999900 C 878.600000 132.000000 878.600000 154.400000 878.967743 200.000130" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 878.983871 275.999935 C 878.600000 323.600000 878.600000 348.800000 878.968751 396.000122" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1080.983607 82.999933 C 1080.600000 129.800000 1080.600000 153.400000 1080.964914 195.000154" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4169191957)" /></g><mask id="4169191957" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1149" height="508">
 <rect x="-2" y="-2" width="1149" height="508" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
index dc258bf1e..f7d1da22a 100644
--- a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="948" height="448" viewBox="10 10 948 448"><rect x="10.000000" y="10.000000" width="948.000000" height="448.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 948 448"><svg id="d2-svg" width="948" height="448" viewBox="10 10 948 448"><rect x="10.000000" y="10.000000" width="948.000000" height="448.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><defs>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><defs>
 	<filter id="shadow-filter" width="200%" height="200%" x="-50%" y="-50%">
 		<feGaussianBlur stdDeviation="1.7 " in="SourceGraphic"></feGaussianBlur>
 		<feFlood flood-color="#3d4574" flood-opacity="0.4" result="ShadowFeFlood" in="SourceGraphic"></feFlood>
@@ -48,4 +28,4 @@
 </defs><g id="rectangle"><g class="shape" filter="url(#shadow-filter)" ><rect x="12.000000" y="38.000000" width="111.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" filter="url(#shadow-filter)" ><rect x="20.000000" y="174.000000" width="94.000000" height="94.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.000000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="page"><g class="shape" filter="url(#shadow-filter)" ><path d="M 29 338 H 86 C 87 338 88 338 89 339 L 106 355 C 107 356 107 357 107 358 V 425 C 107 425 107 425 107 425 H 29 C 28 425 28 425 28 425 V 339 C 28 338 28 338 29 338 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 106 425 H 29 C 28 425 28 425 28 424 V 339 C 28 338 28 338 29 338 H 85 C 86 338 86 338 86 339 V 356 C 86 357 87 358 88 358 H 106 C 107 358 107 358 107 359 V 424 C 106 425 107 425 106 425 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="67.500000" y="387.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">page</text></g><g id="parallelogram"><g class="shape" filter="url(#shadow-filter)" ><path d="M 169 38 L 339 38 L 313 104 L 143 104 L 143 104 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="241.000000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">parallelogram</text></g><g id="document"><g class="shape" filter="url(#shadow-filter)" ><path d="M 182 248 L 182 183 L 299 183 L 299 248 C 280 234 260 234 241 248 C 221 263 202 263 182 248 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="240.500000" y="216.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">document</text></g><g id="cylinder"><g class="shape" filter="url(#shadow-filter)" ><path d="M 189 362 C 189 338 236 338 241 338 C 246 338 293 338 293 362 V 432 C 293 456 246 456 241 456 C 236 456 189 456 189 432 V 362 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 189 362 C 189 386 236 386 241 386 C 246 386 293 386 293 362" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="241.000000" y="414.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cylinder</text></g><g id="queue"><g class="shape" filter="url(#shadow-filter)" ><path d="M 383 38 H 476 C 500 38 500 68 500 71 C 500 74 500 104 476 104 H 383 C 359 104 359 74 359 71 C 359 68 359 38 383 38 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 476 38 C 452 38 452 68 452 71 C 452 74 452 104 476 104" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="417.500000" y="76.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="package"><g class="shape" filter="url(#shadow-filter)" ><path d="M 378 184 L 430 184 L 430 199 L 481 199 L 481 257 L 378 257 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="429.500000" y="233.300000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">package</text></g><g id="step"><g class="shape" filter="url(#shadow-filter)" ><path d="M 371 338 L 452 338 L 487 389 L 452 439 L 371 439 L 406 389 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="429.000000" y="394.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">step</text></g><g id="callout"><g class="shape" filter="url(#shadow-filter)" ><path d="M 537 13 V 59 H 585 V 104 L 615 59 H 633 V 13 H 538 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="584.500000" y="41.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">callout</text></g><g id="stored_data"><g class="shape" filter="url(#shadow-filter)" ><path d="M 524 188 H 660 C 656 188 645 206 645 221 C 645 236 656 254 660 254 H 524 C 520 254 509 236 509 221 C 509 206 520 188 524 188 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="584.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">stored_data</text></g><g id="person"><g class="shape" filter="url(#shadow-filter)" ><path d="M 662 441 H 507 V 440 C 507 422 524 407 551 399 C 536 392 527 382 527 372 C 527 353 553 338 584 338 C 616 338 641 353 641 372 C 641 383 632 393 617 399 C 644 407 661 422 661 440 V 441 H 662 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="584.500000" y="395.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">person</text></g><g id="diamond"><g class="shape" filter="url(#shadow-filter)" ><path d="M 730 104 C 729 104 729 104 729 104 L 653 59 C 652 59 652 58 653 57 L 729 12 C 730 12 731 12 732 12 L 808 57 C 809 57 809 58 808 59 L 731 104 C 731 104 731 104 730 104 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="730.000000" y="63.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="oval"><g class="shape" filter="url(#shadow-filter)" ><ellipse rx="48.500000" ry="35.000000" cx="730.500000" cy="221.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="circle"><g class="shape" filter="url(#shadow-filter)" ><ellipse rx="45.500000" ry="45.500000" cx="730.500000" cy="383.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.500000" y="389.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="hexagon"><g class="shape" filter="url(#shadow-filter)" ><path d="M 860 35 L 828 69 L 860 104 L 924 104 L 956 69 L 924 35 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="892.000000" y="75.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="cloud"><g class="shape" filter="url(#shadow-filter)" ><path d="M 857 203 C 857 204 856 205 856 205 C 847 206 840 217 840 231 C 840 246 848 258 858 258 H 925 C 936 258 944 245 944 230 C 944 215 936 203 926 202 C 925 202 925 201 924 200 C 922 185 911 174 899 174 C 891 174 884 179 879 186 C 878 187 878 187 877 187 C 875 186 873 186 871 186 C 864 186 858 193 857 203 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="892.476000" y="236.346000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.500000 106.000000 L 67.500000 170.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(square -&gt; page)[0]"><path d="M 67.514285 269.999949 L 67.971429 334.000102" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(parallelogram -&gt; document)[0]"><path d="M 241.000000 106.000000 L 241.000000 179.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(document -&gt; cylinder)[0]"><path d="M 241.000000 250.000000 L 241.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(queue -&gt; package)[0]"><path d="M 429.024689 105.999848 L 429.950621 181.000305" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(package -&gt; step)[0]"><path d="M 429.000000 260.000000 L 429.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(callout -&gt; stored_data)[0]"><path d="M 585.000000 61.000000 L 585.000000 184.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(stored_data -&gt; person)[0]"><path d="M 585.000000 256.000000 L 585.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(diamond -&gt; oval)[0]"><path d="M 731.000000 106.000000 L 731.000000 182.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(oval -&gt; circle)[0]"><path d="M 731.000000 258.000000 L 731.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 892.972225 105.999807 L 892.055550 172.000386" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#470112439)" /></g><mask id="470112439" maskUnits="userSpaceOnUse" x="10" y="10" width="948" height="448">
 <rect x="10" y="10" width="948" height="448" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/animated/dagre/sketch.exp.svg b/e2etests/testdata/stable/animated/dagre/sketch.exp.svg
index 29579cfdf..a813306a4 100644
--- a/e2etests/testdata/stable/animated/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/animated/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1224" height="257" viewBox="-2 -2 1224 257"><rect x="-2.000000" y="-2.000000" width="1224.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1224 257"><svg id="d2-svg" width="1224" height="257" viewBox="-2 -2 1224 257"><rect x="-2.000000" y="-2.000000" width="1224.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 @keyframes dashdraw {
 	from {
 		stroke-dashoffset: 0;
@@ -30,27 +30,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="your love life will be"><g class="shape" ><rect x="28.000000" y="0.000000" width="187.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="121.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">your love life will be</text></g><g id="happy"><g class="shape" ><rect x="0.000000" y="187.000000" width="89.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">happy</text></g><g id="harmonious"><g class="shape" ><rect x="149.000000" y="187.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="214.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">harmonious</text></g><g id="boredom"><g class="shape" ><rect x="351.000000" y="187.000000" width="108.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="405.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">boredom</text></g><g id="immortality"><g class="shape" ><rect x="340.000000" y="0.000000" width="131.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="405.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">immortality</text></g><g id="Friday"><g class="shape" ><rect x="531.000000" y="0.000000" width="90.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="576.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Friday</text></g><g id="Monday"><g class="shape" ><rect x="525.000000" y="187.000000" width="101.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="575.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Monday</text></g><g id="Insomnia"><g class="shape" ><rect x="826.000000" y="0.000000" width="110.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="881.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Insomnia</text></g><g id="Sleep"><g class="shape" ><rect x="690.000000" y="187.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="732.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Sleep</text></g><g id="Wake"><g class="shape" ><rect x="835.000000" y="187.000000" width="84.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="877.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Wake</text></g><g id="Dream"><g class="shape" ><rect x="979.000000" y="187.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1024.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Dream</text></g><g id="Listen"><g class="shape" ><rect x="1132.000000" y="0.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1176.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Listen</text></g><g id="Talk"><g class="shape" ><rect x="1138.000000" y="187.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1176.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Talk</text></g><g id="(your love life will be -&gt; happy)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 93.052115 67.543860 C 54.464706 114.400000 44.500000 138.700000 44.500000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1538568695)" /></g><g id="(your love life will be -&gt; harmonious)[0]"><path d="M 155.553649 67.421796 C 202.029412 114.400000 214.000000 138.700000 214.000000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1538568695)" /></g><g id="(boredom &lt;- immortality)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 405.250000 183.000000 C 405.250000 138.600000 405.250000 114.300000 405.250000 67.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" mask="url(#1538568695)" /></g><g id="(Friday &lt;-&gt; Monday)[0]"><path d="M 575.750000 70.000000 C 575.750000 114.400000 575.750000 138.700000 575.750000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1538568695)" /></g><g id="(Insomnia -- Sleep)[0]"><path d="M 826.806727 67.064343 C 751.500000 114.400000 732.250000 138.700000 732.250000 185.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#1538568695)" /></g><g id="(Insomnia -- Wake)[0]"><path d="M 879.409185 67.997937 C 877.300000 114.400000 876.750000 138.700000 876.750000 185.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#1538568695)" /></g><g id="(Insomnia -- Dream)[0]"><path d="M 935.745859 68.732899 C 1005.711765 114.400000 1024.250000 138.700000 1024.250000 182.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:8;stroke-dasharray:40.000000,35.268560;stroke-dashoffset:-752.685599;animation: dashdraw 17.634280s linear infinite;" mask="url(#1538568695)" /></g><g id="(Listen &lt;-&gt; Talk)[0]"><marker id="mk-3108867711" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 1175.500000 70.000000 C 1175.500000 114.400000 1175.500000 138.700000 1175.500000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-3108867711)" marker-end="url(#mk-1565215268)" mask="url(#1538568695)" /><text x="1176.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hear</text></g><mask id="1538568695" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1224" height="257">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="your love life will be"><g class="shape" ><rect x="28.000000" y="0.000000" width="187.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="121.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">your love life will be</text></g><g id="happy"><g class="shape" ><rect x="0.000000" y="187.000000" width="89.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">happy</text></g><g id="harmonious"><g class="shape" ><rect x="149.000000" y="187.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="214.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">harmonious</text></g><g id="boredom"><g class="shape" ><rect x="351.000000" y="187.000000" width="108.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="405.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">boredom</text></g><g id="immortality"><g class="shape" ><rect x="340.000000" y="0.000000" width="131.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="405.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">immortality</text></g><g id="Friday"><g class="shape" ><rect x="531.000000" y="0.000000" width="90.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="576.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Friday</text></g><g id="Monday"><g class="shape" ><rect x="525.000000" y="187.000000" width="101.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="575.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Monday</text></g><g id="Insomnia"><g class="shape" ><rect x="826.000000" y="0.000000" width="110.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="881.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Insomnia</text></g><g id="Sleep"><g class="shape" ><rect x="690.000000" y="187.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="732.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Sleep</text></g><g id="Wake"><g class="shape" ><rect x="835.000000" y="187.000000" width="84.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="877.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Wake</text></g><g id="Dream"><g class="shape" ><rect x="979.000000" y="187.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1024.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Dream</text></g><g id="Listen"><g class="shape" ><rect x="1132.000000" y="0.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1176.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Listen</text></g><g id="Talk"><g class="shape" ><rect x="1138.000000" y="187.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1176.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Talk</text></g><g id="(your love life will be -&gt; happy)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 93.052115 67.543860 C 54.464706 114.400000 44.500000 138.700000 44.500000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1538568695)" /></g><g id="(your love life will be -&gt; harmonious)[0]"><path d="M 155.553649 67.421796 C 202.029412 114.400000 214.000000 138.700000 214.000000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#1538568695)" /></g><g id="(boredom &lt;- immortality)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 405.250000 183.000000 C 405.250000 138.600000 405.250000 114.300000 405.250000 67.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" mask="url(#1538568695)" /></g><g id="(Friday &lt;-&gt; Monday)[0]"><path d="M 575.750000 70.000000 C 575.750000 114.400000 575.750000 138.700000 575.750000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1538568695)" /></g><g id="(Insomnia -- Sleep)[0]"><path d="M 826.806727 67.064343 C 751.500000 114.400000 732.250000 138.700000 732.250000 185.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#1538568695)" /></g><g id="(Insomnia -- Wake)[0]"><path d="M 879.409185 67.997937 C 877.300000 114.400000 876.750000 138.700000 876.750000 185.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#1538568695)" /></g><g id="(Insomnia -- Dream)[0]"><path d="M 935.745859 68.732899 C 1005.711765 114.400000 1024.250000 138.700000 1024.250000 182.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:8;stroke-dasharray:40.000000,35.268560;stroke-dashoffset:-752.685599;animation: dashdraw 17.634280s linear infinite;" mask="url(#1538568695)" /></g><g id="(Listen &lt;-&gt; Talk)[0]"><marker id="mk-3108867711" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 1175.500000 70.000000 C 1175.500000 114.400000 1175.500000 138.700000 1175.500000 183.500000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-3108867711)" marker-end="url(#mk-1565215268)" mask="url(#1538568695)" /><text x="1176.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hear</text></g><mask id="1538568695" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1224" height="257">
 <rect x="-2" y="-2" width="1224" height="257" fill="white"></rect>
 <rect x="1160.000000" y="116.000000" width="32" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/animated/elk/sketch.exp.svg b/e2etests/testdata/stable/animated/elk/sketch.exp.svg
index 1717ec328..867b53751 100644
--- a/e2etests/testdata/stable/animated/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/animated/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="915" height="352" viewBox="10 10 915 352"><rect x="10.000000" y="10.000000" width="915.000000" height="352.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 915 352"><svg id="d2-svg" width="915" height="352" viewBox="10 10 915 352"><rect x="10.000000" y="10.000000" width="915.000000" height="352.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 @keyframes dashdraw {
 	from {
 		stroke-dashoffset: 0;
@@ -30,27 +30,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="your love life will be"><g class="shape" ><rect x="61.000000" y="12.000000" width="187.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="154.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">your love life will be</text></g><g id="happy"><g class="shape" ><rect x="12.000000" y="158.000000" width="89.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">happy</text></g><g id="harmonious"><g class="shape" ><rect x="121.000000" y="158.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="186.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">harmonious</text></g><g id="boredom"><g class="shape" ><rect x="282.000000" y="12.000000" width="108.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="336.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">boredom</text></g><g id="immortality"><g class="shape" ><rect x="271.000000" y="158.000000" width="131.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="336.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">immortality</text></g><g id="Friday"><g class="shape" ><rect x="427.000000" y="12.000000" width="90.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="472.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Friday</text></g><g id="Monday"><g class="shape" ><rect x="422.000000" y="158.000000" width="101.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="472.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Monday</text></g><g id="Insomnia"><g class="shape" ><rect x="635.000000" y="12.000000" width="110.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="690.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Insomnia</text></g><g id="Sleep"><g class="shape" ><rect x="543.000000" y="158.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="585.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Sleep</text></g><g id="Wake"><g class="shape" ><rect x="648.000000" y="158.000000" width="84.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="690.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Wake</text></g><g id="Dream"><g class="shape" ><rect x="752.000000" y="158.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="797.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Dream</text></g><g id="Listen"><g class="shape" ><rect x="835.000000" y="12.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="879.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Listen</text></g><g id="Talk"><g class="shape" ><rect x="841.000000" y="294.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="879.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Talk</text></g><g id="(your love life will be -&gt; happy)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 123.666667 80.000000 L 123.666667 108.000000 S 123.666667 118.000000 113.666667 118.000000 L 66.500000 118.000000 S 56.500000 118.000000 56.500000 128.000000 L 56.500000 154.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#2022414800)" /></g><g id="(your love life will be -&gt; harmonious)[0]"><path d="M 186.000000 80.000000 L 186.000000 154.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#2022414800)" /></g><g id="(boredom &lt;- immortality)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 336.500000 82.000000 L 336.500000 156.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" mask="url(#2022414800)" /></g><g id="(Friday &lt;-&gt; Monday)[0]"><path d="M 472.500000 82.000000 L 472.500000 154.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2022414800)" /></g><g id="(Insomnia -- Sleep)[0]"><path d="M 662.500000 80.000000 L 662.500000 108.000000 S 662.500000 118.000000 652.500000 118.000000 L 595.500000 118.000000 S 585.500000 118.000000 585.500000 128.000000 L 585.500000 156.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#2022414800)" /></g><g id="(Insomnia -- Wake)[0]"><path d="M 690.000000 80.000000 L 690.000000 156.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#2022414800)" /></g><g id="(Insomnia -- Dream)[0]"><path d="M 717.500000 83.000000 L 717.500000 108.000000 S 717.500000 118.000000 727.500000 118.000000 L 787.500000 118.000000 S 797.500000 118.000000 797.500000 128.000000 L 797.500000 153.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:8;stroke-dasharray:40.000000,35.268560;stroke-dashoffset:-752.685599;animation: dashdraw 17.634280s linear infinite;" mask="url(#2022414800)" /></g><g id="(Listen &lt;-&gt; Talk)[0]"><marker id="mk-3108867711" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 879.000000 82.000000 L 879.000000 290.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-3108867711)" marker-end="url(#mk-1565215268)" mask="url(#2022414800)" /><text x="879.000000" y="192.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hear</text></g><mask id="2022414800" maskUnits="userSpaceOnUse" x="10" y="10" width="915" height="352">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="your love life will be"><g class="shape" ><rect x="61.000000" y="12.000000" width="187.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="154.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">your love life will be</text></g><g id="happy"><g class="shape" ><rect x="12.000000" y="158.000000" width="89.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">happy</text></g><g id="harmonious"><g class="shape" ><rect x="121.000000" y="158.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="186.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">harmonious</text></g><g id="boredom"><g class="shape" ><rect x="282.000000" y="12.000000" width="108.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="336.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">boredom</text></g><g id="immortality"><g class="shape" ><rect x="271.000000" y="158.000000" width="131.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="336.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">immortality</text></g><g id="Friday"><g class="shape" ><rect x="427.000000" y="12.000000" width="90.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="472.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Friday</text></g><g id="Monday"><g class="shape" ><rect x="422.000000" y="158.000000" width="101.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="472.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Monday</text></g><g id="Insomnia"><g class="shape" ><rect x="635.000000" y="12.000000" width="110.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="690.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Insomnia</text></g><g id="Sleep"><g class="shape" ><rect x="543.000000" y="158.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="585.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Sleep</text></g><g id="Wake"><g class="shape" ><rect x="648.000000" y="158.000000" width="84.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="690.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Wake</text></g><g id="Dream"><g class="shape" ><rect x="752.000000" y="158.000000" width="91.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="797.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Dream</text></g><g id="Listen"><g class="shape" ><rect x="835.000000" y="12.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="879.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Listen</text></g><g id="Talk"><g class="shape" ><rect x="841.000000" y="294.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="879.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Talk</text></g><g id="(your love life will be -&gt; happy)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 123.666667 80.000000 L 123.666667 108.000000 S 123.666667 118.000000 113.666667 118.000000 L 66.500000 118.000000 S 56.500000 118.000000 56.500000 128.000000 L 56.500000 154.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#2022414800)" /></g><g id="(your love life will be -&gt; harmonious)[0]"><path d="M 186.000000 80.000000 L 186.000000 154.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#2022414800)" /></g><g id="(boredom &lt;- immortality)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 336.500000 82.000000 L 336.500000 156.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" mask="url(#2022414800)" /></g><g id="(Friday &lt;-&gt; Monday)[0]"><path d="M 472.500000 82.000000 L 472.500000 154.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#2022414800)" /></g><g id="(Insomnia -- Sleep)[0]"><path d="M 662.500000 80.000000 L 662.500000 108.000000 S 662.500000 118.000000 652.500000 118.000000 L 595.500000 118.000000 S 585.500000 118.000000 585.500000 128.000000 L 585.500000 156.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#2022414800)" /></g><g id="(Insomnia -- Wake)[0]"><path d="M 690.000000 80.000000 L 690.000000 156.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" mask="url(#2022414800)" /></g><g id="(Insomnia -- Dream)[0]"><path d="M 717.500000 83.000000 L 717.500000 108.000000 S 717.500000 118.000000 727.500000 118.000000 L 787.500000 118.000000 S 797.500000 118.000000 797.500000 128.000000 L 797.500000 153.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:8;stroke-dasharray:40.000000,35.268560;stroke-dashoffset:-752.685599;animation: dashdraw 17.634280s linear infinite;" mask="url(#2022414800)" /></g><g id="(Listen &lt;-&gt; Talk)[0]"><marker id="mk-3108867711" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 879.000000 82.000000 L 879.000000 290.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-3108867711)" marker-end="url(#mk-1565215268)" mask="url(#2022414800)" /><text x="879.000000" y="192.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hear</text></g><mask id="2022414800" maskUnits="userSpaceOnUse" x="10" y="10" width="915" height="352">
 <rect x="10" y="10" width="915" height="352" fill="white"></rect>
 <rect x="863.000000" y="176.000000" width="32" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
index dd47617f9..4cafaed40 100644
--- a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180" height="624" viewBox="-40 -8 180 624"><rect x="-40.000000" y="-8.000000" width="180.000000" height="624.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 180 624"><svg id="d2-svg" width="180" height="624" viewBox="-40 -8 180 624"><rect x="-40.000000" y="-8.000000" width="180.000000" height="624.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="24.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#2bc3d8" class=" fill-B6" style="stroke-width:8;"  rx="10" /></g><text x="50.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="24.000000" y="542.000000" width="53.000000" height="66.000000" stroke="#0db254" class=" fill-B6" style="stroke-width:8;" /></g><text x="50.500000" y="580.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><path d="M 69 431 L 69 366 L 122 366 L 122 431 C 113 417 104 417 96 431 C 87 446 78 446 69 431 Z" stroke="#b2350d" class=" fill-AB4" style="stroke-width:7;" /></g><text x="95.500000" y="399.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="Oval"><g class="shape" ><ellipse rx="50.000000" ry="50.000000" cx="50.000000" cy="216.000000" stroke="#a1a4af" class="shape fill-B6" style="stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-276093939" markerWidth="30.000000" markerHeight="30.000000" refX="9.000000" refY="15.000000" viewBox="0.000000 0.000000 30.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" class="connection fill-B2" stroke-width="6" /> </marker><marker id="mk-3520845909" markerWidth="30.000000" markerHeight="36.000000" refX="21.000000" refY="18.000000" viewBox="0.000000 0.000000 30.000000 36.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" class="connection fill-B2" stroke-width="6" /> </marker><path d="M 13.943485 66.252119 C -27.300000 104.287778 -40.000000 136.000000 -40.000000 166.000000 C -40.000000 196.000000 -40.000000 236.000000 -40.000000 266.000000 C -40.000000 296.000000 -40.000000 333.600000 -40.000000 360.000000 C -40.000000 386.400000 -27.300000 503.712222 13.943485 541.747881" fill="none" class="connection stroke-B2" style="stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-276093939)" marker-end="url(#mk-3520845909)" mask="url(#1167345028)" /></g><g id="(c -&gt; b)[0]"><marker id="mk-2307423140" markerWidth="35.000000" markerHeight="42.000000" refX="24.500000" refY="21.000000" viewBox="0.000000 0.000000 35.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" fill="#20222a" class="connection" stroke-width="7" /> </marker><path d="M 95.000000 440.000000 C 95.000000 480.200000 89.600000 502.000000 74.889659 529.241372" stroke="#20222a" fill="none" class="connection" style="stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#1167345028)" /></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2406817645" markerWidth="72.600000" markerHeight="54.000000" refX="11.850000" refY="27.000000" viewBox="0.000000 0.000000 72.600000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" class="connection stroke-B1 fill-N7" stroke-width="6" /> </marker><marker id="mk-2681561429" markerWidth="66.000000" markerHeight="42.000000" refX="57.000000" refY="21.000000" viewBox="0.000000 0.000000 66.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" class="connection fill-B1" stroke-width="6" /> </marker><path d="M 50.000000 79.000000 C 50.000000 106.000000 50.000000 126.000000 50.000000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2406817645)" marker-end="url(#mk-2681561429)" mask="url(#1167345028)" /><text x="66.000000" y="158.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><g id="(c -- a)[0]"><path d="M 117.229469 359.789482 C 134.800000 326.000000 140.000000 296.000000 140.000000 266.000000 C 140.000000 236.000000 127.400000 104.400000 82.517737 63.079821" fill="none" class="connection stroke-B1" style="stroke-width:7;" mask="url(#1167345028)" /></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 50.000000 272.000000 C 50.000000 306.000000 55.200000 326.000000 73.001207 360.233091" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1167345028)" /></g><mask id="1167345028" maskUnits="userSpaceOnUse" x="-40" y="-8" width="180" height="624">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="24.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#2bc3d8" class=" fill-B6" style="stroke-width:8;"  rx="10" /></g><text x="50.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="24.000000" y="542.000000" width="53.000000" height="66.000000" stroke="#0db254" class=" fill-B6" style="stroke-width:8;" /></g><text x="50.500000" y="580.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><path d="M 69 431 L 69 366 L 122 366 L 122 431 C 113 417 104 417 96 431 C 87 446 78 446 69 431 Z" stroke="#b2350d" class=" fill-AB4" style="stroke-width:7;" /></g><text x="95.500000" y="399.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="Oval"><g class="shape" ><ellipse rx="50.000000" ry="50.000000" cx="50.000000" cy="216.000000" stroke="#a1a4af" class="shape fill-B6" style="stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-276093939" markerWidth="30.000000" markerHeight="30.000000" refX="9.000000" refY="15.000000" viewBox="0.000000 0.000000 30.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" class="connection fill-B2" stroke-width="6" /> </marker><marker id="mk-3520845909" markerWidth="30.000000" markerHeight="36.000000" refX="21.000000" refY="18.000000" viewBox="0.000000 0.000000 30.000000 36.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" class="connection fill-B2" stroke-width="6" /> </marker><path d="M 13.943485 66.252119 C -27.300000 104.287778 -40.000000 136.000000 -40.000000 166.000000 C -40.000000 196.000000 -40.000000 236.000000 -40.000000 266.000000 C -40.000000 296.000000 -40.000000 333.600000 -40.000000 360.000000 C -40.000000 386.400000 -27.300000 503.712222 13.943485 541.747881" fill="none" class="connection stroke-B2" style="stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-276093939)" marker-end="url(#mk-3520845909)" mask="url(#1167345028)" /></g><g id="(c -&gt; b)[0]"><marker id="mk-2307423140" markerWidth="35.000000" markerHeight="42.000000" refX="24.500000" refY="21.000000" viewBox="0.000000 0.000000 35.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" fill="#20222a" class="connection" stroke-width="7" /> </marker><path d="M 95.000000 440.000000 C 95.000000 480.200000 89.600000 502.000000 74.889659 529.241372" stroke="#20222a" fill="none" class="connection" style="stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#1167345028)" /></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2406817645" markerWidth="72.600000" markerHeight="54.000000" refX="11.850000" refY="27.000000" viewBox="0.000000 0.000000 72.600000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" class="connection stroke-B1 fill-N7" stroke-width="6" /> </marker><marker id="mk-2681561429" markerWidth="66.000000" markerHeight="42.000000" refX="57.000000" refY="21.000000" viewBox="0.000000 0.000000 66.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" class="connection fill-B1" stroke-width="6" /> </marker><path d="M 50.000000 79.000000 C 50.000000 106.000000 50.000000 126.000000 50.000000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2406817645)" marker-end="url(#mk-2681561429)" mask="url(#1167345028)" /><text x="66.000000" y="158.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><g id="(c -- a)[0]"><path d="M 117.229469 359.789482 C 134.800000 326.000000 140.000000 296.000000 140.000000 266.000000 C 140.000000 236.000000 127.400000 104.400000 82.517737 63.079821" fill="none" class="connection stroke-B1" style="stroke-width:7;" mask="url(#1167345028)" /></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 50.000000 272.000000 C 50.000000 306.000000 55.200000 326.000000 73.001207 360.233091" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1167345028)" /></g><mask id="1167345028" maskUnits="userSpaceOnUse" x="-40" y="-8" width="180" height="624">
 <rect x="-40" y="-8" width="180" height="624" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
index f9ea3cc93..762cbd221 100644
--- a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145" height="614" viewBox="12 4 145 614"><rect x="12.000000" y="4.000000" width="145.000000" height="614.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 145 614"><svg id="d2-svg" width="145" height="614" viewBox="12 4 145 614"><rect x="12.000000" y="4.000000" width="145.000000" height="614.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="93.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#2bc3d8" class=" fill-B6" style="stroke-width:8;"  rx="10" /></g><text x="119.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="88.000000" y="544.000000" width="53.000000" height="66.000000" stroke="#0db254" class=" fill-B6" style="stroke-width:8;" /></g><text x="114.500000" y="582.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><path d="M 97 453 L 97 388 L 150 388 L 150 453 C 141 439 132 439 124 453 C 115 468 106 468 97 453 Z" stroke="#b2350d" class=" fill-AB4" style="stroke-width:7;" /></g><text x="123.500000" y="421.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="Oval"><g class="shape" ><ellipse rx="50.000000" ry="50.000000" cx="73.000000" cy="258.000000" stroke="#a1a4af" class="shape fill-B6" style="stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-276093939" markerWidth="30.000000" markerHeight="30.000000" refX="9.000000" refY="15.000000" viewBox="0.000000 0.000000 30.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" class="connection fill-B2" stroke-width="6" /> </marker><marker id="mk-3520845909" markerWidth="30.000000" markerHeight="36.000000" refX="21.000000" refY="18.000000" viewBox="0.000000 0.000000 30.000000 36.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" class="connection fill-B2" stroke-width="6" /> </marker><path d="M 106.500000 91.000000 L 106.500000 108.000000 S 106.500000 118.000000 96.500000 118.000000 L 22.000000 118.000000 S 12.000000 118.000000 12.000000 128.000000 L 12.000000 494.000000 S 12.000000 504.000000 22.000000 504.000000 L 96.500000 504.000000 S 106.500000 504.000000 106.500000 514.000000 L 106.500000 531.000000" fill="none" class="connection stroke-B2" style="stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-276093939)" marker-end="url(#mk-3520845909)" mask="url(#637828818)" /></g><g id="(c -&gt; b)[0]"><marker id="mk-2307423140" markerWidth="35.000000" markerHeight="42.000000" refX="24.500000" refY="21.000000" viewBox="0.000000 0.000000 35.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" fill="#20222a" class="connection" stroke-width="7" /> </marker><path d="M 124.012820 459.999988 L 124.140110 529.500024" stroke="#20222a" fill="none" class="connection" style="stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#637828818)" /></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2406817645" markerWidth="72.600000" markerHeight="54.000000" refX="11.850000" refY="27.000000" viewBox="0.000000 0.000000 72.600000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" class="connection stroke-B1 fill-N7" stroke-width="6" /> </marker><marker id="mk-2681561429" markerWidth="66.000000" markerHeight="42.000000" refX="57.000000" refY="21.000000" viewBox="0.000000 0.000000 66.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" class="connection fill-B1" stroke-width="6" /> </marker><path d="M 119.750000 91.000000 L 119.750000 158.000000 S 119.750000 168.000000 109.750000 168.000000 L 83.000000 168.000000 S 73.000000 168.000000 73.000000 178.000000 L 73.000000 196.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2406817645)" marker-end="url(#mk-2681561429)" mask="url(#637828818)" /><text x="89.000000" y="200.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><g id="(c -- a)[0]"><path d="M 133.000000 381.000000 L 133.000000 85.500000" fill="none" class="connection stroke-B1" style="stroke-width:7;" mask="url(#637828818)" /></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 73.000000 314.000000 L 73.000000 338.000000 S 73.000000 348.000000 83.000000 348.000000 L 105.333333 348.000000 S 115.333333 348.000000 115.250003 357.999653 L 115.054165 381.500226" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#637828818)" /></g><mask id="637828818" maskUnits="userSpaceOnUse" x="12" y="4" width="145" height="614">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="93.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#2bc3d8" class=" fill-B6" style="stroke-width:8;"  rx="10" /></g><text x="119.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="88.000000" y="544.000000" width="53.000000" height="66.000000" stroke="#0db254" class=" fill-B6" style="stroke-width:8;" /></g><text x="114.500000" y="582.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><path d="M 97 453 L 97 388 L 150 388 L 150 453 C 141 439 132 439 124 453 C 115 468 106 468 97 453 Z" stroke="#b2350d" class=" fill-AB4" style="stroke-width:7;" /></g><text x="123.500000" y="421.610964" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="Oval"><g class="shape" ><ellipse rx="50.000000" ry="50.000000" cx="73.000000" cy="258.000000" stroke="#a1a4af" class="shape fill-B6" style="stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-276093939" markerWidth="30.000000" markerHeight="30.000000" refX="9.000000" refY="15.000000" viewBox="0.000000 0.000000 30.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" class="connection fill-B2" stroke-width="6" /> </marker><marker id="mk-3520845909" markerWidth="30.000000" markerHeight="36.000000" refX="21.000000" refY="18.000000" viewBox="0.000000 0.000000 30.000000 36.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" class="connection fill-B2" stroke-width="6" /> </marker><path d="M 106.500000 91.000000 L 106.500000 108.000000 S 106.500000 118.000000 96.500000 118.000000 L 22.000000 118.000000 S 12.000000 118.000000 12.000000 128.000000 L 12.000000 494.000000 S 12.000000 504.000000 22.000000 504.000000 L 96.500000 504.000000 S 106.500000 504.000000 106.500000 514.000000 L 106.500000 531.000000" fill="none" class="connection stroke-B2" style="stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-276093939)" marker-end="url(#mk-3520845909)" mask="url(#637828818)" /></g><g id="(c -&gt; b)[0]"><marker id="mk-2307423140" markerWidth="35.000000" markerHeight="42.000000" refX="24.500000" refY="21.000000" viewBox="0.000000 0.000000 35.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" fill="#20222a" class="connection" stroke-width="7" /> </marker><path d="M 124.012820 459.999988 L 124.140110 529.500024" stroke="#20222a" fill="none" class="connection" style="stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#637828818)" /></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2406817645" markerWidth="72.600000" markerHeight="54.000000" refX="11.850000" refY="27.000000" viewBox="0.000000 0.000000 72.600000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" class="connection stroke-B1 fill-N7" stroke-width="6" /> </marker><marker id="mk-2681561429" markerWidth="66.000000" markerHeight="42.000000" refX="57.000000" refY="21.000000" viewBox="0.000000 0.000000 66.000000 42.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" class="connection fill-B1" stroke-width="6" /> </marker><path d="M 119.750000 91.000000 L 119.750000 158.000000 S 119.750000 168.000000 109.750000 168.000000 L 83.000000 168.000000 S 73.000000 168.000000 73.000000 178.000000 L 73.000000 196.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2406817645)" marker-end="url(#mk-2681561429)" mask="url(#637828818)" /><text x="89.000000" y="200.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><g id="(c -- a)[0]"><path d="M 133.000000 381.000000 L 133.000000 85.500000" fill="none" class="connection stroke-B1" style="stroke-width:7;" mask="url(#637828818)" /></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 73.000000 314.000000 L 73.000000 338.000000 S 73.000000 348.000000 83.000000 348.000000 L 105.333333 348.000000 S 115.333333 348.000000 115.250003 357.999653 L 115.054165 381.500226" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#637828818)" /></g><mask id="637828818" maskUnits="userSpaceOnUse" x="12" y="4" width="145" height="614">
 <rect x="12" y="4" width="145" height="614" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
index e1b2cb42f..295fe0c6d 100644
--- a/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="201" height="257" viewBox="0 -2 201 257"><rect x="0.000000" y="-2.000000" width="201.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 201 257"><svg id="d2-svg" width="201" height="257" viewBox="0 -2 201 257"><rect x="0.000000" y="-2.000000" width="201.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="74.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="100.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="74.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="100.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 100.500000 68.000000 C 100.500000 114.400000 100.500000 138.700000 100.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-1565215268)" mask="url(#2295164781)" /><text x="100.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">To err is human, to moo bovine</text><text x="115.000000" y="180.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><mask id="2295164781" maskUnits="userSpaceOnUse" x="0" y="-2" width="201" height="257">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="74.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="100.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="74.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="100.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 100.500000 68.000000 C 100.500000 114.400000 100.500000 138.700000 100.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-1565215268)" mask="url(#2295164781)" /><text x="100.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">To err is human, to moo bovine</text><text x="115.000000" y="180.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><mask id="2295164781" maskUnits="userSpaceOnUse" x="0" y="-2" width="201" height="257">
 <rect x="0" y="-2" width="201" height="257" fill="white"></rect>
 <rect x="0.000000" y="116.000000" width="201" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
index 73d48cd3c..60571418d 100644
--- a/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="201" height="297" viewBox="12 10 201 297"><rect x="12.000000" y="10.000000" width="201.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 201 297"><svg id="d2-svg" width="201" height="297" viewBox="12 10 201 297"><rect x="12.000000" y="10.000000" width="201.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="86.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="86.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 112.500000 80.000000 L 112.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-1565215268)" mask="url(#2672242634)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">To err is human, to moo bovine</text><text x="127.000000" y="231.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><mask id="2672242634" maskUnits="userSpaceOnUse" x="12" y="10" width="201" height="297">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="86.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="86.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1565215268" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 112.500000 80.000000 L 112.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-1565215268)" mask="url(#2672242634)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">To err is human, to moo bovine</text><text x="127.000000" y="231.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">*</text></g><mask id="2672242634" maskUnits="userSpaceOnUse" x="12" y="10" width="201" height="297">
 <rect x="12" y="10" width="201" height="297" fill="white"></rect>
 <rect x="12.000000" y="148.000000" width="201" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg b/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
index 32efd0bd4..c02a7d8a4 100644
--- a/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="568" viewBox="-2 -2 842 568"><rect x="-2.000000" y="-2.000000" width="842.000000" height="568.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 842 568"><svg id="d2-svg" width="842" height="568" viewBox="-2 -2 842 568"><rect x="-2.000000" y="-2.000000" width="842.000000" height="568.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="392.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="418.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="166.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="192.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="614.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="640.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="55.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="82.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="276.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="302.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="501.000000" y="332.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="526.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="727.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="754.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="0.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="113.000000" y="498.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="137.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="222.000000" y="498.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="247.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="332.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="358.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="445.000000" y="498.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="469.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="554.000000" y="498.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="582.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="671.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="697.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="784.000000" y="498.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="811.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 390.372359 43.410361 C 232.450000 101.344309 192.500000 126.000000 192.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(a -&gt; c)[0]"><path d="M 447.122832 43.631806 C 601.250000 101.386005 640.250000 126.000000 640.250000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(b -&gt; d)[0]"><path d="M 164.400869 220.106135 C 98.800000 269.380995 82.000000 292.000000 82.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(b -&gt; e)[0]"><path d="M 220.597823 220.153010 C 286.000000 269.390023 302.750000 292.000000 302.750000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(c -&gt; f)[0]"><path d="M 612.131916 219.427142 C 543.550000 269.250328 526.000000 292.000000 526.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(c -&gt; g)[0]"><path d="M 668.366859 219.471046 C 736.750000 269.258772 754.250000 292.000000 754.250000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(d -&gt; h)[0]"><path d="M 58.822024 399.662558 C 33.186747 438.000000 26.500000 458.000000 26.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(d -&gt; i)[0]"><path d="M 105.177976 399.662558 C 130.813253 438.000000 137.500000 458.000000 137.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(e -&gt; j)[0]"><path d="M 279.469174 399.660244 C 253.716867 438.000000 247.000000 458.000000 247.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(e -&gt; k)[0]"><path d="M 326.030826 399.660244 C 351.783133 438.000000 358.500000 458.000000 358.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(f -&gt; l)[0]"><path d="M 502.410707 399.653297 C 476.307229 438.000000 469.500000 458.000000 469.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(f -&gt; m)[0]"><path d="M 549.589293 399.653297 C 575.692771 438.000000 582.500000 458.000000 582.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(g -&gt; n)[0]"><path d="M 730.557914 399.650980 C 704.337349 438.000000 697.500000 458.000000 697.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(g -&gt; o)[0]"><path d="M 777.942086 399.650980 C 804.162651 438.000000 811.000000 458.000000 811.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><mask id="4231049604" maskUnits="userSpaceOnUse" x="-2" y="-2" width="842" height="568">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="392.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="418.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="166.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="192.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="614.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="640.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="55.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="82.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="276.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="302.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="501.000000" y="332.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="526.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="727.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="754.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="0.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="113.000000" y="498.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="137.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="222.000000" y="498.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="247.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="332.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="358.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="445.000000" y="498.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="469.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="554.000000" y="498.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="582.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="671.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="697.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="784.000000" y="498.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="811.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 390.372359 43.410361 C 232.450000 101.344309 192.500000 126.000000 192.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(a -&gt; c)[0]"><path d="M 447.122832 43.631806 C 601.250000 101.386005 640.250000 126.000000 640.250000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(b -&gt; d)[0]"><path d="M 164.400869 220.106135 C 98.800000 269.380995 82.000000 292.000000 82.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(b -&gt; e)[0]"><path d="M 220.597823 220.153010 C 286.000000 269.390023 302.750000 292.000000 302.750000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(c -&gt; f)[0]"><path d="M 612.131916 219.427142 C 543.550000 269.250328 526.000000 292.000000 526.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(c -&gt; g)[0]"><path d="M 668.366859 219.471046 C 736.750000 269.258772 754.250000 292.000000 754.250000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(d -&gt; h)[0]"><path d="M 58.822024 399.662558 C 33.186747 438.000000 26.500000 458.000000 26.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(d -&gt; i)[0]"><path d="M 105.177976 399.662558 C 130.813253 438.000000 137.500000 458.000000 137.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(e -&gt; j)[0]"><path d="M 279.469174 399.660244 C 253.716867 438.000000 247.000000 458.000000 247.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(e -&gt; k)[0]"><path d="M 326.030826 399.660244 C 351.783133 438.000000 358.500000 458.000000 358.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(f -&gt; l)[0]"><path d="M 502.410707 399.653297 C 476.307229 438.000000 469.500000 458.000000 469.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(f -&gt; m)[0]"><path d="M 549.589293 399.653297 C 575.692771 438.000000 582.500000 458.000000 582.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(g -&gt; n)[0]"><path d="M 730.557914 399.650980 C 704.337349 438.000000 697.500000 458.000000 697.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><g id="(g -&gt; o)[0]"><path d="M 777.942086 399.650980 C 804.162651 438.000000 811.000000 458.000000 811.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4231049604)" /></g><mask id="4231049604" maskUnits="userSpaceOnUse" x="-2" y="-2" width="842" height="568">
 <rect x="-2" y="-2" width="842" height="568" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg b/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
index 976858193..7d461d5bc 100644
--- a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="562" height="508" viewBox="10 10 562 508"><rect x="10.000000" y="10.000000" width="562.000000" height="508.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 562 508"><svg id="d2-svg" width="562" height="508" viewBox="10 10 562 508"><rect x="10.000000" y="10.000000" width="562.000000" height="508.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="38.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="64.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="29.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="338.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="20.000000" y="304.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="47.000000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="161.000000" y="304.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="187.500000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="304.000000" y="304.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="329.500000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="451.000000" y="304.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="478.000000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="12.000000" y="450.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="85.000000" y="450.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="109.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="154.000000" y="450.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="224.000000" y="450.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="250.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="297.000000" y="450.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="321.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="366.000000" y="450.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="394.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="443.000000" y="450.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="469.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="516.000000" y="450.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="543.000000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 56.333333 80.000000 L 56.333333 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(a -&gt; c)[0]"><path d="M 74.000000 80.000000 L 74.000000 108.000000 S 74.000000 118.000000 84.000000 118.000000 L 328.833333 118.000000 S 338.833333 118.000000 338.833333 128.000000 L 338.833333 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(b -&gt; d)[0]"><path d="M 47.500000 226.000000 L 47.500000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(b -&gt; e)[0]"><path d="M 65.166667 226.000000 L 65.166667 254.000000 S 65.166667 264.000000 75.166667 264.000000 L 177.833333 264.000000 S 187.833333 264.000000 187.833333 274.000000 L 187.833333 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(c -&gt; f)[0]"><path d="M 330.000000 226.000000 L 330.000000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(c -&gt; g)[0]"><path d="M 347.666667 226.000000 L 347.666667 254.000000 S 347.666667 264.000000 357.666667 264.000000 L 468.500000 264.000000 S 478.500000 264.000000 478.500000 274.000000 L 478.500000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(d -&gt; h)[0]"><path d="M 38.500000 372.000000 L 38.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(d -&gt; i)[0]"><path d="M 56.500000 372.000000 L 56.500000 400.000000 S 56.500000 410.000000 66.500000 410.000000 L 99.500000 410.000000 S 109.500000 410.000000 109.500000 420.000000 L 109.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(e -&gt; j)[0]"><path d="M 179.000000 372.000000 L 179.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(e -&gt; k)[0]"><path d="M 196.666667 372.000000 L 196.666667 400.000000 S 196.666667 410.000000 206.666667 410.000000 L 240.500000 410.000000 S 250.500000 410.000000 250.500000 420.000000 L 250.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(f -&gt; l)[0]"><path d="M 321.500000 372.000000 L 321.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(f -&gt; m)[0]"><path d="M 338.500000 372.000000 L 338.500000 400.000000 S 338.500000 410.000000 348.500000 410.000000 L 384.500000 410.000000 S 394.500000 410.000000 394.500000 420.000000 L 394.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(g -&gt; n)[0]"><path d="M 469.500000 372.000000 L 469.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(g -&gt; o)[0]"><path d="M 487.500000 372.000000 L 487.500000 400.000000 S 487.500000 410.000000 497.500000 410.000000 L 533.000000 410.000000 S 543.000000 410.000000 543.000000 420.000000 L 543.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><mask id="3881772155" maskUnits="userSpaceOnUse" x="10" y="10" width="562" height="508">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="38.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="64.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="29.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="338.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="20.000000" y="304.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="47.000000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="161.000000" y="304.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="187.500000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="304.000000" y="304.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="329.500000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="451.000000" y="304.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="478.000000" y="342.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="12.000000" y="450.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="85.000000" y="450.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="109.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="154.000000" y="450.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="224.000000" y="450.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="250.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="297.000000" y="450.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="321.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="366.000000" y="450.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="394.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="443.000000" y="450.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="469.500000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="516.000000" y="450.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="543.000000" y="488.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 56.333333 80.000000 L 56.333333 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(a -&gt; c)[0]"><path d="M 74.000000 80.000000 L 74.000000 108.000000 S 74.000000 118.000000 84.000000 118.000000 L 328.833333 118.000000 S 338.833333 118.000000 338.833333 128.000000 L 338.833333 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(b -&gt; d)[0]"><path d="M 47.500000 226.000000 L 47.500000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(b -&gt; e)[0]"><path d="M 65.166667 226.000000 L 65.166667 254.000000 S 65.166667 264.000000 75.166667 264.000000 L 177.833333 264.000000 S 187.833333 264.000000 187.833333 274.000000 L 187.833333 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(c -&gt; f)[0]"><path d="M 330.000000 226.000000 L 330.000000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(c -&gt; g)[0]"><path d="M 347.666667 226.000000 L 347.666667 254.000000 S 347.666667 264.000000 357.666667 264.000000 L 468.500000 264.000000 S 478.500000 264.000000 478.500000 274.000000 L 478.500000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(d -&gt; h)[0]"><path d="M 38.500000 372.000000 L 38.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(d -&gt; i)[0]"><path d="M 56.500000 372.000000 L 56.500000 400.000000 S 56.500000 410.000000 66.500000 410.000000 L 99.500000 410.000000 S 109.500000 410.000000 109.500000 420.000000 L 109.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(e -&gt; j)[0]"><path d="M 179.000000 372.000000 L 179.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(e -&gt; k)[0]"><path d="M 196.666667 372.000000 L 196.666667 400.000000 S 196.666667 410.000000 206.666667 410.000000 L 240.500000 410.000000 S 250.500000 410.000000 250.500000 420.000000 L 250.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(f -&gt; l)[0]"><path d="M 321.500000 372.000000 L 321.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(f -&gt; m)[0]"><path d="M 338.500000 372.000000 L 338.500000 400.000000 S 338.500000 410.000000 348.500000 410.000000 L 384.500000 410.000000 S 394.500000 410.000000 394.500000 420.000000 L 394.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(g -&gt; n)[0]"><path d="M 469.500000 372.000000 L 469.500000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><g id="(g -&gt; o)[0]"><path d="M 487.500000 372.000000 L 487.500000 400.000000 S 487.500000 410.000000 497.500000 410.000000 L 533.000000 410.000000 S 543.000000 410.000000 543.000000 420.000000 L 543.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3881772155)" /></g><mask id="3881772155" maskUnits="userSpaceOnUse" x="10" y="10" width="562" height="508">
 <rect x="10" y="10" width="562" height="508" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/border-radius/dagre/sketch.exp.svg b/e2etests/testdata/stable/border-radius/dagre/sketch.exp.svg
index 7a098e329..f6e0011b7 100644
--- a/e2etests/testdata/stable/border-radius/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/border-radius/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="686" height="85" viewBox="-2 -17 686 85"><rect x="-2.000000" y="-17.000000" width="686.000000" height="85.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 686 85"><svg id="d2-svg" width="686" height="85" viewBox="-2 -17 686 85"><rect x="-2.000000" y="-17.000000" width="686.000000" height="85.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,29 +17,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="4" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="113.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="10" /></g><text x="140.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="237.000000" y="-10.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="227.000000" y="0.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="283.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="399.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="404.000000" y="5.000000" width="84.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="446.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="553" y="-15" width="129" height="81">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="4" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="113.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="10" /></g><text x="140.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="237.000000" y="-10.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="227.000000" y="0.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="283.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="399.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="404.000000" y="5.000000" width="84.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="446.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="553" y="-15" width="129" height="81">
 <rect x="553" y="-15" width="129" height="81" fill="white"></rect>
 <path d="M553,0L568,-15L682,-15L682,51L667,66L553,66L553,0L667,0L667,66M667,0L682,-15" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="553.000000" y="0.000000" width="114.000000" height="66.000000" mask="url(#border-mask-three-dee)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-three-dee)" points="553,0 568,-15 682,-15 682,51 667,66 667,0" class=" fill-B5" style="stroke-width:2;" /><path d="M553,0 L568,-15 L682,-15 L682,51 L667,66 L553,66 L553,0 L667,0 L667,66 M667,0 L682,-15" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="610.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">three-dee</text></g><mask id="441686790" maskUnits="userSpaceOnUse" x="-2" y="-17" width="686" height="85">
 <rect x="-2" y="-17" width="686" height="85" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/border-radius/elk/sketch.exp.svg b/e2etests/testdata/stable/border-radius/elk/sketch.exp.svg
index 1b3b543d4..61c73a00b 100644
--- a/e2etests/testdata/stable/border-radius/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/border-radius/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="526" height="85" viewBox="10 -5 526 85"><rect x="10.000000" y="-5.000000" width="526.000000" height="85.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 526 85"><svg id="d2-svg" width="526" height="85" viewBox="10 -5 526 85"><rect x="10.000000" y="-5.000000" width="526.000000" height="85.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,29 +17,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="4" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="85.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="10" /></g><text x="112.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="169.000000" y="2.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="159.000000" y="12.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="215.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="291.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="296.000000" y="17.000000" width="84.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="338.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="405" y="-3" width="129" height="81">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="4" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="85.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="10" /></g><text x="112.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="169.000000" y="2.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="159.000000" y="12.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="215.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="291.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /><rect x="296.000000" y="17.000000" width="84.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;"  rx="6" /></g><text x="338.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="405" y="-3" width="129" height="81">
 <rect x="405" y="-3" width="129" height="81" fill="white"></rect>
 <path d="M405,12L420,-3L534,-3L534,63L519,78L405,78L405,12L519,12L519,78M519,12L534,-3" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="405.000000" y="12.000000" width="114.000000" height="66.000000" mask="url(#border-mask-three-dee)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-three-dee)" points="405,12 420,-3 534,-3 534,63 519,78 519,12" class=" fill-B5" style="stroke-width:2;" /><path d="M405,12 L420,-3 L534,-3 L534,63 L519,78 L405,78 L405,12 L519,12 L519,78 M519,12 L534,-3" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="462.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">three-dee</text></g><mask id="2541858325" maskUnits="userSpaceOnUse" x="10" y="-5" width="526" height="85">
 <rect x="10" y="-5" width="526" height="85" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
index 0634ad265..3dc756063 100644
--- a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="742" height="1523" viewBox="-2 0 742 1523"><rect x="-2.000000" y="0.000000" width="742.000000" height="1523.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 742 1523"><svg id="d2-svg" width="742" height="1523" viewBox="-2 0 742 1523"><rect x="-2.000000" y="0.000000" width="742.000000" height="1523.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -803,4 +783,4 @@
 <rect x="393.000000" y="411.000000" width="16" height="21" fill="black"></rect>
 <rect x="368.000000" y="735.000000" width="16" height="21" fill="black"></rect>
 <rect x="292.000000" y="608.000000" width="16" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
index 1f8677a7a..f1650f706 100644
--- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="698" height="1966" viewBox="10 10 698 1966"><rect x="10.000000" y="10.000000" width="698.000000" height="1966.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 698 1966"><svg id="d2-svg" width="698" height="1966" viewBox="10 10 698 1966"><rect x="10.000000" y="10.000000" width="698.000000" height="1966.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -803,4 +783,4 @@
 <rect x="304.000000" y="546.000000" width="16" height="21" fill="black"></rect>
 <rect x="612.000000" y="1248.000000" width="16" height="21" fill="black"></rect>
 <rect x="639.000000" y="1763.000000" width="16" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg
index 21e3c96b0..64c043a14 100644
--- a/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="179" height="257" viewBox="-2 -2 179 257"><rect x="-2.000000" y="-2.000000" width="179.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 179 257"><svg id="d2-svg" width="179" height="257" viewBox="-2 -2 179 257"><rect x="-2.000000" y="-2.000000" width="179.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,28 +24,8 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 26.500000 70.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#4111664628)" /><text x="27.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 70.000000 C 140.000000 114.400000 140.000000 138.700000 140.000000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#4111664628)" /><text x="140.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="4111664628" maskUnits="userSpaceOnUse" x="-2" y="-2" width="179" height="257">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 26.500000 70.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#4111664628)" /><text x="27.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 70.000000 C 140.000000 114.400000 140.000000 138.700000 140.000000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#4111664628)" /><text x="140.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="4111664628" maskUnits="userSpaceOnUse" x="-2" y="-2" width="179" height="257">
 <rect x="-2" y="-2" width="179" height="257" fill="white"></rect>
 <rect x="9.000000" y="116.000000" width="36" height="21" fill="black"></rect>
 <rect x="104.000000" y="116.000000" width="73" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg b/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg
index f89071527..f3aabe5d7 100644
--- a/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="139" height="297" viewBox="10 10 139 297"><rect x="10.000000" y="10.000000" width="139.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 139 297"><svg id="d2-svg" width="139" height="297" viewBox="10 10 139 297"><rect x="10.000000" y="10.000000" width="139.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,28 +24,8 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#72472197)" /><text x="39.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#72472197)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="72472197" maskUnits="userSpaceOnUse" x="10" y="10" width="139" height="297">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#72472197)" /><text x="39.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#72472197)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="72472197" maskUnits="userSpaceOnUse" x="10" y="10" width="139" height="297">
 <rect x="10" y="10" width="139" height="297" fill="white"></rect>
 <rect x="21.000000" y="148.000000" width="36" height="21" fill="black"></rect>
 <rect x="76.000000" y="148.000000" width="73" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg b/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
index 19bbefe39..39e677006 100644
--- a/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="402" viewBox="-2 -2 57 402"><rect x="-2.000000" y="-2.000000" width="57.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 402"><svg id="d2-svg" width="57" height="402" viewBox="-2 -2 57 402"><rect x="-2.000000" y="-2.000000" width="57.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 22.284863 67.985640 C 17.704819 106.000000 17.700000 126.000000 22.023419 162.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><g id="(b -&gt; c)[0]"><path d="M 22.284863 233.985640 C 17.704819 272.000000 17.700000 292.000000 22.023419 328.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><g id="(c -&gt; b)[0]"><path d="M 30.715137 330.014360 C 35.295181 292.000000 35.300000 272.000000 30.976581 235.971507" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><g id="(b -&gt; a)[0]"><path d="M 30.715137 164.014360 C 35.295181 126.000000 35.300000 106.000000 30.976581 69.971507" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><mask id="3848622349" maskUnits="userSpaceOnUse" x="-2" y="-2" width="57" height="402">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 22.284863 67.985640 C 17.704819 106.000000 17.700000 126.000000 22.023419 162.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><g id="(b -&gt; c)[0]"><path d="M 22.284863 233.985640 C 17.704819 272.000000 17.700000 292.000000 22.023419 328.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><g id="(c -&gt; b)[0]"><path d="M 30.715137 330.014360 C 35.295181 292.000000 35.300000 272.000000 30.976581 235.971507" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><g id="(b -&gt; a)[0]"><path d="M 30.715137 164.014360 C 35.295181 126.000000 35.300000 106.000000 30.976581 69.971507" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3848622349)" /></g><mask id="3848622349" maskUnits="userSpaceOnUse" x="-2" y="-2" width="57" height="402">
 <rect x="-2" y="-2" width="57" height="402" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg b/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
index 505093a2b..ed6b28bf6 100644
--- a/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="342" viewBox="10 10 57 342"><rect x="10.000000" y="10.000000" width="57.000000" height="342.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 342"><svg id="d2-svg" width="57" height="342" viewBox="10 10 57 342"><rect x="10.000000" y="10.000000" width="57.000000" height="342.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="12.000000" y="284.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 29.666667 80.000000 L 29.666667 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><g id="(b -&gt; c)[0]"><path d="M 29.666667 216.000000 L 29.666667 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><g id="(c -&gt; b)[0]"><path d="M 47.333333 282.000000 L 47.333333 218.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><g id="(b -&gt; a)[0]"><path d="M 47.333333 146.000000 L 47.333333 82.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><mask id="1256731061" maskUnits="userSpaceOnUse" x="10" y="10" width="57" height="342">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="12.000000" y="284.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 29.666667 80.000000 L 29.666667 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><g id="(b -&gt; c)[0]"><path d="M 29.666667 216.000000 L 29.666667 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><g id="(c -&gt; b)[0]"><path d="M 47.333333 282.000000 L 47.333333 218.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><g id="(b -&gt; a)[0]"><path d="M 47.333333 146.000000 L 47.333333 82.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1256731061)" /></g><mask id="1256731061" maskUnits="userSpaceOnUse" x="10" y="10" width="57" height="342">
 <rect x="10" y="10" width="57" height="342" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/class/dagre/sketch.exp.svg b/e2etests/testdata/stable/class/dagre/sketch.exp.svg
index fe9a49453..b762ce05c 100644
--- a/e2etests/testdata/stable/class/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/class/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426" height="372" viewBox="-2 -2 426 372"><rect x="-2.000000" y="-2.000000" width="426.000000" height="372.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 426 372"><svg id="d2-svg" width="426" height="372" viewBox="-2 -2 426 372"><rect x="-2.000000" y="-2.000000" width="426.000000" height="372.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="manager"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="211.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="3945613123" maskUnits="userSpaceOnUse" x="-2" y="-2" width="426" height="372">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="manager"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="211.000000" y="53.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="3945613123" maskUnits="userSpaceOnUse" x="-2" y="-2" width="426" height="372">
 <rect x="-2" y="-2" width="426" height="372" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/class/elk/sketch.exp.svg b/e2etests/testdata/stable/class/elk/sketch.exp.svg
index a9b4ffe39..70d190814 100644
--- a/e2etests/testdata/stable/class/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/class/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426" height="372" viewBox="10 10 426 372"><rect x="10.000000" y="10.000000" width="426.000000" height="372.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 426 372"><svg id="d2-svg" width="426" height="372" viewBox="10 10 426 372"><rect x="10.000000" y="10.000000" width="426.000000" height="372.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-mono {
 	font-family: "font-mono";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="manager"><g class="shape" ><rect x="12.000000" y="12.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="223.000000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="414.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="414.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="224.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="224.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="414.000000" y="224.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="434.000000" y1="242.000000" y2="242.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="270.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="270.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="414.000000" y="270.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="316.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="316.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="414.000000" y="316.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="362.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="362.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="414.000000" y="362.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="444538747" maskUnits="userSpaceOnUse" x="10" y="10" width="426" height="372">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="manager"><g class="shape" ><rect x="12.000000" y="12.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="223.000000" y="65.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="414.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="414.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="224.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="224.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="414.000000" y="224.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="434.000000" y1="242.000000" y2="242.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="270.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="270.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="414.000000" y="270.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="316.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="316.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="414.000000" y="316.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="362.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="362.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="414.000000" y="362.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><mask id="444538747" maskUnits="userSpaceOnUse" x="10" y="10" width="426" height="372">
 <rect x="10" y="10" width="426" height="372" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
index 31dcf389d..f9c0dd2b2 100644
--- a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="759" height="502" viewBox="-2 -2 759 502"><rect x="-2.000000" y="-2.000000" width="759.000000" height="502.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 759 502"><svg id="d2-svg" width="759" height="502" viewBox="-2 -2 759 502"><rect x="-2.000000" y="-2.000000" width="759.000000" height="502.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -52,27 +52,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hey"><g class="shape" ></g><g transform="translate(0.000000 166.000000)"><rect width="755.000000" height="166.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">//&#160;RegisterHash&#160;registers&#160;a&#160;function&#160;that&#160;returns&#160;a&#160;new&#160;instance&#160;of&#160;the&#160;given
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="hey"><g class="shape" ></g><g transform="translate(0.000000 166.000000)"><rect width="755.000000" height="166.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">//&#160;RegisterHash&#160;registers&#160;a&#160;function&#160;that&#160;returns&#160;a&#160;new&#160;instance&#160;of&#160;the&#160;given
 </tspan></text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic"></tspan><tspan fill="#999988" class="text-mono-italic">//&#160;hash&#160;function.&#160;This&#160;is&#160;intended&#160;to&#160;be&#160;called&#160;from&#160;the&#160;init&#160;function&#160;in
 </tspan></text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic"></tspan><tspan fill="#999988" class="text-mono-italic">//&#160;packages&#160;that&#160;implement&#160;hash&#160;functions.
 </tspan></text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic"></tspan><tspan fill="#000000" class="text-mono-bold">func</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">RegisterHash</tspan>(h&#160;Hash,&#160;f&#160;<tspan fill="#000000" class="text-mono-bold">func</tspan>()&#160;hash.Hash)&#160;{
@@ -83,4 +63,4 @@
 </text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="351.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="377.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="351.000000" y="432.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="378.000000" y="470.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 377.500000 68.000000 C 377.500000 106.000000 377.500000 126.000000 377.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#479302764)" /></g><g id="(hey -&gt; y)[0]"><path d="M 377.500000 334.000000 C 377.500000 372.000000 377.500000 392.000000 377.500000 428.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#479302764)" /></g><mask id="479302764" maskUnits="userSpaceOnUse" x="-2" y="-2" width="759" height="502">
 <rect x="-2" y="-2" width="759" height="502" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
index 685d29276..ac9819407 100644
--- a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="759" height="442" viewBox="10 10 759 442"><rect x="10.000000" y="10.000000" width="759.000000" height="442.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 759 442"><svg id="d2-svg" width="759" height="442" viewBox="10 10 759 442"><rect x="10.000000" y="10.000000" width="759.000000" height="442.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -52,27 +52,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hey"><g class="shape" ></g><g transform="translate(12.000000 148.000000)"><rect width="755.000000" height="166.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">//&#160;RegisterHash&#160;registers&#160;a&#160;function&#160;that&#160;returns&#160;a&#160;new&#160;instance&#160;of&#160;the&#160;given
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="hey"><g class="shape" ></g><g transform="translate(12.000000 148.000000)"><rect width="755.000000" height="166.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic">//&#160;RegisterHash&#160;registers&#160;a&#160;function&#160;that&#160;returns&#160;a&#160;new&#160;instance&#160;of&#160;the&#160;given
 </tspan></text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic"></tspan><tspan fill="#999988" class="text-mono-italic">//&#160;hash&#160;function.&#160;This&#160;is&#160;intended&#160;to&#160;be&#160;called&#160;from&#160;the&#160;init&#160;function&#160;in
 </tspan></text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic"></tspan><tspan fill="#999988" class="text-mono-italic">//&#160;packages&#160;that&#160;implement&#160;hash&#160;functions.
 </tspan></text><text class="text-mono" x="0" y="4.000000em" xml:space="preserve"><tspan fill="#999988" class="text-mono-italic"></tspan><tspan fill="#000000" class="text-mono-bold">func</tspan>&#160;<tspan fill="#990000" class="text-mono-bold">RegisterHash</tspan>(h&#160;Hash,&#160;f&#160;<tspan fill="#000000" class="text-mono-bold">func</tspan>()&#160;hash.Hash)&#160;{
@@ -83,4 +63,4 @@
 </text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="363.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="389.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="362.000000" y="384.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="389.000000" y="422.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 389.500000 80.000000 L 389.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#460777342)" /></g><g id="(hey -&gt; y)[0]"><path d="M 389.500000 316.000000 L 389.500000 380.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#460777342)" /></g><mask id="460777342" maskUnits="userSpaceOnUse" x="10" y="10" width="759" height="442">
 <rect x="10" y="10" width="759" height="442" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/complex-layers/dagre/sketch.exp.svg b/e2etests/testdata/stable/complex-layers/dagre/sketch.exp.svg
index 286ae7750..23b001965 100644
--- a/e2etests/testdata/stable/complex-layers/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/complex-layers/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="396" height="70" viewBox="-2 -2 396 70"><rect x="-2.000000" y="-2.000000" width="396.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 396 70"><svg id="d2-svg" width="396" height="70" viewBox="-2 -2 396 70"><rect x="-2.000000" y="-2.000000" width="396.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="window"><g class="shape" ><rect x="0.000000" y="0.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="5.000000" y="5.000000" width="93.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="51.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="163.000000" y="0.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="200.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="298.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="3292965392" maskUnits="userSpaceOnUse" x="-2" y="-2" width="396" height="70">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="window"><g class="shape" ><rect x="0.000000" y="0.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="5.000000" y="5.000000" width="93.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="51.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="163.000000" y="0.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="200.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="298.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="3292965392" maskUnits="userSpaceOnUse" x="-2" y="-2" width="396" height="70">
 <rect x="-2" y="-2" width="396" height="70" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/complex-layers/elk/sketch.exp.svg b/e2etests/testdata/stable/complex-layers/elk/sketch.exp.svg
index f5821340c..a13907c74 100644
--- a/e2etests/testdata/stable/complex-layers/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/complex-layers/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="316" height="70" viewBox="10 10 316 70"><rect x="10.000000" y="10.000000" width="316.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 316 70"><svg id="d2-svg" width="316" height="70" viewBox="10 10 316 70"><rect x="10.000000" y="10.000000" width="316.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="window"><g class="shape" ><rect x="12.000000" y="12.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="17.000000" y="17.000000" width="93.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="63.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="135.000000" y="12.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="230.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="277.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="309825249" maskUnits="userSpaceOnUse" x="10" y="10" width="316" height="70">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="window"><g class="shape" ><rect x="12.000000" y="12.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="17.000000" y="17.000000" width="93.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="63.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="135.000000" y="12.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="230.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="277.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="309825249" maskUnits="userSpaceOnUse" x="10" y="10" width="316" height="70">
 <rect x="10" y="10" width="316" height="70" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
index e541c75ee..acc25d54a 100644
--- a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="178" height="800" viewBox="-2 0 178 800"><rect x="-2.000000" y="0.000000" width="178.000000" height="800.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 178 800"><svg id="d2-svg" width="178" height="800" viewBox="-2 0 178 800"><rect x="-2.000000" y="0.000000" width="178.000000" height="800.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="21.000000" y="41.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="87.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="20.000000" y="307.000000" width="134.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="87.000000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="f"><g class="shape" ><rect x="0.000000" y="573.000000" width="174.000000" height="225.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="87.000000" y="560.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">f</text></g><g id="a.b"><g class="shape" ><rect x="61.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="87.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="60.000000" y="336.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="87.000000" y="374.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f.h"><g class="shape" ><rect x="20.000000" y="638.000000" width="134.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="87.000000" y="626.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="f.h.g"><g class="shape" ><rect x="60.000000" y="670.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.000000" y="708.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 87.000000 138.500000 C 87.000000 160.100000 87.000000 176.000000 87.000000 191.000000 C 87.000000 206.000000 87.000000 280.100000 87.000000 332.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1586927480)" /></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 87.000000 404.500000 C 87.000000 426.100000 87.000000 442.000000 87.000000 457.000000 C 87.000000 472.000000 87.000000 492.000000 87.000000 507.000000 C 87.000000 522.000000 87.000000 599.700000 87.000000 666.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1586927480)" /></g><mask id="1586927480" maskUnits="userSpaceOnUse" x="-2" y="0" width="178" height="800">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="21.000000" y="41.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="87.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="20.000000" y="307.000000" width="134.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="87.000000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="f"><g class="shape" ><rect x="0.000000" y="573.000000" width="174.000000" height="225.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="87.000000" y="560.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">f</text></g><g id="a.b"><g class="shape" ><rect x="61.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="87.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="60.000000" y="336.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="87.000000" y="374.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f.h"><g class="shape" ><rect x="20.000000" y="638.000000" width="134.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="87.000000" y="626.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="f.h.g"><g class="shape" ><rect x="60.000000" y="670.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.000000" y="708.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 87.000000 138.500000 C 87.000000 160.100000 87.000000 176.000000 87.000000 191.000000 C 87.000000 206.000000 87.000000 280.100000 87.000000 332.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1586927480)" /></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 87.000000 404.500000 C 87.000000 426.100000 87.000000 442.000000 87.000000 457.000000 C 87.000000 472.000000 87.000000 492.000000 87.000000 507.000000 C 87.000000 522.000000 87.000000 599.700000 87.000000 666.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1586927480)" /></g><mask id="1586927480" maskUnits="userSpaceOnUse" x="-2" y="0" width="178" height="800">
 <rect x="-2" y="0" width="178" height="800" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg b/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
index bc0dd093e..32c04a9e8 100644
--- a/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258" height="767" viewBox="10 10 258 767"><rect x="10.000000" y="10.000000" width="258.000000" height="767.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 258 767"><svg id="d2-svg" width="258" height="767" viewBox="10 10 258 767"><rect x="10.000000" y="10.000000" width="258.000000" height="767.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="62.000000" y="12.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="138.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="62.000000" y="258.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="139.000000" y="291.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="f"><g class="shape" ><rect x="12.000000" y="504.000000" width="254.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="139.000000" y="537.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">f</text></g><g id="a.b"><g class="shape" ><rect x="112.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="112.000000" y="308.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="346.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f.h"><g class="shape" ><rect x="62.000000" y="559.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="588.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="f.h.g"><g class="shape" ><rect x="112.000000" y="609.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.000000" y="647.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 139.000000 130.000000 L 139.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3766656527)" /></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 139.000000 376.000000 L 139.000000 605.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3766656527)" /></g><mask id="3766656527" maskUnits="userSpaceOnUse" x="10" y="10" width="258" height="767">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="62.000000" y="12.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="138.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="62.000000" y="258.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="139.000000" y="291.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">c</text></g><g id="f"><g class="shape" ><rect x="12.000000" y="504.000000" width="254.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="139.000000" y="537.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">f</text></g><g id="a.b"><g class="shape" ><rect x="112.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c.d"><g class="shape" ><rect x="112.000000" y="308.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="346.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f.h"><g class="shape" ><rect x="62.000000" y="559.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="588.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="f.h.g"><g class="shape" ><rect x="112.000000" y="609.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.000000" y="647.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 139.000000 130.000000 L 139.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3766656527)" /></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 139.000000 376.000000 L 139.000000 605.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3766656527)" /></g><mask id="3766656527" maskUnits="userSpaceOnUse" x="10" y="10" width="258" height="767">
 <rect x="10" y="10" width="258" height="767" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg b/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
index 37284bd19..c01c7fefe 100644
--- a/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1253" height="428" viewBox="-573 -43 1253 428"><rect x="-573.000000" y="-43.000000" width="1253.000000" height="428.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1253 428"><svg id="d2-svg" width="1253" height="428" viewBox="-573 -43 1253 428"><rect x="-573.000000" y="-43.000000" width="1253.000000" height="428.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -792,4 +772,4 @@
 </div></foreignObject></g></g><g id="Joe"><g class="shape" ><path d="M -464 149 H -565 V 148 C -565 137 -554 126 -536 121 C -546 117 -552 111 -552 104 C -552 92 -535 82 -515 82 C -494 82 -478 92 -478 104 C -478 111 -484 118 -493 122 C -476 127 -464 137 -464 149 V 150 H -464 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="-514.500000" y="121.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Joe</text></g><g id="Donald"><g class="shape" ><path d="M 678 169 H 518 V 167 C 518 149 536 132 563 124 C 548 119 539 108 539 97 C 539 78 565 62 598 62 C 631 62 657 78 657 97 C 657 108 648 119 633 125 C 661 133 678 149 678 168 V 169 H 678 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="598.000000" y="121.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Donald</text></g><g id="i am top left"><g class="shape" ></g><text x="-504.000000" y="-25.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top left</text></g><g id="i am top right"><g class="shape" ></g><text x="563.000000" y="-25.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top right</text></g><g id="i am bottom left"><g class="shape" ></g><text x="-517.500000" y="268.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom left</text></g><g id="i am bottom right"><g class="shape" ></g><text x="576.500000" y="268.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom right</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2195788380)" /></g><mask id="2195788380" maskUnits="userSpaceOnUse" x="-573" y="-43" width="1253" height="428">
 <rect x="-573" y="-43" width="1253" height="428" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg b/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
index eb4decb62..ab06dd701 100644
--- a/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1253" height="398" viewBox="-561 -31 1253 398"><rect x="-561.000000" y="-31.000000" width="1253.000000" height="398.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1253 398"><svg id="d2-svg" width="1253" height="398" viewBox="-561 -31 1253 398"><rect x="-561.000000" y="-31.000000" width="1253.000000" height="398.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -792,4 +772,4 @@
 </div></foreignObject></g></g><g id="Joe"><g class="shape" ><path d="M -452 146 H -553 V 145 C -553 134 -542 123 -524 118 C -534 114 -540 108 -540 101 C -540 89 -523 79 -503 79 C -482 79 -466 89 -466 101 C -466 108 -472 115 -481 119 C -464 124 -452 134 -452 146 V 147 H -452 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="-502.500000" y="118.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Joe</text></g><g id="Donald"><g class="shape" ><path d="M 690 166 H 530 V 164 C 530 146 548 129 575 121 C 560 116 551 105 551 94 C 551 75 577 59 610 59 C 643 59 669 75 669 94 C 669 105 660 116 645 122 C 673 130 690 146 690 165 V 166 H 690 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="610.000000" y="118.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Donald</text></g><g id="i am top left"><g class="shape" ></g><text x="-492.000000" y="-13.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top left</text></g><g id="i am top right"><g class="shape" ></g><text x="575.000000" y="-13.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top right</text></g><g id="i am bottom left"><g class="shape" ></g><text x="-505.500000" y="250.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom left</text></g><g id="i am bottom right"><g class="shape" ></g><text x="588.500000" y="250.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom right</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 39.000000 80.000000 L 39.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#842433308)" /></g><mask id="842433308" maskUnits="userSpaceOnUse" x="-561" y="-31" width="1253" height="398">
 <rect x="-561" y="-31" width="1253" height="398" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg b/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
index 58c857cfe..42ec48c89 100644
--- a/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="335" height="639" viewBox="-2 -73 335 639"><rect x="-2.000000" y="-73.000000" width="335.000000" height="639.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 335 639"><svg id="d2-svg" width="335" height="639" viewBox="-2 -73 335 639"><rect x="-2.000000" y="-73.000000" width="335.000000" height="639.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -790,4 +770,4 @@
 </div></foreignObject></g></g><g id="(poll the people -&gt; results)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 190.101682 67.431354 C 227.740964 106.000000 237.500000 126.000000 237.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#916105293)" /></g><g id="(results -&gt; unfavorable)[0]"><path d="M 199.841603 233.347768 C 157.463855 272.000000 136.700000 292.000000 100.299714 329.143149" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#916105293)" /></g><g id="(unfavorable -&gt; poll the people)[0]"><path d="M 61.284863 330.014360 C 56.704819 292.000000 55.500000 265.400000 55.500000 240.500000 C 55.500000 215.600000 67.700000 106.000000 113.406432 68.535712" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#916105293)" /></g><g id="(results -&gt; favorable)[0]"><path d="M 241.715137 233.985640 C 246.295181 272.000000 247.500000 292.000000 247.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#916105293)" /></g><g id="(favorable -&gt; will of the people)[0]"><path d="M 247.500000 400.000000 C 247.500000 438.000000 247.500000 458.000000 247.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#916105293)" /></g><mask id="916105293" maskUnits="userSpaceOnUse" x="-2" y="-73" width="335" height="639">
 <rect x="-2" y="-73" width="335" height="639" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg b/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
index 90e694cd8..17ed41177 100644
--- a/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="295" height="569" viewBox="10 -61 295 569"><rect x="10.000000" y="-61.000000" width="295.000000" height="569.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 295 569"><svg id="d2-svg" width="295" height="569" viewBox="10 -61 295 569"><rect x="10.000000" y="-61.000000" width="295.000000" height="569.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -790,4 +770,4 @@
 </div></foreignObject></g></g><g id="(poll the people -&gt; results)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 111.000000 80.000000 L 111.000000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2185061478)" /></g><g id="(results -&gt; unfavorable)[0]"><path d="M 126.500000 226.000000 L 126.500000 254.000000 S 126.500000 264.000000 136.500000 264.000000 L 205.666667 264.000000 S 215.666667 264.000000 215.666667 274.000000 L 215.666667 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2185061478)" /></g><g id="(unfavorable -&gt; poll the people)[0]"><path d="M 259.333333 302.000000 L 259.333333 128.000000 S 259.333333 118.000000 249.333333 118.000000 L 171.000000 118.000000 S 161.000000 118.000000 161.000000 108.000000 L 161.000000 82.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2185061478)" /></g><g id="(results -&gt; favorable)[0]"><path d="M 95.500000 226.000000 L 95.500000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2185061478)" /></g><g id="(favorable -&gt; will of the people)[0]"><path d="M 95.500000 372.000000 L 95.500000 436.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2185061478)" /></g><mask id="2185061478" maskUnits="userSpaceOnUse" x="10" y="-61" width="295" height="569">
 <rect x="10" y="-61" width="295" height="569" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
index 8476e819e..558d0804a 100644
--- a/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="1034" viewBox="-2 -2 350 1034"><rect x="-2.000000" y="-2.000000" width="350.000000" height="1034.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 350 1034"><svg id="d2-svg" width="350" height="1034" viewBox="-2 -2 350 1034"><rect x="-2.000000" y="-2.000000" width="350.000000" height="1034.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="253.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="279.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="g"><g class="shape" ><rect x="193.000000" y="207.000000" width="153.000000" height="657.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="269.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">g</text></g><g id="d"><g class="shape" ><rect x="0.000000" y="423.000000" width="173.000000" height="225.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="86.500000" y="410.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">d</text></g><g id="f"><g class="shape" ><rect x="244.000000" y="964.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="269.500000" y="1002.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g.b"><g class="shape" ><rect x="253.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="279.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="d.h"><g class="shape" ><rect x="20.000000" y="488.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="476.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="g.e"><g class="shape" ><rect x="233.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="259.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="d.h.c"><g class="shape" ><rect x="60.000000" y="520.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 279.500000 68.000000 C 279.500000 106.000000 279.500000 180.100000 279.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 260.980265 303.999050 C 241.460843 326.100000 236.250000 342.000000 236.250000 357.000000 C 236.250000 372.000000 211.650000 453.300000 116.273973 535.881682" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(d -&gt; g.e)[0]"><path d="M 88.421363 648.555307 C 224.900000 688.000000 259.500000 712.100000 259.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(g.e -&gt; f)[0]"><path d="M 259.500000 836.500000 C 259.500000 858.100000 260.700000 924.000000 265.023419 960.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(f -&gt; g)[0]"><path d="M 293.089293 962.346703 C 319.192771 924.000000 326.000000 904.000000 326.000000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(g -&gt; d.h)[0]"><path d="M 190.966704 509.284135 L 155.566592 538.931729" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><mask id="1219250633" maskUnits="userSpaceOnUse" x="-2" y="-2" width="350" height="1034">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="253.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="279.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="g"><g class="shape" ><rect x="193.000000" y="207.000000" width="153.000000" height="657.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="269.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">g</text></g><g id="d"><g class="shape" ><rect x="0.000000" y="423.000000" width="173.000000" height="225.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="86.500000" y="410.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">d</text></g><g id="f"><g class="shape" ><rect x="244.000000" y="964.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="269.500000" y="1002.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g.b"><g class="shape" ><rect x="253.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="279.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="d.h"><g class="shape" ><rect x="20.000000" y="488.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="476.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="g.e"><g class="shape" ><rect x="233.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="259.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="d.h.c"><g class="shape" ><rect x="60.000000" y="520.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 279.500000 68.000000 C 279.500000 106.000000 279.500000 180.100000 279.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 260.980265 303.999050 C 241.460843 326.100000 236.250000 342.000000 236.250000 357.000000 C 236.250000 372.000000 211.650000 453.300000 116.273973 535.881682" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(d -&gt; g.e)[0]"><path d="M 88.421363 648.555307 C 224.900000 688.000000 259.500000 712.100000 259.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(g.e -&gt; f)[0]"><path d="M 259.500000 836.500000 C 259.500000 858.100000 260.700000 924.000000 265.023419 960.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(f -&gt; g)[0]"><path d="M 293.089293 962.346703 C 319.192771 924.000000 326.000000 904.000000 326.000000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><g id="(g -&gt; d.h)[0]"><path d="M 190.966704 509.284135 L 155.566592 538.931729" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1219250633)" /></g><mask id="1219250633" maskUnits="userSpaceOnUse" x="-2" y="-2" width="350" height="1034">
 <rect x="-2" y="-2" width="350" height="1034" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
index 545f4eaef..8265b8f5b 100644
--- a/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="336" height="770" viewBox="10 10 336 770"><rect x="10.000000" y="10.000000" width="336.000000" height="770.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 336 770"><svg id="d2-svg" width="336" height="770" viewBox="10 10 336 770"><rect x="10.000000" y="10.000000" width="336.000000" height="770.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="112.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="g"><g class="shape" ><rect x="62.000000" y="213.000000" width="226.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="175.000000" y="246.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">g</text></g><g id="d"><g class="shape" ><rect x="12.000000" y="469.000000" width="253.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="138.500000" y="502.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">d</text></g><g id="f"><g class="shape" ><rect x="285.000000" y="469.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="310.500000" y="507.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g.b"><g class="shape" ><rect x="112.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="d.h"><g class="shape" ><rect x="62.000000" y="524.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="553.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="g.e"><g class="shape" ><rect x="185.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="211.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="d.h.c"><g class="shape" ><rect x="112.000000" y="574.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="612.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 138.500000 80.000000 L 138.500000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 138.500000 331.000000 L 138.500000 570.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(d -&gt; g.e)[0]"><path d="M 62.000000 742.000000 L 62.000000 770.000000 S 62.000000 780.000000 72.000000 780.000000 L 336.000000 780.000000 S 346.000000 780.000000 346.000000 770.000000 L 346.000000 128.000000 S 346.000000 118.000000 336.000000 118.000000 L 221.500000 118.000000 S 211.500000 118.000000 211.500000 128.000000 L 211.500000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(g.e -&gt; f)[0]"><path d="M 211.500000 331.000000 L 211.500000 414.000000 S 211.500000 424.000000 221.500000 424.000000 L 292.000000 424.000000 S 302.000000 424.000000 302.000000 434.000000 L 302.000000 465.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(f -&gt; g)[0]"><path d="M 319.000000 467.000000 L 319.000000 178.000000 S 319.000000 168.000000 309.000000 168.000000 L 231.500000 168.000000 S 221.500000 168.000000 221.500000 178.000000 L 221.500000 209.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(g -&gt; d.h)[0]"><path d="M 148.500000 381.000000 L 148.500000 520.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><mask id="1698661525" maskUnits="userSpaceOnUse" x="10" y="10" width="336" height="770">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="112.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="g"><g class="shape" ><rect x="62.000000" y="213.000000" width="226.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="175.000000" y="246.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">g</text></g><g id="d"><g class="shape" ><rect x="12.000000" y="469.000000" width="253.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="138.500000" y="502.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">d</text></g><g id="f"><g class="shape" ><rect x="285.000000" y="469.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="310.500000" y="507.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g.b"><g class="shape" ><rect x="112.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="d.h"><g class="shape" ><rect x="62.000000" y="524.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="553.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">h</text></g><g id="g.e"><g class="shape" ><rect x="185.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="211.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="d.h.c"><g class="shape" ><rect x="112.000000" y="574.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="612.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 138.500000 80.000000 L 138.500000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 138.500000 331.000000 L 138.500000 570.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(d -&gt; g.e)[0]"><path d="M 62.000000 742.000000 L 62.000000 770.000000 S 62.000000 780.000000 72.000000 780.000000 L 336.000000 780.000000 S 346.000000 780.000000 346.000000 770.000000 L 346.000000 128.000000 S 346.000000 118.000000 336.000000 118.000000 L 221.500000 118.000000 S 211.500000 118.000000 211.500000 128.000000 L 211.500000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(g.e -&gt; f)[0]"><path d="M 211.500000 331.000000 L 211.500000 414.000000 S 211.500000 424.000000 221.500000 424.000000 L 292.000000 424.000000 S 302.000000 424.000000 302.000000 434.000000 L 302.000000 465.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(f -&gt; g)[0]"><path d="M 319.000000 467.000000 L 319.000000 178.000000 S 319.000000 168.000000 309.000000 168.000000 L 231.500000 168.000000 S 221.500000 168.000000 221.500000 178.000000 L 221.500000 209.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><g id="(g -&gt; d.h)[0]"><path d="M 148.500000 381.000000 L 148.500000 520.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1698661525)" /></g><mask id="1698661525" maskUnits="userSpaceOnUse" x="10" y="10" width="336" height="770">
 <rect x="10" y="10" width="336" height="770" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg
index 422f05f46..5f963c5f2 100644
--- a/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1524" height="402" viewBox="-2 -2 1524 402"><rect x="-2.000000" y="-2.000000" width="1524.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1524 402"><svg id="d2-svg" width="1524" height="402" viewBox="-2 -2 1524 402"><rect x="-2.000000" y="-2.000000" width="1524.000000" height="402.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a1"><g class="shape" ><rect x="0.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="31.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a1</text></g><g id="b1"><g class="shape" ><rect x="0.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="31.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b1</text></g><g id="a2"><g class="shape" ><rect x="122.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a2</text></g><g id="b2"><g class="shape" ><rect x="122.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b2</text></g><g id="a3"><g class="shape" ><rect x="244.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="275.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a3</text></g><g id="b3"><g class="shape" ><rect x="244.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="275.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b3</text></g><g id="c1"><g class="shape" ><rect x="367.000000" y="0.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="397.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c1</text></g><g id="d1"><g class="shape" ><rect x="366.000000" y="166.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="397.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d1</text></g><g id="c2"><g class="shape" ><rect x="490.000000" y="0.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="520.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c2</text></g><g id="d2"><g class="shape" ><rect x="489.000000" y="166.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="520.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d2</text></g><g id="c3"><g class="shape" ><rect x="613.000000" y="0.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="643.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c3</text></g><g id="d3"><g class="shape" ><rect x="612.000000" y="166.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="643.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d3</text></g><g id="e1"><g class="shape" ><rect x="734.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="765.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e1</text></g><g id="f1"><g class="shape" ><rect x="736.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="765.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f1</text></g><g id="e2"><g class="shape" ><rect x="856.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="887.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e2</text></g><g id="f2"><g class="shape" ><rect x="858.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="887.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f2</text></g><g id="e3"><g class="shape" ><rect x="978.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1009.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e3</text></g><g id="f3"><g class="shape" ><rect x="980.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1009.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f3</text></g><g id="g1"><g class="shape" ><rect x="1100.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1131.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g1</text></g><g id="h1"><g class="shape" ><rect x="1100.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1131.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h1</text></g><g id="g2"><g class="shape" ><rect x="1222.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1253.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g2</text></g><g id="h2"><g class="shape" ><rect x="1222.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1253.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h2</text></g><g id="g3"><g class="shape" ><rect x="1344.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1375.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g3</text></g><g id="h3"><g class="shape" ><rect x="1344.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1375.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h3</text></g><g id="c"><g class="shape" ><rect x="1467.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1493.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="1466.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1493.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f"><g class="shape" ><rect x="1468.000000" y="332.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1493.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="(a1 &lt;-&gt; b1)[0]"><marker id="mk-2682482639" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2099925156" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 31.000000 68.500000 C 31.000000 106.000000 31.000000 126.000000 31.000000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-2682482639)" marker-end="url(#mk-2099925156)" mask="url(#1661603159)" /></g><g id="(a2 &lt;-&gt; b2)[0]"><marker id="mk-3864493245" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-500104154" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 153.000000 71.500000 C 153.000000 106.000000 153.000000 126.000000 153.000000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3864493245)" marker-end="url(#mk-500104154)" mask="url(#1661603159)" /></g><g id="(a3 &lt;-&gt; b3)[0]"><marker id="mk-2246351102" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-563710177" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 275.000000 76.000000 C 275.000000 106.000000 275.000000 126.000000 275.000000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2246351102)" marker-end="url(#mk-563710177)" mask="url(#1661603159)" /></g><g id="(c1 &lt;-&gt; d1)[0]"><marker id="mk-266046985" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-358780358" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 397.500000 68.500000 C 397.500000 106.000000 397.500000 126.000000 397.500000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-266046985)" marker-end="url(#mk-358780358)" mask="url(#1661603159)" /></g><g id="(c2 &lt;-&gt; d2)[0]"><marker id="mk-3273191227" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-3701486352" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 520.500000 71.500000 C 520.500000 106.000000 520.500000 126.000000 520.500000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3273191227)" marker-end="url(#mk-3701486352)" mask="url(#1661603159)" /></g><g id="(c3 &lt;-&gt; d3)[0]"><marker id="mk-3022424236" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-4056008343" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 643.500000 76.000000 C 643.500000 106.000000 643.500000 126.000000 643.500000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-3022424236)" marker-end="url(#mk-4056008343)" mask="url(#1661603159)" /></g><g id="(e1 &lt;-&gt; f1)[0]"><marker id="mk-3410641114" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-450143559" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 765.000000 68.500000 C 765.000000 106.000000 765.000000 126.000000 765.000000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-3410641114)" marker-end="url(#mk-450143559)" mask="url(#1661603159)" /></g><g id="(e2 &lt;-&gt; f2)[0]"><marker id="mk-715494820" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-3910128821" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 887.000000 71.500000 C 887.000000 106.000000 887.000000 126.000000 887.000000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-715494820)" marker-end="url(#mk-3910128821)" mask="url(#1661603159)" /></g><g id="(e3 &lt;-&gt; f3)[0]"><marker id="mk-1252030355" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-1790185846" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 1009.000000 76.000000 C 1009.000000 106.000000 1009.000000 126.000000 1009.000000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-1252030355)" marker-end="url(#mk-1790185846)" mask="url(#1661603159)" /></g><g id="(g1 &lt;-&gt; h1)[0]"><marker id="mk-4086523246" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-315209971" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 1131.000000 68.500000 C 1131.000000 106.000000 1131.000000 126.000000 1131.000000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-4086523246)" marker-end="url(#mk-315209971)" mask="url(#1661603159)" /></g><g id="(g2 &lt;-&gt; h2)[0]"><marker id="mk-2217957432" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-656390593" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 1253.000000 71.500000 C 1253.000000 106.000000 1253.000000 126.000000 1253.000000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-2217957432)" marker-end="url(#mk-656390593)" mask="url(#1661603159)" /></g><g id="(g3 &lt;-&gt; h3)[0]"><marker id="mk-974576639" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-2473717562" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 1375.000000 76.000000 C 1375.000000 106.000000 1375.000000 126.000000 1375.000000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-974576639)" marker-end="url(#mk-2473717562)" mask="url(#1661603159)" /></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" stroke="orange" class="connection fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2124252238" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g stroke="orange" class="connection fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 1493.000000 68.500000 C 1493.000000 106.000000 1493.000000 126.000000 1493.000000 163.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#1661603159)" /></g><g id="(d &lt;-&gt; f)[0]"><path d="M 1493.000000 234.500000 C 1493.000000 272.000000 1493.000000 292.000000 1493.000000 329.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#1661603159)" /></g><mask id="1661603159" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1524" height="402">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a1"><g class="shape" ><rect x="0.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="31.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a1</text></g><g id="b1"><g class="shape" ><rect x="0.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="31.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b1</text></g><g id="a2"><g class="shape" ><rect x="122.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a2</text></g><g id="b2"><g class="shape" ><rect x="122.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b2</text></g><g id="a3"><g class="shape" ><rect x="244.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="275.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a3</text></g><g id="b3"><g class="shape" ><rect x="244.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="275.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b3</text></g><g id="c1"><g class="shape" ><rect x="367.000000" y="0.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="397.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c1</text></g><g id="d1"><g class="shape" ><rect x="366.000000" y="166.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="397.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d1</text></g><g id="c2"><g class="shape" ><rect x="490.000000" y="0.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="520.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c2</text></g><g id="d2"><g class="shape" ><rect x="489.000000" y="166.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="520.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d2</text></g><g id="c3"><g class="shape" ><rect x="613.000000" y="0.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="643.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c3</text></g><g id="d3"><g class="shape" ><rect x="612.000000" y="166.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="643.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d3</text></g><g id="e1"><g class="shape" ><rect x="734.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="765.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e1</text></g><g id="f1"><g class="shape" ><rect x="736.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="765.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f1</text></g><g id="e2"><g class="shape" ><rect x="856.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="887.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e2</text></g><g id="f2"><g class="shape" ><rect x="858.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="887.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f2</text></g><g id="e3"><g class="shape" ><rect x="978.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1009.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e3</text></g><g id="f3"><g class="shape" ><rect x="980.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1009.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f3</text></g><g id="g1"><g class="shape" ><rect x="1100.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1131.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g1</text></g><g id="h1"><g class="shape" ><rect x="1100.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1131.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h1</text></g><g id="g2"><g class="shape" ><rect x="1222.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1253.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g2</text></g><g id="h2"><g class="shape" ><rect x="1222.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1253.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h2</text></g><g id="g3"><g class="shape" ><rect x="1344.000000" y="0.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1375.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g3</text></g><g id="h3"><g class="shape" ><rect x="1344.000000" y="166.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1375.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h3</text></g><g id="c"><g class="shape" ><rect x="1467.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1493.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="1466.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1493.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f"><g class="shape" ><rect x="1468.000000" y="332.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1493.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="(a1 &lt;-&gt; b1)[0]"><marker id="mk-2682482639" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2099925156" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 31.000000 68.500000 C 31.000000 106.000000 31.000000 126.000000 31.000000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-2682482639)" marker-end="url(#mk-2099925156)" mask="url(#1661603159)" /></g><g id="(a2 &lt;-&gt; b2)[0]"><marker id="mk-3864493245" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-500104154" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 153.000000 71.500000 C 153.000000 106.000000 153.000000 126.000000 153.000000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3864493245)" marker-end="url(#mk-500104154)" mask="url(#1661603159)" /></g><g id="(a3 &lt;-&gt; b3)[0]"><marker id="mk-2246351102" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-563710177" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 275.000000 76.000000 C 275.000000 106.000000 275.000000 126.000000 275.000000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2246351102)" marker-end="url(#mk-563710177)" mask="url(#1661603159)" /></g><g id="(c1 &lt;-&gt; d1)[0]"><marker id="mk-266046985" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-358780358" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 397.500000 68.500000 C 397.500000 106.000000 397.500000 126.000000 397.500000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-266046985)" marker-end="url(#mk-358780358)" mask="url(#1661603159)" /></g><g id="(c2 &lt;-&gt; d2)[0]"><marker id="mk-3273191227" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-3701486352" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 520.500000 71.500000 C 520.500000 106.000000 520.500000 126.000000 520.500000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3273191227)" marker-end="url(#mk-3701486352)" mask="url(#1661603159)" /></g><g id="(c3 &lt;-&gt; d3)[0]"><marker id="mk-3022424236" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-4056008343" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 643.500000 76.000000 C 643.500000 106.000000 643.500000 126.000000 643.500000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-3022424236)" marker-end="url(#mk-4056008343)" mask="url(#1661603159)" /></g><g id="(e1 &lt;-&gt; f1)[0]"><marker id="mk-3410641114" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-450143559" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 765.000000 68.500000 C 765.000000 106.000000 765.000000 126.000000 765.000000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-3410641114)" marker-end="url(#mk-450143559)" mask="url(#1661603159)" /></g><g id="(e2 &lt;-&gt; f2)[0]"><marker id="mk-715494820" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-3910128821" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 887.000000 71.500000 C 887.000000 106.000000 887.000000 126.000000 887.000000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-715494820)" marker-end="url(#mk-3910128821)" mask="url(#1661603159)" /></g><g id="(e3 &lt;-&gt; f3)[0]"><marker id="mk-1252030355" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-1790185846" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 1009.000000 76.000000 C 1009.000000 106.000000 1009.000000 126.000000 1009.000000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-1252030355)" marker-end="url(#mk-1790185846)" mask="url(#1661603159)" /></g><g id="(g1 &lt;-&gt; h1)[0]"><marker id="mk-4086523246" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-315209971" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 1131.000000 68.500000 C 1131.000000 106.000000 1131.000000 126.000000 1131.000000 163.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-4086523246)" marker-end="url(#mk-315209971)" mask="url(#1661603159)" /></g><g id="(g2 &lt;-&gt; h2)[0]"><marker id="mk-2217957432" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-656390593" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 1253.000000 71.500000 C 1253.000000 106.000000 1253.000000 126.000000 1253.000000 160.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-2217957432)" marker-end="url(#mk-656390593)" mask="url(#1661603159)" /></g><g id="(g3 &lt;-&gt; h3)[0]"><marker id="mk-974576639" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-2473717562" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 1375.000000 76.000000 C 1375.000000 106.000000 1375.000000 126.000000 1375.000000 156.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-974576639)" marker-end="url(#mk-2473717562)" mask="url(#1661603159)" /></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" stroke="orange" class="connection fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2124252238" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g stroke="orange" class="connection fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 1493.000000 68.500000 C 1493.000000 106.000000 1493.000000 126.000000 1493.000000 163.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#1661603159)" /></g><g id="(d &lt;-&gt; f)[0]"><path d="M 1493.000000 234.500000 C 1493.000000 272.000000 1493.000000 292.000000 1493.000000 329.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#1661603159)" /></g><mask id="1661603159" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1524" height="402">
 <rect x="-2" y="-2" width="1524" height="402" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg b/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg
index cfd0f3d3c..eb8f4a284 100644
--- a/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1044" height="342" viewBox="10 10 1044 342"><rect x="10.000000" y="10.000000" width="1044.000000" height="342.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1044 342"><svg id="d2-svg" width="1044" height="342" viewBox="10 10 1044 342"><rect x="10.000000" y="10.000000" width="1044.000000" height="342.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a1"><g class="shape" ><rect x="12.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a1</text></g><g id="b1"><g class="shape" ><rect x="12.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b1</text></g><g id="a2"><g class="shape" ><rect x="94.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="125.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a2</text></g><g id="b2"><g class="shape" ><rect x="94.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="125.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b2</text></g><g id="a3"><g class="shape" ><rect x="176.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="207.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a3</text></g><g id="b3"><g class="shape" ><rect x="176.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="207.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b3</text></g><g id="c1"><g class="shape" ><rect x="259.000000" y="12.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="289.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c1</text></g><g id="d1"><g class="shape" ><rect x="258.000000" y="148.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="289.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d1</text></g><g id="c2"><g class="shape" ><rect x="342.000000" y="12.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="372.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c2</text></g><g id="d2"><g class="shape" ><rect x="341.000000" y="148.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="372.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d2</text></g><g id="c3"><g class="shape" ><rect x="425.000000" y="12.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="455.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c3</text></g><g id="d3"><g class="shape" ><rect x="424.000000" y="148.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="455.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d3</text></g><g id="e1"><g class="shape" ><rect x="506.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e1</text></g><g id="f1"><g class="shape" ><rect x="507.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="536.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f1</text></g><g id="e2"><g class="shape" ><rect x="588.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="619.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e2</text></g><g id="f2"><g class="shape" ><rect x="589.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="618.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f2</text></g><g id="e3"><g class="shape" ><rect x="670.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="701.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e3</text></g><g id="f3"><g class="shape" ><rect x="671.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="700.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f3</text></g><g id="g1"><g class="shape" ><rect x="752.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="783.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g1</text></g><g id="h1"><g class="shape" ><rect x="752.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="783.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h1</text></g><g id="g2"><g class="shape" ><rect x="834.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="865.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g2</text></g><g id="h2"><g class="shape" ><rect x="834.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="865.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h2</text></g><g id="g3"><g class="shape" ><rect x="916.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="947.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g3</text></g><g id="h3"><g class="shape" ><rect x="916.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="947.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h3</text></g><g id="c"><g class="shape" ><rect x="998.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1024.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="998.000000" y="148.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1025.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f"><g class="shape" ><rect x="999.000000" y="284.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1024.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="(a1 &lt;-&gt; b1)[0]"><marker id="mk-2682482639" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2099925156" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 43.000000 80.500000 L 43.000000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-2682482639)" marker-end="url(#mk-2099925156)" mask="url(#3250104483)" /></g><g id="(a2 &lt;-&gt; b2)[0]"><marker id="mk-3864493245" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-500104154" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 125.000000 83.500000 L 125.000000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3864493245)" marker-end="url(#mk-500104154)" mask="url(#3250104483)" /></g><g id="(a3 &lt;-&gt; b3)[0]"><marker id="mk-2246351102" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-563710177" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 207.000000 88.000000 L 207.000000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2246351102)" marker-end="url(#mk-563710177)" mask="url(#3250104483)" /></g><g id="(c1 &lt;-&gt; d1)[0]"><marker id="mk-266046985" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-358780358" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 289.500000 80.500000 L 289.500000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-266046985)" marker-end="url(#mk-358780358)" mask="url(#3250104483)" /></g><g id="(c2 &lt;-&gt; d2)[0]"><marker id="mk-3273191227" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-3701486352" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 372.500000 83.500000 L 372.500000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3273191227)" marker-end="url(#mk-3701486352)" mask="url(#3250104483)" /></g><g id="(c3 &lt;-&gt; d3)[0]"><marker id="mk-3022424236" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-4056008343" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 455.500000 88.000000 L 455.500000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-3022424236)" marker-end="url(#mk-4056008343)" mask="url(#3250104483)" /></g><g id="(e1 &lt;-&gt; f1)[0]"><marker id="mk-3410641114" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-450143559" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 537.000000 80.500000 L 537.000000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-3410641114)" marker-end="url(#mk-450143559)" mask="url(#3250104483)" /></g><g id="(e2 &lt;-&gt; f2)[0]"><marker id="mk-715494820" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-3910128821" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 619.000000 83.500000 L 619.000000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-715494820)" marker-end="url(#mk-3910128821)" mask="url(#3250104483)" /></g><g id="(e3 &lt;-&gt; f3)[0]"><marker id="mk-1252030355" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-1790185846" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 701.000000 88.000000 L 701.000000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-1252030355)" marker-end="url(#mk-1790185846)" mask="url(#3250104483)" /></g><g id="(g1 &lt;-&gt; h1)[0]"><marker id="mk-4086523246" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-315209971" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 783.000000 80.500000 L 783.000000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-4086523246)" marker-end="url(#mk-315209971)" mask="url(#3250104483)" /></g><g id="(g2 &lt;-&gt; h2)[0]"><marker id="mk-2217957432" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-656390593" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 865.000000 83.500000 L 865.000000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-2217957432)" marker-end="url(#mk-656390593)" mask="url(#3250104483)" /></g><g id="(g3 &lt;-&gt; h3)[0]"><marker id="mk-974576639" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-2473717562" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 947.000000 88.000000 L 947.000000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-974576639)" marker-end="url(#mk-2473717562)" mask="url(#3250104483)" /></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" stroke="orange" class="connection fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2124252238" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g stroke="orange" class="connection fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 1025.000000 80.500000 L 1025.000000 145.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#3250104483)" /></g><g id="(d &lt;-&gt; f)[0]"><path d="M 1025.000000 216.500000 L 1025.000000 281.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#3250104483)" /></g><mask id="3250104483" maskUnits="userSpaceOnUse" x="10" y="10" width="1044" height="342">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a1"><g class="shape" ><rect x="12.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a1</text></g><g id="b1"><g class="shape" ><rect x="12.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b1</text></g><g id="a2"><g class="shape" ><rect x="94.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="125.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a2</text></g><g id="b2"><g class="shape" ><rect x="94.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="125.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b2</text></g><g id="a3"><g class="shape" ><rect x="176.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="207.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a3</text></g><g id="b3"><g class="shape" ><rect x="176.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="207.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b3</text></g><g id="c1"><g class="shape" ><rect x="259.000000" y="12.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="289.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c1</text></g><g id="d1"><g class="shape" ><rect x="258.000000" y="148.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="289.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d1</text></g><g id="c2"><g class="shape" ><rect x="342.000000" y="12.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="372.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c2</text></g><g id="d2"><g class="shape" ><rect x="341.000000" y="148.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="372.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d2</text></g><g id="c3"><g class="shape" ><rect x="425.000000" y="12.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="455.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c3</text></g><g id="d3"><g class="shape" ><rect x="424.000000" y="148.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="455.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d3</text></g><g id="e1"><g class="shape" ><rect x="506.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e1</text></g><g id="f1"><g class="shape" ><rect x="507.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="536.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f1</text></g><g id="e2"><g class="shape" ><rect x="588.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="619.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e2</text></g><g id="f2"><g class="shape" ><rect x="589.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="618.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f2</text></g><g id="e3"><g class="shape" ><rect x="670.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="701.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e3</text></g><g id="f3"><g class="shape" ><rect x="671.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="700.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f3</text></g><g id="g1"><g class="shape" ><rect x="752.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="783.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g1</text></g><g id="h1"><g class="shape" ><rect x="752.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="783.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h1</text></g><g id="g2"><g class="shape" ><rect x="834.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="865.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g2</text></g><g id="h2"><g class="shape" ><rect x="834.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="865.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h2</text></g><g id="g3"><g class="shape" ><rect x="916.000000" y="12.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="947.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g3</text></g><g id="h3"><g class="shape" ><rect x="916.000000" y="148.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="947.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h3</text></g><g id="c"><g class="shape" ><rect x="998.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1024.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="998.000000" y="148.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1025.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="f"><g class="shape" ><rect x="999.000000" y="284.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1024.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="(a1 &lt;-&gt; b1)[0]"><marker id="mk-2682482639" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2099925156" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 43.000000 80.500000 L 43.000000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-2682482639)" marker-end="url(#mk-2099925156)" mask="url(#3250104483)" /></g><g id="(a2 &lt;-&gt; b2)[0]"><marker id="mk-3864493245" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-500104154" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 125.000000 83.500000 L 125.000000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3864493245)" marker-end="url(#mk-500104154)" mask="url(#3250104483)" /></g><g id="(a3 &lt;-&gt; b3)[0]"><marker id="mk-2246351102" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-563710177" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 207.000000 88.000000 L 207.000000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-2246351102)" marker-end="url(#mk-563710177)" mask="url(#3250104483)" /></g><g id="(c1 &lt;-&gt; d1)[0]"><marker id="mk-266046985" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-358780358" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><path d="M 289.500000 80.500000 L 289.500000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-266046985)" marker-end="url(#mk-358780358)" mask="url(#3250104483)" /></g><g id="(c2 &lt;-&gt; d2)[0]"><marker id="mk-3273191227" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><marker id="mk-3701486352" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M11.400000,13.500000 35.400000,0.000000 M11.400000,13.500000 35.400000,27.000000" /></g> </marker><path d="M 372.500000 83.500000 L 372.500000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-3273191227)" marker-end="url(#mk-3701486352)" mask="url(#3250104483)" /></g><g id="(c3 &lt;-&gt; d3)[0]"><marker id="mk-3022424236" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><marker id="mk-4056008343" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M16.800000,27.000000 67.800000,0.000000 M16.800000,27.000000 67.800000,54.000000" /></g> </marker><path d="M 455.500000 88.000000 L 455.500000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-3022424236)" marker-end="url(#mk-4056008343)" mask="url(#3250104483)" /></g><g id="(e1 &lt;-&gt; f1)[0]"><marker id="mk-3410641114" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-450143559" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 537.000000 80.500000 L 537.000000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-3410641114)" marker-end="url(#mk-450143559)" mask="url(#3250104483)" /></g><g id="(e2 &lt;-&gt; f2)[0]"><marker id="mk-715494820" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-3910128821" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><circle r="4.200000" cx="6.200000" cy="13.500000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 619.000000 83.500000 L 619.000000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-715494820)" marker-end="url(#mk-3910128821)" mask="url(#3250104483)" /></g><g id="(e3 &lt;-&gt; f3)[0]"><marker id="mk-1252030355" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-1790185846" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><circle r="6.900000" cx="8.900000" cy="27.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 701.000000 88.000000 L 701.000000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-1252030355)" marker-end="url(#mk-1790185846)" mask="url(#3250104483)" /></g><g id="(g1 &lt;-&gt; h1)[0]"><marker id="mk-4086523246" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><marker id="mk-315209971" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" class="connection stroke-B1 fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 783.000000 80.500000 L 783.000000 145.500000" fill="none" class="connection stroke-B1" style="stroke-width:1;" marker-start="url(#mk-4086523246)" marker-end="url(#mk-315209971)" mask="url(#3250104483)" /></g><g id="(g2 &lt;-&gt; h2)[0]"><marker id="mk-2217957432" markerWidth="27.000000" markerHeight="27.000000" refX="4.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-27.000000, -27.000000)" class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><marker id="mk-656390593" markerWidth="27.000000" markerHeight="27.000000" refX="22.500000" refY="13.500000" viewBox="0.000000 0.000000 27.000000 27.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="3"><path d="M8.400000,0.000000 8.400000,27.000000" class="connection stroke-B1 fill-N7" stroke-width="3" /><path d="M24.000000,13.500000 35.400000,13.500000 M16.800000,0.000000 16.800000,27.000000" /></g> </marker><path d="M 865.000000 83.500000 L 865.000000 142.500000" fill="none" class="connection stroke-B1" style="stroke-width:3;" marker-start="url(#mk-2217957432)" marker-end="url(#mk-656390593)" mask="url(#3250104483)" /></g><g id="(g3 &lt;-&gt; h3)[0]"><marker id="mk-974576639" markerWidth="54.000000" markerHeight="54.000000" refX="9.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-54.000000, -54.000000)" class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><marker id="mk-2473717562" markerWidth="54.000000" markerHeight="54.000000" refX="45.000000" refY="27.000000" viewBox="0.000000 0.000000 54.000000 54.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="6"><path d="M13.800000,0.000000 13.800000,54.000000" class="connection stroke-B1 fill-N7" stroke-width="6" /><path d="M51.000000,27.000000 67.800000,27.000000 M27.600000,0.000000 27.600000,54.000000" /></g> </marker><path d="M 947.000000 88.000000 L 947.000000 138.000000" fill="none" class="connection stroke-B1" style="stroke-width:6;" marker-start="url(#mk-974576639)" marker-end="url(#mk-2473717562)" mask="url(#3250104483)" /></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="18.000000" markerHeight="18.000000" refX="1.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" stroke="orange" class="connection fill-N7" stroke-width="1"><path d="M4.800000,0.000000 4.800000,18.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M7.800000,9.000000 22.800000,0.000000 M7.800000,9.000000 22.800000,18.000000" /></g> </marker><marker id="mk-2124252238" markerWidth="18.000000" markerHeight="18.000000" refX="16.500000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g stroke="orange" class="connection fill-N7" stroke-width="1"><circle r="2.400000" cx="4.400000" cy="9.000000" stroke="orange" class="connection fill-N7" stroke-width="1" /><path d="M15.000000,9.000000 22.800000,9.000000 M9.600000,0.000000 9.600000,18.000000" /></g> </marker><path d="M 1025.000000 80.500000 L 1025.000000 145.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#3250104483)" /></g><g id="(d &lt;-&gt; f)[0]"><path d="M 1025.000000 216.500000 L 1025.000000 281.500000" stroke="orange" fill="none" class="connection" style="stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-2124252238)" mask="url(#3250104483)" /></g><mask id="3250104483" maskUnits="userSpaceOnUse" x="10" y="10" width="1044" height="342">
 <rect x="10" y="10" width="1044" height="342" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/dense/dagre/sketch.exp.svg b/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
index b34bb05fb..b77a719cb 100644
--- a/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="857" height="1066" viewBox="-2 -2 857 1066"><rect x="-2.000000" y="-2.000000" width="857.000000" height="1066.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 857 1066"><svg id="d2-svg" width="857" height="1066" viewBox="-2 -2 857 1066"><rect x="-2.000000" y="-2.000000" width="857.000000" height="1066.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="210.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="236.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="287.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="313.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="64.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="90.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="453.000000" y="498.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="577.000000" y="830.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="603.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="567.000000" y="498.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="592.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="576.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="603.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="110.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="136.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="322.000000" y="830.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="346.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="0.000000" y="332.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="25.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="320.000000" y="996.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="346.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="735.000000" y="664.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="759.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="678.000000" y="498.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="706.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="387.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="413.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="243.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="270.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="800.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="826.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="577.000000" y="996.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="604.000000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 264.607846 63.126400 C 303.450000 105.131596 313.500000 126.000000 313.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(c -&gt; b)[0]"><path d="M 118.609392 510.261515 C 185.800000 460.689778 203.000000 431.400000 203.000000 406.500000 C 203.000000 381.600000 219.800000 269.400000 283.800000 221.400000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(d -&gt; e)[0]"><path d="M 480.000000 566.000000 C 480.000000 604.000000 480.000000 630.600000 480.000000 655.500000 C 480.000000 680.400000 499.400000 793.000000 573.677079 842.773300" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(f -&gt; e)[0]"><path d="M 592.500000 566.000000 C 592.500000 604.000000 592.500000 630.600000 592.500000 655.500000 C 592.500000 680.400000 593.900000 790.000000 598.945409 826.038633" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; f)[0]"><path d="M 341.846905 210.778689 C 478.600000 267.602253 513.250000 298.600000 513.250000 323.500000 C 513.250000 348.400000 524.050000 459.200000 564.473458 501.120623" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; g)[0]"><path d="M 341.922293 207.162804 C 550.000000 266.922145 602.500000 292.000000 602.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(g -&gt; f)[0]"><path d="M 602.500000 400.000000 C 602.500000 438.000000 601.300000 458.000000 596.976581 494.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; h)[0]"><path d="M 285.189205 212.275684 C 166.600000 267.885311 136.500000 292.000000 136.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; i)[0]"><path d="M 323.388221 233.924355 C 334.168675 272.000000 337.000000 298.600000 337.000000 323.500000 C 337.000000 348.400000 337.000000 381.600000 337.000000 406.500000 C 337.000000 431.400000 337.000000 464.600000 337.000000 489.500000 C 337.000000 514.400000 337.000000 547.600000 337.000000 572.500000 C 337.000000 597.400000 337.000000 630.600000 337.000000 655.500000 C 337.000000 680.400000 338.200000 790.000000 342.523419 826.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; d)[0]"><path d="M 341.789928 213.102487 C 452.000000 268.042042 480.000000 298.600000 480.000000 323.500000 C 480.000000 348.400000 480.000000 458.000000 480.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(j -&gt; c)[0]"><path d="M 25.000000 400.000000 C 25.000000 438.000000 32.800000 458.000000 61.539873 494.845991" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(j -&gt; a)[0]"><path d="M 38.650908 330.137680 C 53.584337 292.000000 57.500000 265.400000 57.500000 240.500000 C 57.500000 215.600000 88.100000 101.800000 206.871641 46.683748" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; j)[0]"><path d="M 285.077961 207.176878 C 77.400000 266.924783 25.000000 292.000000 25.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(i -&gt; k)[0]"><path d="M 346.750000 898.000000 C 346.750000 936.000000 346.750000 956.000000 346.750000 992.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(d -&gt; l)[0]"><path d="M 508.796211 545.100799 C 621.000000 600.044248 666.500000 626.885845 731.312268 676.012952" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(l -&gt; e)[0]"><path d="M 759.000000 732.000000 C 759.000000 770.000000 733.200000 793.800000 633.527139 847.113391" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(m -&gt; l)[0]"><path d="M 710.715137 565.985640 C 715.295181 604.000000 721.700000 624.000000 740.654589 660.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(m -&gt; n)[0]"><path d="M 676.065515 538.987549 C 447.800000 598.895968 393.050000 624.000000 403.171480 660.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(n -&gt; i)[0]"><path d="M 413.500000 732.000000 C 413.500000 770.000000 405.050000 790.507116 373.756787 829.418527" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(d -&gt; n)[0]"><path d="M 452.309705 565.560820 C 421.512048 604.000000 413.500000 624.000000 413.500000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(f -&gt; n)[0]"><path d="M 565.234981 545.529673 C 462.800000 600.117817 433.950000 624.000000 423.828520 660.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; o)[0]"><path d="M 295.276407 233.771454 C 275.240964 272.000000 270.000000 292.000000 270.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(p -&gt; l)[0]"><path d="M 826.500000 566.000000 C 826.500000 604.000000 817.900000 624.400000 786.049057 662.917419" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(e -&gt; q)[0]"><path d="M 603.500000 898.000000 C 603.500000 936.000000 603.500000 956.000000 603.500000 992.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><mask id="2690750813" maskUnits="userSpaceOnUse" x="-2" y="-2" width="857" height="1066">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="210.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="236.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="287.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="313.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="64.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="90.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="453.000000" y="498.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="577.000000" y="830.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="603.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="567.000000" y="498.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="592.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="576.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="603.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="110.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="136.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="322.000000" y="830.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="346.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="0.000000" y="332.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="25.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="320.000000" y="996.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="346.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="735.000000" y="664.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="759.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="678.000000" y="498.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="706.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="387.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="413.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="243.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="270.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="800.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="826.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="577.000000" y="996.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="604.000000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 264.607846 63.126400 C 303.450000 105.131596 313.500000 126.000000 313.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(c -&gt; b)[0]"><path d="M 118.609392 510.261515 C 185.800000 460.689778 203.000000 431.400000 203.000000 406.500000 C 203.000000 381.600000 219.800000 269.400000 283.800000 221.400000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(d -&gt; e)[0]"><path d="M 480.000000 566.000000 C 480.000000 604.000000 480.000000 630.600000 480.000000 655.500000 C 480.000000 680.400000 499.400000 793.000000 573.677079 842.773300" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(f -&gt; e)[0]"><path d="M 592.500000 566.000000 C 592.500000 604.000000 592.500000 630.600000 592.500000 655.500000 C 592.500000 680.400000 593.900000 790.000000 598.945409 826.038633" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; f)[0]"><path d="M 341.846905 210.778689 C 478.600000 267.602253 513.250000 298.600000 513.250000 323.500000 C 513.250000 348.400000 524.050000 459.200000 564.473458 501.120623" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; g)[0]"><path d="M 341.922293 207.162804 C 550.000000 266.922145 602.500000 292.000000 602.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(g -&gt; f)[0]"><path d="M 602.500000 400.000000 C 602.500000 438.000000 601.300000 458.000000 596.976581 494.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; h)[0]"><path d="M 285.189205 212.275684 C 166.600000 267.885311 136.500000 292.000000 136.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; i)[0]"><path d="M 323.388221 233.924355 C 334.168675 272.000000 337.000000 298.600000 337.000000 323.500000 C 337.000000 348.400000 337.000000 381.600000 337.000000 406.500000 C 337.000000 431.400000 337.000000 464.600000 337.000000 489.500000 C 337.000000 514.400000 337.000000 547.600000 337.000000 572.500000 C 337.000000 597.400000 337.000000 630.600000 337.000000 655.500000 C 337.000000 680.400000 338.200000 790.000000 342.523419 826.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; d)[0]"><path d="M 341.789928 213.102487 C 452.000000 268.042042 480.000000 298.600000 480.000000 323.500000 C 480.000000 348.400000 480.000000 458.000000 480.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(j -&gt; c)[0]"><path d="M 25.000000 400.000000 C 25.000000 438.000000 32.800000 458.000000 61.539873 494.845991" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(j -&gt; a)[0]"><path d="M 38.650908 330.137680 C 53.584337 292.000000 57.500000 265.400000 57.500000 240.500000 C 57.500000 215.600000 88.100000 101.800000 206.871641 46.683748" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; j)[0]"><path d="M 285.077961 207.176878 C 77.400000 266.924783 25.000000 292.000000 25.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(i -&gt; k)[0]"><path d="M 346.750000 898.000000 C 346.750000 936.000000 346.750000 956.000000 346.750000 992.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(d -&gt; l)[0]"><path d="M 508.796211 545.100799 C 621.000000 600.044248 666.500000 626.885845 731.312268 676.012952" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(l -&gt; e)[0]"><path d="M 759.000000 732.000000 C 759.000000 770.000000 733.200000 793.800000 633.527139 847.113391" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(m -&gt; l)[0]"><path d="M 710.715137 565.985640 C 715.295181 604.000000 721.700000 624.000000 740.654589 660.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(m -&gt; n)[0]"><path d="M 676.065515 538.987549 C 447.800000 598.895968 393.050000 624.000000 403.171480 660.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(n -&gt; i)[0]"><path d="M 413.500000 732.000000 C 413.500000 770.000000 405.050000 790.507116 373.756787 829.418527" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(d -&gt; n)[0]"><path d="M 452.309705 565.560820 C 421.512048 604.000000 413.500000 624.000000 413.500000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(f -&gt; n)[0]"><path d="M 565.234981 545.529673 C 462.800000 600.117817 433.950000 624.000000 423.828520 660.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(b -&gt; o)[0]"><path d="M 295.276407 233.771454 C 275.240964 272.000000 270.000000 292.000000 270.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(p -&gt; l)[0]"><path d="M 826.500000 566.000000 C 826.500000 604.000000 817.900000 624.400000 786.049057 662.917419" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><g id="(e -&gt; q)[0]"><path d="M 603.500000 898.000000 C 603.500000 936.000000 603.500000 956.000000 603.500000 992.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2690750813)" /></g><mask id="2690750813" maskUnits="userSpaceOnUse" x="-2" y="-2" width="857" height="1066">
 <rect x="-2" y="-2" width="857" height="1066" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/dense/elk/sketch.exp.svg b/e2etests/testdata/stable/dense/elk/sketch.exp.svg
index 8894097a0..0554b2706 100644
--- a/e2etests/testdata/stable/dense/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/dense/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449" height="1532" viewBox="12 10 449 1532"><rect x="12.000000" y="10.000000" width="449.000000" height="1532.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 449 1532"><svg id="d2-svg" width="449" height="1532" viewBox="12 10 449 1532"><rect x="12.000000" y="10.000000" width="449.000000" height="1532.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="313.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="339.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="313.000000" y="354.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="339.500000" y="392.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="240.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="266.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="258.000000" y="700.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="285.000000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="236.000000" y="1192.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="262.500000" y="1230.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="89.000000" y="946.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="984.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="96.000000" y="700.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="123.000000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="23.000000" y="700.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.500000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="157.000000" y="1338.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="181.500000" y="1376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="339.000000" y="12.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="364.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="155.000000" y="1474.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="181.500000" y="1512.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="274.000000" y="946.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="298.500000" y="984.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="170.000000" y="700.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="198.500000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="163.000000" y="1192.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.500000" y="1230.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="332.000000" y="700.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="359.000000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="406.000000" y="700.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="432.500000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="235.000000" y="1338.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="262.000000" y="1376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 340.071429 276.000000 L 340.071429 350.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(c -&gt; b)[0]"><path d="M 267.071429 276.000000 L 267.071429 304.000000 S 267.071429 314.000000 277.071429 314.000000 L 316.821429 314.000000 S 326.821429 314.000000 326.821429 324.000000 L 326.821429 350.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(d -&gt; e)[0]"><path d="M 285.000000 768.000000 L 285.000000 846.000000 S 285.000000 856.000000 275.000000 856.000000 L 273.000000 856.000000 S 263.000000 856.000000 263.000000 866.000000 L 263.000000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(f -&gt; e)[0]"><path d="M 124.000000 1014.000000 L 124.000000 1092.000000 S 124.000000 1102.000000 134.000000 1102.000000 L 239.750000 1102.000000 S 249.750000 1102.000000 249.750000 1112.000000 L 249.750000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; f)[0]"><path d="M 336.285714 422.000000 L 336.285714 550.000000 S 336.285714 560.000000 326.285714 560.000000 L 96.000000 560.000000 S 86.000000 560.000000 86.000000 570.000000 L 86.000000 796.000000 S 86.000000 806.000000 96.000000 806.000000 L 97.000000 806.000000 S 107.000000 806.000000 107.000000 816.000000 L 107.000000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; g)[0]"><path d="M 343.857143 422.000000 L 343.857143 600.000000 S 343.857143 610.000000 333.857143 610.000000 L 134.000000 610.000000 S 124.000000 610.000000 124.000000 620.000000 L 124.000000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(g -&gt; f)[0]"><path d="M 124.000000 768.000000 L 124.000000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; h)[0]"><path d="M 328.714286 422.000000 L 328.714286 500.000000 S 328.714286 510.000000 318.714286 510.000000 L 59.500000 510.000000 S 49.500000 510.000000 49.500000 520.000000 L 49.500000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; i)[0]"><path d="M 321.142857 422.000000 L 321.142857 450.000000 S 321.142857 460.000000 311.142857 460.000000 L 22.000000 460.000000 S 12.000000 460.000000 12.000000 470.000000 L 12.000000 1288.000000 S 12.000000 1298.000000 22.000000 1298.000000 L 163.666667 1298.000000 S 173.666667 1298.000000 173.666667 1308.000000 L 173.666667 1334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; d)[0]"><path d="M 351.428571 422.000000 L 351.428571 650.000000 S 351.428571 660.000000 341.428571 660.000000 L 295.000000 660.000000 S 285.000000 660.000000 285.000000 670.000000 L 285.000000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(j -&gt; c)[0]"><path d="M 351.571429 80.000000 L 351.571429 108.000000 S 351.571429 118.000000 341.571429 118.000000 L 277.071429 118.000000 S 267.071429 118.000000 267.071429 128.000000 L 267.071429 204.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(j -&gt; a)[0]"><path d="M 364.071429 80.000000 L 364.071429 158.000000 S 364.071429 168.000000 354.071429 168.000000 L 350.071429 168.000000 S 340.071429 168.000000 340.071429 178.000000 L 340.071429 204.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; j)[0]"><path d="M 353.321429 352.000000 L 353.321429 324.000000 S 353.321429 314.000000 363.321429 314.000000 L 366.571429 314.000000 S 376.571429 314.000000 376.571429 304.000000 L 376.571429 82.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(i -&gt; k)[0]"><path d="M 181.833333 1406.000000 L 181.833333 1470.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(d -&gt; l)[0]"><path d="M 298.500000 768.000000 L 298.500000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(l -&gt; e)[0]"><path d="M 298.500000 1014.000000 L 298.500000 1092.000000 S 298.500000 1102.000000 288.500000 1102.000000 L 286.250000 1102.000000 S 276.250000 1102.000000 276.250000 1112.000000 L 276.250000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(m -&gt; l)[0]"><path d="M 209.000000 768.000000 L 209.000000 896.000000 S 209.000000 906.000000 219.000000 906.000000 L 276.250000 906.000000 S 286.250000 906.000000 286.250000 916.000000 L 286.250000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(m -&gt; n)[0]"><path d="M 190.000000 768.000000 L 190.000000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(n -&gt; i)[0]"><path d="M 190.000000 1260.000000 L 190.000000 1334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(d -&gt; n)[0]"><path d="M 271.500000 768.000000 L 271.500000 796.250000 C 271.500000 815.750000 252.000000 796.250000 252.000000 815.750000 L 252.000000 1042.000000 S 252.000000 1052.000000 242.000000 1052.000000 L 213.250000 1052.000000 S 203.250000 1052.000000 203.250000 1062.000000 L 203.250000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(f -&gt; n)[0]"><path d="M 107.000000 1014.000000 L 107.000000 1142.000000 S 107.000000 1152.000000 117.000000 1152.000000 L 166.750000 1152.000000 S 176.750000 1152.000000 176.750000 1162.000000 L 176.750000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; o)[0]"><path d="M 359.000000 422.000000 L 359.000000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(p -&gt; l)[0]"><path d="M 432.500000 768.000000 L 432.500000 796.000000 S 432.500000 806.000000 422.500000 806.000000 L 320.750000 806.000000 S 310.750000 806.000000 310.750000 816.000000 L 310.750000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(e -&gt; q)[0]"><path d="M 263.000000 1260.000000 L 263.000000 1334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><mask id="995418486" maskUnits="userSpaceOnUse" x="12" y="10" width="449" height="1532">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="313.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="339.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="313.000000" y="354.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="339.500000" y="392.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="240.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="266.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="258.000000" y="700.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="285.000000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="236.000000" y="1192.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="262.500000" y="1230.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="89.000000" y="946.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="984.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="96.000000" y="700.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="123.000000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="23.000000" y="700.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.500000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="157.000000" y="1338.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="181.500000" y="1376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="339.000000" y="12.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="364.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="155.000000" y="1474.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="181.500000" y="1512.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="274.000000" y="946.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="298.500000" y="984.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="170.000000" y="700.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="198.500000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="163.000000" y="1192.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.500000" y="1230.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="332.000000" y="700.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="359.000000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="406.000000" y="700.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="432.500000" y="738.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="235.000000" y="1338.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="262.000000" y="1376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 340.071429 276.000000 L 340.071429 350.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(c -&gt; b)[0]"><path d="M 267.071429 276.000000 L 267.071429 304.000000 S 267.071429 314.000000 277.071429 314.000000 L 316.821429 314.000000 S 326.821429 314.000000 326.821429 324.000000 L 326.821429 350.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(d -&gt; e)[0]"><path d="M 285.000000 768.000000 L 285.000000 846.000000 S 285.000000 856.000000 275.000000 856.000000 L 273.000000 856.000000 S 263.000000 856.000000 263.000000 866.000000 L 263.000000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(f -&gt; e)[0]"><path d="M 124.000000 1014.000000 L 124.000000 1092.000000 S 124.000000 1102.000000 134.000000 1102.000000 L 239.750000 1102.000000 S 249.750000 1102.000000 249.750000 1112.000000 L 249.750000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; f)[0]"><path d="M 336.285714 422.000000 L 336.285714 550.000000 S 336.285714 560.000000 326.285714 560.000000 L 96.000000 560.000000 S 86.000000 560.000000 86.000000 570.000000 L 86.000000 796.000000 S 86.000000 806.000000 96.000000 806.000000 L 97.000000 806.000000 S 107.000000 806.000000 107.000000 816.000000 L 107.000000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; g)[0]"><path d="M 343.857143 422.000000 L 343.857143 600.000000 S 343.857143 610.000000 333.857143 610.000000 L 134.000000 610.000000 S 124.000000 610.000000 124.000000 620.000000 L 124.000000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(g -&gt; f)[0]"><path d="M 124.000000 768.000000 L 124.000000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; h)[0]"><path d="M 328.714286 422.000000 L 328.714286 500.000000 S 328.714286 510.000000 318.714286 510.000000 L 59.500000 510.000000 S 49.500000 510.000000 49.500000 520.000000 L 49.500000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; i)[0]"><path d="M 321.142857 422.000000 L 321.142857 450.000000 S 321.142857 460.000000 311.142857 460.000000 L 22.000000 460.000000 S 12.000000 460.000000 12.000000 470.000000 L 12.000000 1288.000000 S 12.000000 1298.000000 22.000000 1298.000000 L 163.666667 1298.000000 S 173.666667 1298.000000 173.666667 1308.000000 L 173.666667 1334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; d)[0]"><path d="M 351.428571 422.000000 L 351.428571 650.000000 S 351.428571 660.000000 341.428571 660.000000 L 295.000000 660.000000 S 285.000000 660.000000 285.000000 670.000000 L 285.000000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(j -&gt; c)[0]"><path d="M 351.571429 80.000000 L 351.571429 108.000000 S 351.571429 118.000000 341.571429 118.000000 L 277.071429 118.000000 S 267.071429 118.000000 267.071429 128.000000 L 267.071429 204.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(j -&gt; a)[0]"><path d="M 364.071429 80.000000 L 364.071429 158.000000 S 364.071429 168.000000 354.071429 168.000000 L 350.071429 168.000000 S 340.071429 168.000000 340.071429 178.000000 L 340.071429 204.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; j)[0]"><path d="M 353.321429 352.000000 L 353.321429 324.000000 S 353.321429 314.000000 363.321429 314.000000 L 366.571429 314.000000 S 376.571429 314.000000 376.571429 304.000000 L 376.571429 82.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(i -&gt; k)[0]"><path d="M 181.833333 1406.000000 L 181.833333 1470.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(d -&gt; l)[0]"><path d="M 298.500000 768.000000 L 298.500000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(l -&gt; e)[0]"><path d="M 298.500000 1014.000000 L 298.500000 1092.000000 S 298.500000 1102.000000 288.500000 1102.000000 L 286.250000 1102.000000 S 276.250000 1102.000000 276.250000 1112.000000 L 276.250000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(m -&gt; l)[0]"><path d="M 209.000000 768.000000 L 209.000000 896.000000 S 209.000000 906.000000 219.000000 906.000000 L 276.250000 906.000000 S 286.250000 906.000000 286.250000 916.000000 L 286.250000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(m -&gt; n)[0]"><path d="M 190.000000 768.000000 L 190.000000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(n -&gt; i)[0]"><path d="M 190.000000 1260.000000 L 190.000000 1334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(d -&gt; n)[0]"><path d="M 271.500000 768.000000 L 271.500000 796.250000 C 271.500000 815.750000 252.000000 796.250000 252.000000 815.750000 L 252.000000 1042.000000 S 252.000000 1052.000000 242.000000 1052.000000 L 213.250000 1052.000000 S 203.250000 1052.000000 203.250000 1062.000000 L 203.250000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(f -&gt; n)[0]"><path d="M 107.000000 1014.000000 L 107.000000 1142.000000 S 107.000000 1152.000000 117.000000 1152.000000 L 166.750000 1152.000000 S 176.750000 1152.000000 176.750000 1162.000000 L 176.750000 1188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(b -&gt; o)[0]"><path d="M 359.000000 422.000000 L 359.000000 696.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(p -&gt; l)[0]"><path d="M 432.500000 768.000000 L 432.500000 796.000000 S 432.500000 806.000000 422.500000 806.000000 L 320.750000 806.000000 S 310.750000 806.000000 310.750000 816.000000 L 310.750000 942.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><g id="(e -&gt; q)[0]"><path d="M 263.000000 1260.000000 L 263.000000 1334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#995418486)" /></g><mask id="995418486" maskUnits="userSpaceOnUse" x="12" y="10" width="449" height="1532">
 <rect x="12" y="10" width="449" height="1532" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg b/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
index cc71dcf1f..46c7bfbd4 100644
--- a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1410" height="666" viewBox="-2 0 1410 666"><rect x="-2.000000" y="0.000000" width="1410.000000" height="666.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1410 666"><svg id="d2-svg" width="1410" height="666" viewBox="-2 0 1410 666"><rect x="-2.000000" y="0.000000" width="1410.000000" height="666.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="229.000000" y="50.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="255.500000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="tree"><g class="shape" ><rect x="218.000000" y="216.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="255.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="and"><g class="shape" ><rect x="6.000000" y="216.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">and</text></g><g id="nodes"><g class="shape" ><rect x="352.000000" y="216.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="395.500000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nodes</text></g><g id="some"><g class="shape" ><rect x="0.000000" y="382.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="41.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">some</text></g><g id="more"><g class="shape" ><rect x="143.000000" y="382.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="183.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">more</text></g><g id="many"><g class="shape" ><rect x="284.000000" y="382.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="326.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">many</text></g><g id="then"><g class="shape" ><rect x="508.000000" y="50.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="547.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">then</text></g><g id="here"><g class="shape" ><rect x="499.000000" y="216.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">here</text></g><g id="you"><g class="shape" ><rect x="501.000000" y="382.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">you</text></g><g id="have"><g class="shape" ><rect x="664.000000" y="50.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="703.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">have</text></g><g id="hierarchy"><g class="shape" ><rect x="637.000000" y="216.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="693.500000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally"><g class="shape" ><rect x="791.000000" y="41.000000" width="321.000000" height="623.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="951.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="another"><g class="shape" ><rect x="1303.000000" y="382.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1354.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">another</text></g><g id="of"><g class="shape" ><rect x="1324.000000" y="548.000000" width="60.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1354.000000" y="586.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">of</text></g><g id="nesting"><g class="shape" ><rect x="1153.000000" y="216.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1202.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nesting</text></g><g id="trees"><g class="shape" ><rect x="1161.000000" y="382.000000" width="82.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1202.000000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="finally.a"><g class="shape" ><rect x="1002.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1028.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="finally.tree"><g class="shape" ><rect x="851.000000" y="402.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="888.000000" y="440.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="985.000000" y="70.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1029.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="831.000000" y="568.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="887.500000" y="606.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="985.000000" y="402.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1022.500000" y="440.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 255.000000 118.000000 C 255.000000 156.000000 255.000000 176.000000 255.000000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(a -&gt; and)[0]"><path d="M 226.635909 94.026790 C 78.900000 151.460422 41.500000 176.000000 41.500000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(a -&gt; nodes)[0]"><path d="M 284.218029 99.678707 C 372.900000 152.530961 395.500000 176.000000 395.500000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(and -&gt; some)[0]"><path d="M 41.500000 284.000000 C 41.500000 322.000000 41.500000 342.000000 41.500000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(tree -&gt; more)[0]"><path d="M 225.266952 283.515287 C 192.114458 322.000000 183.500000 342.000000 183.500000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(tree -&gt; many)[0]"><path d="M 284.835060 283.513031 C 318.105422 322.000000 326.750000 342.000000 326.750000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(then -&gt; here)[0]"><path d="M 542.784863 117.985640 C 538.204819 156.000000 537.000000 176.000000 537.000000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(here -&gt; you)[0]"><path d="M 537.000000 284.000000 C 537.000000 322.000000 537.000000 342.000000 537.000000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(have -&gt; hierarchy)[0]"><path d="M 703.250000 118.000000 C 703.250000 156.000000 702.050000 176.000000 697.726581 212.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(then -&gt; hierarchy)[0]"><path d="M 579.076448 117.464015 C 614.942771 156.000000 632.650000 176.000000 663.677232 212.937181" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(finally -&gt; another)[0]"><path d="M 1114.743860 385.156596 L 1298.762280 399.609207" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(another -&gt; of)[0]"><path d="M 1354.250000 450.000000 C 1354.250000 488.000000 1354.250000 508.000000 1354.250000 544.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(nesting -&gt; trees)[0]"><path d="M 1201.750000 284.000000 C 1201.750000 322.000000 1201.750000 342.000000 1201.750000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(finally -&gt; trees)[0]"><path d="M 1114.664149 406.420315 L 1156.921703 393.622946" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(a -&gt; tree)[0]"><path d="M 1000.525661 286.084921 C 910.450000 339.014336 887.500000 362.500000 887.500000 398.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(inside -&gt; a)[0]"><path d="M 1028.750000 138.500000 C 1028.750000 176.500000 1028.750000 196.500000 1028.750000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 887.500000 470.500000 C 887.500000 508.500000 887.500000 528.500000 887.500000 564.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(a -&gt; root)[0]"><path d="M 1025.904150 304.493419 C 1022.813253 342.500000 1022.000000 362.500000 1022.000000 398.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><mask id="789036622" maskUnits="userSpaceOnUse" x="-2" y="0" width="1410" height="666">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="229.000000" y="50.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="255.500000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="tree"><g class="shape" ><rect x="218.000000" y="216.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="255.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="and"><g class="shape" ><rect x="6.000000" y="216.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">and</text></g><g id="nodes"><g class="shape" ><rect x="352.000000" y="216.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="395.500000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nodes</text></g><g id="some"><g class="shape" ><rect x="0.000000" y="382.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="41.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">some</text></g><g id="more"><g class="shape" ><rect x="143.000000" y="382.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="183.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">more</text></g><g id="many"><g class="shape" ><rect x="284.000000" y="382.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="326.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">many</text></g><g id="then"><g class="shape" ><rect x="508.000000" y="50.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="547.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">then</text></g><g id="here"><g class="shape" ><rect x="499.000000" y="216.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">here</text></g><g id="you"><g class="shape" ><rect x="501.000000" y="382.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">you</text></g><g id="have"><g class="shape" ><rect x="664.000000" y="50.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="703.000000" y="88.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">have</text></g><g id="hierarchy"><g class="shape" ><rect x="637.000000" y="216.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="693.500000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally"><g class="shape" ><rect x="791.000000" y="41.000000" width="321.000000" height="623.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="951.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="another"><g class="shape" ><rect x="1303.000000" y="382.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1354.500000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">another</text></g><g id="of"><g class="shape" ><rect x="1324.000000" y="548.000000" width="60.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1354.000000" y="586.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">of</text></g><g id="nesting"><g class="shape" ><rect x="1153.000000" y="216.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1202.000000" y="254.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nesting</text></g><g id="trees"><g class="shape" ><rect x="1161.000000" y="382.000000" width="82.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1202.000000" y="420.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="finally.a"><g class="shape" ><rect x="1002.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1028.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="finally.tree"><g class="shape" ><rect x="851.000000" y="402.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="888.000000" y="440.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="985.000000" y="70.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1029.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="831.000000" y="568.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="887.500000" y="606.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="985.000000" y="402.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1022.500000" y="440.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 255.000000 118.000000 C 255.000000 156.000000 255.000000 176.000000 255.000000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(a -&gt; and)[0]"><path d="M 226.635909 94.026790 C 78.900000 151.460422 41.500000 176.000000 41.500000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(a -&gt; nodes)[0]"><path d="M 284.218029 99.678707 C 372.900000 152.530961 395.500000 176.000000 395.500000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(and -&gt; some)[0]"><path d="M 41.500000 284.000000 C 41.500000 322.000000 41.500000 342.000000 41.500000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(tree -&gt; more)[0]"><path d="M 225.266952 283.515287 C 192.114458 322.000000 183.500000 342.000000 183.500000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(tree -&gt; many)[0]"><path d="M 284.835060 283.513031 C 318.105422 322.000000 326.750000 342.000000 326.750000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(then -&gt; here)[0]"><path d="M 542.784863 117.985640 C 538.204819 156.000000 537.000000 176.000000 537.000000 212.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(here -&gt; you)[0]"><path d="M 537.000000 284.000000 C 537.000000 322.000000 537.000000 342.000000 537.000000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(have -&gt; hierarchy)[0]"><path d="M 703.250000 118.000000 C 703.250000 156.000000 702.050000 176.000000 697.726581 212.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(then -&gt; hierarchy)[0]"><path d="M 579.076448 117.464015 C 614.942771 156.000000 632.650000 176.000000 663.677232 212.937181" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(finally -&gt; another)[0]"><path d="M 1114.743860 385.156596 L 1298.762280 399.609207" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(another -&gt; of)[0]"><path d="M 1354.250000 450.000000 C 1354.250000 488.000000 1354.250000 508.000000 1354.250000 544.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(nesting -&gt; trees)[0]"><path d="M 1201.750000 284.000000 C 1201.750000 322.000000 1201.750000 342.000000 1201.750000 378.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="(finally -&gt; trees)[0]"><path d="M 1114.664149 406.420315 L 1156.921703 393.622946" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(a -&gt; tree)[0]"><path d="M 1000.525661 286.084921 C 910.450000 339.014336 887.500000 362.500000 887.500000 398.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(inside -&gt; a)[0]"><path d="M 1028.750000 138.500000 C 1028.750000 176.500000 1028.750000 196.500000 1028.750000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 887.500000 470.500000 C 887.500000 508.500000 887.500000 528.500000 887.500000 564.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><g id="finally.(a -&gt; root)[0]"><path d="M 1025.904150 304.493419 C 1022.813253 342.500000 1022.000000 362.500000 1022.000000 398.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#789036622)" /></g><mask id="789036622" maskUnits="userSpaceOnUse" x="-2" y="0" width="1410" height="666">
 <rect x="-2" y="0" width="1410" height="666" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg b/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
index 8e03188a3..2f2649fce 100644
--- a/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1051" height="930" viewBox="10 10 1051 930"><rect x="10.000000" y="10.000000" width="1051.000000" height="930.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1051 930"><svg id="d2-svg" width="1051" height="930" viewBox="10 10 1051 930"><rect x="10.000000" y="10.000000" width="1051.000000" height="930.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="319.000000" y="530.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.500000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="tree"><g class="shape" ><rect x="106.000000" y="726.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="and"><g class="shape" ><rect x="223.000000" y="726.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">and</text></g><g id="nodes"><g class="shape" ><rect x="315.000000" y="726.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="358.500000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nodes</text></g><g id="some"><g class="shape" ><rect x="218.000000" y="872.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">some</text></g><g id="more"><g class="shape" ><rect x="12.000000" y="872.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="52.500000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">more</text></g><g id="many"><g class="shape" ><rect x="113.000000" y="872.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="155.500000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">many</text></g><g id="then"><g class="shape" ><rect x="434.000000" y="530.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="473.000000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">then</text></g><g id="here"><g class="shape" ><rect x="422.000000" y="726.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="460.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">here</text></g><g id="you"><g class="shape" ><rect x="424.000000" y="872.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="460.000000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">you</text></g><g id="have"><g class="shape" ><rect x="554.000000" y="530.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="593.000000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">have</text></g><g id="hierarchy"><g class="shape" ><rect x="518.000000" y="726.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="574.500000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally"><g class="shape" ><rect x="652.000000" y="12.000000" width="288.000000" height="584.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="796.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="another"><g class="shape" ><rect x="697.000000" y="726.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="748.500000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">another</text></g><g id="of"><g class="shape" ><rect x="719.000000" y="872.000000" width="60.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="749.000000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">of</text></g><g id="nesting"><g class="shape" ><rect x="961.000000" y="530.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1010.000000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nesting</text></g><g id="trees"><g class="shape" ><rect x="955.000000" y="726.000000" width="82.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="996.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="finally.a"><g class="shape" ><rect x="741.000000" y="198.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="767.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="finally.tree"><g class="shape" ><rect x="722.000000" y="344.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="759.000000" y="382.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="724.000000" y="62.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="768.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="702.000000" y="480.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="758.500000" y="518.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="816.000000" y="344.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="853.500000" y="382.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 332.500000 598.000000 L 332.500000 626.000000 S 332.500000 636.000000 322.500000 636.000000 L 153.166667 636.000000 S 143.166667 636.000000 143.166667 646.000000 L 143.166667 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(a -&gt; and)[0]"><path d="M 345.750000 598.000000 L 345.750000 676.000000 S 345.750000 686.000000 335.750000 686.000000 L 269.500000 686.000000 S 259.500000 686.000000 259.500000 696.000000 L 259.500000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(a -&gt; nodes)[0]"><path d="M 359.000000 598.000000 L 359.000000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(and -&gt; some)[0]"><path d="M 259.500000 794.000000 L 259.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(tree -&gt; more)[0]"><path d="M 130.833333 794.000000 L 130.833333 822.000000 S 130.833333 832.000000 120.833333 832.000000 L 62.500000 832.000000 S 52.500000 832.000000 52.500000 842.000000 L 52.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(tree -&gt; many)[0]"><path d="M 155.500000 794.000000 L 155.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(then -&gt; here)[0]"><path d="M 460.500000 598.000000 L 460.500000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(here -&gt; you)[0]"><path d="M 460.500000 794.000000 L 460.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(have -&gt; hierarchy)[0]"><path d="M 593.833333 598.000000 L 593.833333 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(then -&gt; hierarchy)[0]"><path d="M 486.500000 598.000000 L 486.500000 626.000000 S 486.500000 636.000000 496.500000 636.000000 L 546.166667 636.000000 S 556.166667 636.000000 556.166667 646.000000 L 556.166667 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(finally -&gt; another)[0]"><path d="M 749.000000 598.000000 L 749.000000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(another -&gt; of)[0]"><path d="M 749.000000 794.000000 L 749.000000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(nesting -&gt; trees)[0]"><path d="M 1010.333333 598.000000 L 1010.333333 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(finally -&gt; trees)[0]"><path d="M 845.166667 598.000000 L 845.166667 626.000000 S 845.166667 636.000000 855.166667 636.000000 L 973.000000 636.000000 S 983.000000 636.000000 983.000000 646.000000 L 983.000000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(a -&gt; tree)[0]"><path d="M 759.333333 266.000000 L 759.333333 340.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(inside -&gt; a)[0]"><path d="M 768.166667 130.000000 L 768.166667 194.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 759.333333 412.000000 L 759.333333 476.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(a -&gt; root)[0]"><path d="M 777.000000 266.000000 L 777.000000 294.000000 S 777.000000 304.000000 787.000000 304.000000 L 843.833333 304.000000 S 853.833333 304.000000 853.833333 314.000000 L 853.833333 340.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><mask id="2541641419" maskUnits="userSpaceOnUse" x="10" y="10" width="1051" height="930">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="319.000000" y="530.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.500000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="tree"><g class="shape" ><rect x="106.000000" y="726.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="and"><g class="shape" ><rect x="223.000000" y="726.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">and</text></g><g id="nodes"><g class="shape" ><rect x="315.000000" y="726.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="358.500000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nodes</text></g><g id="some"><g class="shape" ><rect x="218.000000" y="872.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">some</text></g><g id="more"><g class="shape" ><rect x="12.000000" y="872.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="52.500000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">more</text></g><g id="many"><g class="shape" ><rect x="113.000000" y="872.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="155.500000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">many</text></g><g id="then"><g class="shape" ><rect x="434.000000" y="530.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="473.000000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">then</text></g><g id="here"><g class="shape" ><rect x="422.000000" y="726.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="460.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">here</text></g><g id="you"><g class="shape" ><rect x="424.000000" y="872.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="460.000000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">you</text></g><g id="have"><g class="shape" ><rect x="554.000000" y="530.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="593.000000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">have</text></g><g id="hierarchy"><g class="shape" ><rect x="518.000000" y="726.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="574.500000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally"><g class="shape" ><rect x="652.000000" y="12.000000" width="288.000000" height="584.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="796.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="another"><g class="shape" ><rect x="697.000000" y="726.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="748.500000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">another</text></g><g id="of"><g class="shape" ><rect x="719.000000" y="872.000000" width="60.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="749.000000" y="910.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">of</text></g><g id="nesting"><g class="shape" ><rect x="961.000000" y="530.000000" width="98.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1010.000000" y="568.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">nesting</text></g><g id="trees"><g class="shape" ><rect x="955.000000" y="726.000000" width="82.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="996.000000" y="764.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">trees</text></g><g id="finally.a"><g class="shape" ><rect x="741.000000" y="198.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="767.500000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="finally.tree"><g class="shape" ><rect x="722.000000" y="344.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="759.000000" y="382.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="724.000000" y="62.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="768.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="702.000000" y="480.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="758.500000" y="518.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="816.000000" y="344.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="853.500000" y="382.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 332.500000 598.000000 L 332.500000 626.000000 S 332.500000 636.000000 322.500000 636.000000 L 153.166667 636.000000 S 143.166667 636.000000 143.166667 646.000000 L 143.166667 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(a -&gt; and)[0]"><path d="M 345.750000 598.000000 L 345.750000 676.000000 S 345.750000 686.000000 335.750000 686.000000 L 269.500000 686.000000 S 259.500000 686.000000 259.500000 696.000000 L 259.500000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(a -&gt; nodes)[0]"><path d="M 359.000000 598.000000 L 359.000000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(and -&gt; some)[0]"><path d="M 259.500000 794.000000 L 259.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(tree -&gt; more)[0]"><path d="M 130.833333 794.000000 L 130.833333 822.000000 S 130.833333 832.000000 120.833333 832.000000 L 62.500000 832.000000 S 52.500000 832.000000 52.500000 842.000000 L 52.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(tree -&gt; many)[0]"><path d="M 155.500000 794.000000 L 155.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(then -&gt; here)[0]"><path d="M 460.500000 598.000000 L 460.500000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(here -&gt; you)[0]"><path d="M 460.500000 794.000000 L 460.500000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(have -&gt; hierarchy)[0]"><path d="M 593.833333 598.000000 L 593.833333 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(then -&gt; hierarchy)[0]"><path d="M 486.500000 598.000000 L 486.500000 626.000000 S 486.500000 636.000000 496.500000 636.000000 L 546.166667 636.000000 S 556.166667 636.000000 556.166667 646.000000 L 556.166667 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(finally -&gt; another)[0]"><path d="M 749.000000 598.000000 L 749.000000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(another -&gt; of)[0]"><path d="M 749.000000 794.000000 L 749.000000 868.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(nesting -&gt; trees)[0]"><path d="M 1010.333333 598.000000 L 1010.333333 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="(finally -&gt; trees)[0]"><path d="M 845.166667 598.000000 L 845.166667 626.000000 S 845.166667 636.000000 855.166667 636.000000 L 973.000000 636.000000 S 983.000000 636.000000 983.000000 646.000000 L 983.000000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(a -&gt; tree)[0]"><path d="M 759.333333 266.000000 L 759.333333 340.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(inside -&gt; a)[0]"><path d="M 768.166667 130.000000 L 768.166667 194.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 759.333333 412.000000 L 759.333333 476.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><g id="finally.(a -&gt; root)[0]"><path d="M 777.000000 266.000000 L 777.000000 294.000000 S 777.000000 304.000000 787.000000 304.000000 L 843.833333 304.000000 S 853.833333 304.000000 853.833333 314.000000 L 853.833333 340.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2541641419)" /></g><mask id="2541641419" maskUnits="userSpaceOnUse" x="10" y="10" width="1051" height="930">
 <rect x="10" y="10" width="1051" height="930" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/direction/dagre/sketch.exp.svg b/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
index fbd45a36d..ccee4f058 100644
--- a/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="396" height="1266" viewBox="-2 -2 396 1266"><rect x="-2.000000" y="-2.000000" width="396.000000" height="1266.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 396 1266"><svg id="d2-svg" width="396" height="1266" viewBox="-2 -2 396 1266"><rect x="-2.000000" y="-2.000000" width="396.000000" height="1266.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="207.000000" width="297.000000" height="1055.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="148.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">b</text></g><g id="c"><g class="shape" ><rect x="338.000000" y="432.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="364.500000" y="470.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="338.000000" y="598.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="365.000000" y="636.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="338.000000" y="764.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="364.500000" y="802.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="b.1"><g class="shape" ><rect x="114.000000" y="236.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="140.000000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="b.2"><g class="shape" ><rect x="20.000000" y="438.000000" width="143.000000" height="794.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="91.500000" y="426.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">2</text></g><g id="b.3"><g class="shape" ><rect x="204.000000" y="618.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="230.500000" y="656.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="b.4"><g class="shape" ><rect x="204.000000" y="784.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="231.000000" y="822.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="b.5"><g class="shape" ><rect x="204.000000" y="950.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="230.500000" y="988.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="b.2.a"><g class="shape" ><rect x="71.000000" y="470.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="97.500000" y="508.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b.2.b"><g class="shape" ><rect x="61.000000" y="636.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="674.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="b.2.c"><g class="shape" ><rect x="61.000000" y="802.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b.2.d"><g class="shape" ><rect x="60.000000" y="968.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.000000" y="1006.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="b.2.e"><g class="shape" ><rect x="61.000000" y="1134.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="1172.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.250000 68.000000 C 140.250000 106.000000 140.250000 126.000000 140.250000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="(b -&gt; c)[0]"><path d="M 299.606953 463.257219 L 334.036093 449.485563" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="(c -&gt; d)[0]"><path d="M 364.750000 500.000000 C 364.750000 538.000000 364.750000 558.000000 364.750000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="(d -&gt; e)[0]"><path d="M 364.750000 666.000000 C 364.750000 704.000000 364.750000 724.000000 364.750000 760.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(1 -&gt; 2)[0]"><path d="M 122.129998 304.273646 C 102.210843 342.500000 97.000000 362.500000 97.000000 398.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(2 -&gt; 3)[0]"><path d="M 165.478922 637.210402 L 200.542156 632.079197" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(3 -&gt; 4)[0]"><path d="M 230.750000 686.500000 C 230.750000 724.500000 230.750000 744.500000 230.750000 780.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(4 -&gt; 5)[0]"><path d="M 230.750000 852.500000 C 230.750000 890.500000 230.750000 910.500000 230.750000 946.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(a -&gt; b)[0]"><path d="M 92.784863 538.485640 C 88.204819 576.500000 87.000000 596.500000 87.000000 632.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(b -&gt; c)[0]"><path d="M 87.000000 704.500000 C 87.000000 742.500000 87.000000 762.500000 87.000000 798.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(c -&gt; d)[0]"><path d="M 87.000000 870.500000 C 87.000000 908.500000 87.000000 928.500000 87.000000 964.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(d -&gt; e)[0]"><path d="M 87.000000 1036.500000 C 87.000000 1074.500000 87.000000 1094.500000 87.000000 1130.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><mask id="3456939858" maskUnits="userSpaceOnUse" x="-2" y="-2" width="396" height="1266">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="207.000000" width="297.000000" height="1055.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="148.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">b</text></g><g id="c"><g class="shape" ><rect x="338.000000" y="432.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="364.500000" y="470.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="338.000000" y="598.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="365.000000" y="636.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="338.000000" y="764.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="364.500000" y="802.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="b.1"><g class="shape" ><rect x="114.000000" y="236.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="140.000000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="b.2"><g class="shape" ><rect x="20.000000" y="438.000000" width="143.000000" height="794.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="91.500000" y="426.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">2</text></g><g id="b.3"><g class="shape" ><rect x="204.000000" y="618.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="230.500000" y="656.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="b.4"><g class="shape" ><rect x="204.000000" y="784.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="231.000000" y="822.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="b.5"><g class="shape" ><rect x="204.000000" y="950.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="230.500000" y="988.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="b.2.a"><g class="shape" ><rect x="71.000000" y="470.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="97.500000" y="508.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b.2.b"><g class="shape" ><rect x="61.000000" y="636.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="674.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="b.2.c"><g class="shape" ><rect x="61.000000" y="802.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b.2.d"><g class="shape" ><rect x="60.000000" y="968.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.000000" y="1006.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="b.2.e"><g class="shape" ><rect x="61.000000" y="1134.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="1172.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.250000 68.000000 C 140.250000 106.000000 140.250000 126.000000 140.250000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="(b -&gt; c)[0]"><path d="M 299.606953 463.257219 L 334.036093 449.485563" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="(c -&gt; d)[0]"><path d="M 364.750000 500.000000 C 364.750000 538.000000 364.750000 558.000000 364.750000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="(d -&gt; e)[0]"><path d="M 364.750000 666.000000 C 364.750000 704.000000 364.750000 724.000000 364.750000 760.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(1 -&gt; 2)[0]"><path d="M 122.129998 304.273646 C 102.210843 342.500000 97.000000 362.500000 97.000000 398.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(2 -&gt; 3)[0]"><path d="M 165.478922 637.210402 L 200.542156 632.079197" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(3 -&gt; 4)[0]"><path d="M 230.750000 686.500000 C 230.750000 724.500000 230.750000 744.500000 230.750000 780.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.(4 -&gt; 5)[0]"><path d="M 230.750000 852.500000 C 230.750000 890.500000 230.750000 910.500000 230.750000 946.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(a -&gt; b)[0]"><path d="M 92.784863 538.485640 C 88.204819 576.500000 87.000000 596.500000 87.000000 632.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(b -&gt; c)[0]"><path d="M 87.000000 704.500000 C 87.000000 742.500000 87.000000 762.500000 87.000000 798.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(c -&gt; d)[0]"><path d="M 87.000000 870.500000 C 87.000000 908.500000 87.000000 928.500000 87.000000 964.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><g id="b.2.(d -&gt; e)[0]"><path d="M 87.000000 1036.500000 C 87.000000 1074.500000 87.000000 1094.500000 87.000000 1130.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3456939858)" /></g><mask id="3456939858" maskUnits="userSpaceOnUse" x="-2" y="-2" width="396" height="1266">
 <rect x="-2" y="-2" width="396" height="1266" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/direction/elk/sketch.exp.svg b/e2etests/testdata/stable/direction/elk/sketch.exp.svg
index 14517e110..881ece3d8 100644
--- a/e2etests/testdata/stable/direction/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/direction/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258" height="1902" viewBox="10 10 258 1902"><rect x="10.000000" y="10.000000" width="258.000000" height="1902.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 258 1902"><svg id="d2-svg" width="258" height="1902" viewBox="10 10 258 1902"><rect x="10.000000" y="10.000000" width="258.000000" height="1902.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="112.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="254.000000" height="1354.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="139.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">b</text></g><g id="c"><g class="shape" ><rect x="112.000000" y="1572.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="1610.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="112.000000" y="1708.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.000000" y="1746.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="112.000000" y="1844.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="1882.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="b.1"><g class="shape" ><rect x="113.000000" y="198.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="b.2"><g class="shape" ><rect x="62.000000" y="334.000000" width="154.000000" height="710.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">2</text></g><g id="b.3"><g class="shape" ><rect x="112.000000" y="1114.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="1152.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="b.4"><g class="shape" ><rect x="112.000000" y="1250.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="1288.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="b.5"><g class="shape" ><rect x="112.000000" y="1386.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="1424.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="b.2.a"><g class="shape" ><rect x="112.000000" y="384.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="422.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b.2.b"><g class="shape" ><rect x="112.000000" y="520.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="b.2.c"><g class="shape" ><rect x="112.000000" y="656.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="694.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b.2.d"><g class="shape" ><rect x="112.000000" y="792.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.000000" y="830.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="b.2.e"><g class="shape" ><rect x="112.000000" y="928.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="966.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 139.000000 80.000000 L 139.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="(b -&gt; c)[0]"><path d="M 139.000000 1504.000000 L 139.000000 1568.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="(c -&gt; d)[0]"><path d="M 139.000000 1640.000000 L 139.000000 1704.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="(d -&gt; e)[0]"><path d="M 139.000000 1776.000000 L 139.000000 1840.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(1 -&gt; 2)[0]"><path d="M 139.000000 266.000000 L 139.000000 330.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(2 -&gt; 3)[0]"><path d="M 139.000000 1046.000000 L 139.000000 1110.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(3 -&gt; 4)[0]"><path d="M 139.000000 1182.000000 L 139.000000 1246.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(4 -&gt; 5)[0]"><path d="M 139.000000 1318.000000 L 139.000000 1382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(a -&gt; b)[0]"><path d="M 139.000000 452.000000 L 139.000000 516.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(b -&gt; c)[0]"><path d="M 139.000000 588.000000 L 139.000000 652.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(c -&gt; d)[0]"><path d="M 139.000000 724.000000 L 139.000000 788.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(d -&gt; e)[0]"><path d="M 139.000000 860.000000 L 139.000000 924.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><mask id="2287714895" maskUnits="userSpaceOnUse" x="10" y="10" width="258" height="1902">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="112.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="254.000000" height="1354.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="139.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">b</text></g><g id="c"><g class="shape" ><rect x="112.000000" y="1572.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="1610.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="112.000000" y="1708.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.000000" y="1746.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="112.000000" y="1844.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="1882.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="b.1"><g class="shape" ><rect x="113.000000" y="198.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="b.2"><g class="shape" ><rect x="62.000000" y="334.000000" width="154.000000" height="710.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">2</text></g><g id="b.3"><g class="shape" ><rect x="112.000000" y="1114.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="1152.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="b.4"><g class="shape" ><rect x="112.000000" y="1250.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="139.000000" y="1288.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="b.5"><g class="shape" ><rect x="112.000000" y="1386.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="1424.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><g id="b.2.a"><g class="shape" ><rect x="112.000000" y="384.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="422.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b.2.b"><g class="shape" ><rect x="112.000000" y="520.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="b.2.c"><g class="shape" ><rect x="112.000000" y="656.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="694.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b.2.d"><g class="shape" ><rect x="112.000000" y="792.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.000000" y="830.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="b.2.e"><g class="shape" ><rect x="112.000000" y="928.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="966.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 139.000000 80.000000 L 139.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="(b -&gt; c)[0]"><path d="M 139.000000 1504.000000 L 139.000000 1568.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="(c -&gt; d)[0]"><path d="M 139.000000 1640.000000 L 139.000000 1704.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="(d -&gt; e)[0]"><path d="M 139.000000 1776.000000 L 139.000000 1840.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(1 -&gt; 2)[0]"><path d="M 139.000000 266.000000 L 139.000000 330.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(2 -&gt; 3)[0]"><path d="M 139.000000 1046.000000 L 139.000000 1110.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(3 -&gt; 4)[0]"><path d="M 139.000000 1182.000000 L 139.000000 1246.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.(4 -&gt; 5)[0]"><path d="M 139.000000 1318.000000 L 139.000000 1382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(a -&gt; b)[0]"><path d="M 139.000000 452.000000 L 139.000000 516.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(b -&gt; c)[0]"><path d="M 139.000000 588.000000 L 139.000000 652.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(c -&gt; d)[0]"><path d="M 139.000000 724.000000 L 139.000000 788.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><g id="b.2.(d -&gt; e)[0]"><path d="M 139.000000 860.000000 L 139.000000 924.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2287714895)" /></g><mask id="2287714895" maskUnits="userSpaceOnUse" x="10" y="10" width="258" height="1902">
 <rect x="10" y="10" width="258" height="1902" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
index 7ae78eda5..6b1f7f6e2 100644
--- a/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="89" height="257" viewBox="-2 -2 89 257"><rect x="-2.000000" y="-2.000000" width="89.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 89 257"><svg id="d2-svg" width="89" height="257" viewBox="-2 -2 89 257"><rect x="-2.000000" y="-2.000000" width="89.000000" height="257.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="alpha"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" fill="#4A6FF3" class="text-bold" style="text-anchor:middle;font-size:16px">alpha</text></g><g id="beta"><g class="shape" ><rect x="5.000000" y="187.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="225.500000" fill="red" class="text-bold" style="text-anchor:middle;font-size:16px">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 42.500000 68.000000 C 42.500000 114.400000 42.500000 138.700000 42.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3077800702)" /><text x="43.000000" y="132.000000" fill="green" class="text-italic" style="text-anchor:middle;font-size:16px">gamma</text></g><mask id="3077800702" maskUnits="userSpaceOnUse" x="-2" y="-2" width="89" height="257">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="alpha"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" fill="#4A6FF3" class="text-bold" style="text-anchor:middle;font-size:16px">alpha</text></g><g id="beta"><g class="shape" ><rect x="5.000000" y="187.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="225.500000" fill="red" class="text-bold" style="text-anchor:middle;font-size:16px">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 42.500000 68.000000 C 42.500000 114.400000 42.500000 138.700000 42.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3077800702)" /><text x="43.000000" y="132.000000" fill="green" class="text-italic" style="text-anchor:middle;font-size:16px">gamma</text></g><mask id="3077800702" maskUnits="userSpaceOnUse" x="-2" y="-2" width="89" height="257">
 <rect x="-2" y="-2" width="89" height="257" fill="white"></rect>
 <rect x="17.000000" y="116.000000" width="52" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg b/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
index 377e7083c..d3905ff7b 100644
--- a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="89" height="297" viewBox="10 10 89 297"><rect x="10.000000" y="10.000000" width="89.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 89 297"><svg id="d2-svg" width="89" height="297" viewBox="10 10 89 297"><rect x="10.000000" y="10.000000" width="89.000000" height="297.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="alpha"><g class="shape" ><rect x="12.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="50.500000" fill="#4A6FF3" class="text-bold" style="text-anchor:middle;font-size:16px">alpha</text></g><g id="beta"><g class="shape" ><rect x="16.000000" y="239.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.000000" y="277.500000" fill="red" class="text-bold" style="text-anchor:middle;font-size:16px">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 54.500000 80.000000 L 54.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2996958990)" /><text x="55.000000" y="164.000000" fill="green" class="text-italic" style="text-anchor:middle;font-size:16px">gamma</text></g><mask id="2996958990" maskUnits="userSpaceOnUse" x="10" y="10" width="89" height="297">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="alpha"><g class="shape" ><rect x="12.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="50.500000" fill="#4A6FF3" class="text-bold" style="text-anchor:middle;font-size:16px">alpha</text></g><g id="beta"><g class="shape" ><rect x="16.000000" y="239.000000" width="76.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.000000" y="277.500000" fill="red" class="text-bold" style="text-anchor:middle;font-size:16px">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 54.500000 80.000000 L 54.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2996958990)" /><text x="55.000000" y="164.000000" fill="green" class="text-italic" style="text-anchor:middle;font-size:16px">gamma</text></g><mask id="2996958990" maskUnits="userSpaceOnUse" x="10" y="10" width="89" height="297">
 <rect x="10" y="10" width="89" height="297" fill="white"></rect>
 <rect x="29.000000" y="148.000000" width="52" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
index c9a7a98ce..1c70fa844 100644
--- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1624" height="378" viewBox="-2 -2 1624 378"><rect x="-2.000000" y="-2.000000" width="1624.000000" height="378.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1624 378"><svg id="d2-svg" width="1624" height="378" viewBox="-2 -2 1624 378"><rect x="-2.000000" y="-2.000000" width="1624.000000" height="378.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,29 +24,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="size XS"><g class="shape" ><rect x="993.000000" y="280.000000" width="85.000000" height="62.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1035.500000" y="315.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:13px">size XS</text></g><g id="size S"><g class="shape" ><rect x="4.000000" y="12.000000" width="80.000000" height="63.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.000000" y="48.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:14px">size S</text></g><g id="size M"><g class="shape" ><rect x="0.000000" y="278.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="316.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">size M</text></g><g id="size L"><g class="shape" ><rect x="144.000000" y="8.000000" width="93.000000" height="71.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="190.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:20px">size L</text></g><g id="size XL"><g class="shape" ><rect x="297.000000" y="5.000000" width="117.000000" height="76.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="355.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:24px">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="474.000000" y="3.000000" width="144.000000" height="81.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="546.000000" y="53.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:28px">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="678.000000" y="0.000000" width="177.000000" height="86.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="766.500000" y="54.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:32px">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="997.000000" y="15.000000" width="77.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1035.500000" y="45.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1134.000000" y="13.000000" width="100.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1184.000000" y="47.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:12px">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1294.000000" y="9.000000" width="126.000000" height="68.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1357.000000" y="49.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:18px">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1480.000000" y="7.000000" width="140.000000" height="72.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1550.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:21px">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="600.000000" y="248.000000" width="333.000000" height="126.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="766.500000" y="334.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:64px">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1035.000000 73.000000 C 1035.000000 147.800000 1035.000000 189.600000 1035.000000 276.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4183734835)" /><text x="1035.000000" y="179.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:10px">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 43.500000 77.500000 C 43.500000 148.700000 43.500000 189.200000 43.500000 274.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4183734835)" /><text x="44.000000" y="182.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:15px">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 766.000000 88.000000 C 766.000000 150.800000 766.000000 183.200000 766.000000 244.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4183734835)" /><rect x="667.000000" y="137.000000" width="199.000000" height="61.000000" fill="lavender" /><text x="766.500000" y="185.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:48px">custom 48</text></g><mask id="4183734835" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1624" height="378">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="size XS"><g class="shape" ><rect x="993.000000" y="280.000000" width="85.000000" height="62.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1035.500000" y="315.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:13px">size XS</text></g><g id="size S"><g class="shape" ><rect x="4.000000" y="12.000000" width="80.000000" height="63.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.000000" y="48.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:14px">size S</text></g><g id="size M"><g class="shape" ><rect x="0.000000" y="278.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="316.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">size M</text></g><g id="size L"><g class="shape" ><rect x="144.000000" y="8.000000" width="93.000000" height="71.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="190.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:20px">size L</text></g><g id="size XL"><g class="shape" ><rect x="297.000000" y="5.000000" width="117.000000" height="76.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="355.500000" y="51.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:24px">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="474.000000" y="3.000000" width="144.000000" height="81.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="546.000000" y="53.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:28px">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="678.000000" y="0.000000" width="177.000000" height="86.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="766.500000" y="54.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:32px">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="997.000000" y="15.000000" width="77.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1035.500000" y="45.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1134.000000" y="13.000000" width="100.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1184.000000" y="47.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:12px">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1294.000000" y="9.000000" width="126.000000" height="68.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1357.000000" y="49.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:18px">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1480.000000" y="7.000000" width="140.000000" height="72.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1550.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:21px">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="600.000000" y="248.000000" width="333.000000" height="126.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="766.500000" y="334.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:64px">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1035.000000 73.000000 C 1035.000000 147.800000 1035.000000 189.600000 1035.000000 276.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4183734835)" /><text x="1035.000000" y="179.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:10px">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 43.500000 77.500000 C 43.500000 148.700000 43.500000 189.200000 43.500000 274.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4183734835)" /><text x="44.000000" y="182.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:15px">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 766.000000 88.000000 C 766.000000 150.800000 766.000000 183.200000 766.000000 244.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4183734835)" /><rect x="667.000000" y="137.000000" width="199.000000" height="61.000000" fill="lavender" /><text x="766.500000" y="185.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:48px">custom 48</text></g><mask id="4183734835" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1624" height="378">
 <rect x="-2" y="-2" width="1624" height="378" fill="white"></rect>
 <rect x="1014.000000" y="169.000000" width="42" height="13" fill="black"></rect>
 <rect x="12.000000" y="167.000000" width="64" height="19" fill="black"></rect>
 <rect x="667.000000" y="137.000000" width="199" height="61" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
index 6d408c489..5fe3b5bfe 100644
--- a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1303" height="417" viewBox="10 10 1303 417"><rect x="10.000000" y="10.000000" width="1303.000000" height="417.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1303 417"><svg id="d2-svg" width="1303" height="417" viewBox="10 10 1303 417"><rect x="10.000000" y="10.000000" width="1303.000000" height="417.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,29 +24,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="size XS"><g class="shape" ><rect x="804.000000" y="299.000000" width="85.000000" height="62.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="846.500000" y="334.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:13px">size XS</text></g><g id="size S"><g class="shape" ><rect x="15.000000" y="35.000000" width="80.000000" height="63.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.000000" y="71.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:14px">size S</text></g><g id="size M"><g class="shape" ><rect x="12.000000" y="299.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="337.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">size M</text></g><g id="size L"><g class="shape" ><rect x="115.000000" y="19.000000" width="93.000000" height="71.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="61.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:20px">size L</text></g><g id="size XL"><g class="shape" ><rect x="228.000000" y="17.000000" width="117.000000" height="76.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="286.500000" y="63.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:24px">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="365.000000" y="14.000000" width="144.000000" height="81.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="437.000000" y="64.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:28px">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="529.000000" y="12.000000" width="177.000000" height="86.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="617.500000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:32px">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="808.000000" y="42.000000" width="77.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="846.500000" y="72.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="905.000000" y="24.000000" width="100.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="955.000000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:12px">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1025.000000" y="21.000000" width="126.000000" height="68.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1088.000000" y="61.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:18px">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1171.000000" y="19.000000" width="140.000000" height="72.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1241.000000" y="62.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:21px">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="451.000000" y="299.000000" width="333.000000" height="126.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="617.500000" y="385.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:64px">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 847.000000 100.000000 L 847.000000 295.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1979211471)" /><text x="847.000000" y="202.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:10px">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 55.500000 100.000000 L 55.500000 295.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1979211471)" /><text x="56.000000" y="204.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:15px">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 618.000000 100.000000 L 618.000000 295.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1979211471)" /><rect x="519.000000" y="168.000000" width="199.000000" height="61.000000" fill="lavender" /><text x="618.500000" y="216.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:48px">custom 48</text></g><mask id="1979211471" maskUnits="userSpaceOnUse" x="10" y="10" width="1303" height="417">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="size XS"><g class="shape" ><rect x="804.000000" y="299.000000" width="85.000000" height="62.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="846.500000" y="334.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:13px">size XS</text></g><g id="size S"><g class="shape" ><rect x="15.000000" y="35.000000" width="80.000000" height="63.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.000000" y="71.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:14px">size S</text></g><g id="size M"><g class="shape" ><rect x="12.000000" y="299.000000" width="87.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="337.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">size M</text></g><g id="size L"><g class="shape" ><rect x="115.000000" y="19.000000" width="93.000000" height="71.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="61.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:20px">size L</text></g><g id="size XL"><g class="shape" ><rect x="228.000000" y="17.000000" width="117.000000" height="76.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="286.500000" y="63.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:24px">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="365.000000" y="14.000000" width="144.000000" height="81.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="437.000000" y="64.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:28px">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="529.000000" y="12.000000" width="177.000000" height="86.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="617.500000" y="66.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:32px">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="808.000000" y="42.000000" width="77.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="846.500000" y="72.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="905.000000" y="24.000000" width="100.000000" height="61.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="955.000000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:12px">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1025.000000" y="21.000000" width="126.000000" height="68.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1088.000000" y="61.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:18px">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1171.000000" y="19.000000" width="140.000000" height="72.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1241.000000" y="62.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:21px">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="451.000000" y="299.000000" width="333.000000" height="126.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="617.500000" y="385.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:64px">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 847.000000 100.000000 L 847.000000 295.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1979211471)" /><text x="847.000000" y="202.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:10px">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 55.500000 100.000000 L 55.500000 295.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1979211471)" /><text x="56.000000" y="204.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:15px">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 618.000000 100.000000 L 618.000000 295.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1979211471)" /><rect x="519.000000" y="168.000000" width="199.000000" height="61.000000" fill="lavender" /><text x="618.500000" y="216.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:48px">custom 48</text></g><mask id="1979211471" maskUnits="userSpaceOnUse" x="10" y="10" width="1303" height="417">
 <rect x="10" y="10" width="1303" height="417" fill="white"></rect>
 <rect x="826.000000" y="192.000000" width="42" height="13" fill="black"></rect>
 <rect x="24.000000" y="189.000000" width="64" height="19" fill="black"></rect>
 <rect x="519.000000" y="168.000000" width="199" height="61" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/font_sizes_containers_large/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes_containers_large/dagre/sketch.exp.svg
index e2cfa5865..de7d1f321 100644
--- a/e2etests/testdata/stable/font_sizes_containers_large/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes_containers_large/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="452" height="538" viewBox="-94 -80 452 538"><rect x="-94.000000" y="-80.000000" width="452.000000" height="538.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 452 538"><svg id="d2-svg" width="452" height="538" viewBox="-94 -80 452 538"><rect x="-94.000000" y="-80.000000" width="452.000000" height="538.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="ninety nine"><g class="shape" ><rect x="0.000000" y="50.000000" width="264.000000" height="406.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="132.000000" y="19.000000" class="text fill-N1" style="text-anchor:middle;font-size:99px">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="20.000000" y="125.000000" width="224.000000" height="306.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="132.000000" y="103.000000" class="text fill-N1" style="text-anchor:middle;font-size:64px">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="40.000000" y="196.000000" width="184.000000" height="210.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="132.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:32px">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="60.000000" y="249.000000" width="144.000000" height="130.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="132.000000" y="239.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="100.000000" y="286.000000" width="64.000000" height="56.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="132.000000" y="316.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">eight</text></g><mask id="4068858020" maskUnits="userSpaceOnUse" x="-94" y="-80" width="452" height="538">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="ninety nine"><g class="shape" ><rect x="0.000000" y="50.000000" width="264.000000" height="406.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="132.000000" y="19.000000" class="text fill-N1" style="text-anchor:middle;font-size:99px">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="20.000000" y="125.000000" width="224.000000" height="306.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="132.000000" y="103.000000" class="text fill-N1" style="text-anchor:middle;font-size:64px">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="40.000000" y="196.000000" width="184.000000" height="210.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="132.000000" y="182.000000" class="text fill-N1" style="text-anchor:middle;font-size:32px">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="60.000000" y="249.000000" width="144.000000" height="130.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="132.000000" y="239.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="100.000000" y="286.000000" width="64.000000" height="56.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="132.000000" y="316.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">eight</text></g><mask id="4068858020" maskUnits="userSpaceOnUse" x="-94" y="-80" width="452" height="538">
 <rect x="-94" y="-80" width="452" height="538" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/font_sizes_containers_large/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes_containers_large/elk/sketch.exp.svg
index a83ef10cd..e2437dce2 100644
--- a/e2etests/testdata/stable/font_sizes_containers_large/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes_containers_large/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="468" height="576" viewBox="10 10 468 576"><rect x="10.000000" y="10.000000" width="468.000000" height="576.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 468 576"><svg id="d2-svg" width="468" height="576" viewBox="10 10 468 576"><rect x="10.000000" y="10.000000" width="468.000000" height="576.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="ninety nine"><g class="shape" ><rect x="12.000000" y="12.000000" width="464.000000" height="572.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="244.000000" y="116.000000" class="text fill-N1" style="text-anchor:middle;font-size:99px">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="62.000000" y="142.000000" width="364.000000" height="392.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="244.000000" y="211.000000" class="text fill-N1" style="text-anchor:middle;font-size:64px">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="112.000000" y="228.000000" width="264.000000" height="256.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="244.000000" y="265.000000" class="text fill-N1" style="text-anchor:middle;font-size:32px">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="162.000000" y="278.000000" width="164.000000" height="156.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="244.000000" y="299.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="212.000000" y="328.000000" width="64.000000" height="56.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="244.000000" y="358.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">eight</text></g><mask id="1539818913" maskUnits="userSpaceOnUse" x="10" y="10" width="468" height="576">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="ninety nine"><g class="shape" ><rect x="12.000000" y="12.000000" width="464.000000" height="572.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="244.000000" y="116.000000" class="text fill-N1" style="text-anchor:middle;font-size:99px">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="62.000000" y="142.000000" width="364.000000" height="392.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="244.000000" y="211.000000" class="text fill-N1" style="text-anchor:middle;font-size:64px">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="112.000000" y="228.000000" width="264.000000" height="256.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="244.000000" y="265.000000" class="text fill-N1" style="text-anchor:middle;font-size:32px">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="162.000000" y="278.000000" width="164.000000" height="156.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="244.000000" y="299.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="212.000000" y="328.000000" width="64.000000" height="56.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="244.000000" y="358.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:8px">eight</text></g><mask id="1539818913" maskUnits="userSpaceOnUse" x="10" y="10" width="468" height="576">
 <rect x="10" y="10" width="468" height="576" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
index f8d2bb595..da47cc15b 100644
--- a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3055" height="5189" viewBox="-2 -2 3055 5189"><rect x="-2.000000" y="-2.000000" width="3055.000000" height="5189.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3055 5189"><svg id="d2-svg" width="3055" height="5189" viewBox="-2 -2 3055 5189"><rect x="-2.000000" y="-2.000000" width="3055.000000" height="5189.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,27 +38,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -1060,4 +1040,4 @@ normal paragraph. For example:</p>
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1499.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1525.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="1499.000000" y="5119.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1525.500000" y="5157.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1525.500000 68.000000 C 1525.500000 106.000000 1525.500000 126.000000 1525.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1426406274)" /></g><g id="(md -&gt; b)[0]"><path d="M 1525.500000 5021.000000 C 1525.500000 5059.000000 1525.500000 5079.000000 1525.500000 5115.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1426406274)" /></g><mask id="1426406274" maskUnits="userSpaceOnUse" x="-2" y="-2" width="3055" height="5189">
 <rect x="-2" y="-2" width="3055" height="5189" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg b/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
index 5cbc98a5e..1cad26091 100644
--- a/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3055" height="5129" viewBox="10 10 3055 5129"><rect x="10.000000" y="10.000000" width="3055.000000" height="5129.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3055 5129"><svg id="d2-svg" width="3055" height="5129" viewBox="10 10 3055 5129"><rect x="10.000000" y="10.000000" width="3055.000000" height="5129.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,27 +38,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -1060,4 +1040,4 @@ normal paragraph. For example:</p>
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1511.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1537.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="1511.000000" y="5071.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1537.500000" y="5109.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1537.500000 80.000000 L 1537.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3398100492)" /></g><g id="(md -&gt; b)[0]"><path d="M 1537.500000 5003.000000 L 1537.500000 5067.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3398100492)" /></g><mask id="3398100492" maskUnits="userSpaceOnUse" x="10" y="10" width="3055" height="5129">
 <rect x="10" y="10" width="3055" height="5129" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg b/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
index cb6d3f6c9..5f53d5dd2 100644
--- a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="742" height="471" viewBox="-2 -2 742 471"><rect x="-2.000000" y="-2.000000" width="742.000000" height="471.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 742 471"><svg id="d2-svg" width="742" height="471" viewBox="-2 -2 742 471"><rect x="-2.000000" y="-2.000000" width="742.000000" height="471.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -793,4 +773,4 @@ can <a href="/projects/markdown/syntax.text">see the source for it by adding '.t
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="343.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="369.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="343.000000" y="401.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="369.500000" y="439.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 369.000000 68.000000 C 369.000000 106.000000 369.000000 126.000000 369.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3944354537)" /></g><g id="(md -&gt; b)[0]"><path d="M 369.000000 303.000000 C 369.000000 341.000000 369.000000 361.000000 369.000000 397.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3944354537)" /></g><mask id="3944354537" maskUnits="userSpaceOnUse" x="-2" y="-2" width="742" height="471">
 <rect x="-2" y="-2" width="742" height="471" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/hr/elk/sketch.exp.svg b/e2etests/testdata/stable/hr/elk/sketch.exp.svg
index a4d0a7ded..5c70d6fbc 100644
--- a/e2etests/testdata/stable/hr/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="742" height="411" viewBox="10 10 742 411"><rect x="10.000000" y="10.000000" width="742.000000" height="411.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 742 411"><svg id="d2-svg" width="742" height="411" viewBox="10 10 742 411"><rect x="10.000000" y="10.000000" width="742.000000" height="411.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -793,4 +773,4 @@ can <a href="/projects/markdown/syntax.text">see the source for it by adding '.t
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="354.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="380.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="354.000000" y="353.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="380.500000" y="391.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 381.000000 80.000000 L 381.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3160357649)" /></g><g id="(md -&gt; b)[0]"><path d="M 381.000000 285.000000 L 381.000000 349.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3160357649)" /></g><mask id="3160357649" maskUnits="userSpaceOnUse" x="10" y="10" width="742" height="411">
 <rect x="10" y="10" width="742" height="411" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/icon-containers/dagre/sketch.exp.svg b/e2etests/testdata/stable/icon-containers/dagre/sketch.exp.svg
index 416000808..343a42cf8 100644
--- a/e2etests/testdata/stable/icon-containers/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/icon-containers/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="514" viewBox="-2 -28 324 514"><rect x="-2.000000" y="-28.000000" width="324.000000" height="514.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 324 514"><svg id="d2-svg" width="324" height="514" viewBox="-2 -28 324 514"><rect x="-2.000000" y="-28.000000" width="324.000000" height="514.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="vpc"><g class="shape" ><rect x="0.000000" y="41.000000" width="320.000000" height="443.000000" stroke="green" fill="white" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="-5.000000" y="-28.000000" width="64" height="64" /><text x="212.000000" y="28.000000" fill="green" class="text" style="text-anchor:middle;font-size:28px">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="20.000000" y="117.000000" width="280.000000" height="326.000000" stroke="blue" fill="white" style="stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text x="160.000000" y="105.000000" fill="blue" class="text" style="text-anchor:middle;font-size:24px">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="40.000000" y="191.000000" width="240.000000" height="209.000000" stroke="purple" fill="#e1d5e7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="35.000000" y="122.000000" width="64" height="64" /><text x="202.500000" y="180.000000" fill="purple" class="text" style="text-anchor:middle;font-size:20px">Firewall Subnet A</text></g><g id="vpc.az.firewall.ec2"><g class="shape" ><rect x="80.000000" y="237.000000" width="160.000000" height="118.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg" x="130.500000" y="266.500000" width="59" height="59" /><text x="160.000000" y="258.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">EC2 Instance</text></g><mask id="2222372815" maskUnits="userSpaceOnUse" x="-2" y="-28" width="324" height="514">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="vpc"><g class="shape" ><rect x="0.000000" y="41.000000" width="320.000000" height="443.000000" stroke="green" fill="white" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="-5.000000" y="-28.000000" width="64" height="64" /><text x="212.000000" y="28.000000" fill="green" class="text" style="text-anchor:middle;font-size:28px">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="20.000000" y="117.000000" width="280.000000" height="326.000000" stroke="blue" fill="white" style="stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text x="160.000000" y="105.000000" fill="blue" class="text" style="text-anchor:middle;font-size:24px">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="40.000000" y="191.000000" width="240.000000" height="209.000000" stroke="purple" fill="#e1d5e7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="35.000000" y="122.000000" width="64" height="64" /><text x="202.500000" y="180.000000" fill="purple" class="text" style="text-anchor:middle;font-size:20px">Firewall Subnet A</text></g><g id="vpc.az.firewall.ec2"><g class="shape" ><rect x="80.000000" y="237.000000" width="160.000000" height="118.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg" x="130.500000" y="266.500000" width="59" height="59" /><text x="160.000000" y="258.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">EC2 Instance</text></g><mask id="2222372815" maskUnits="userSpaceOnUse" x="-2" y="-28" width="324" height="514">
 <rect x="-2" y="-28" width="324" height="514" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/icon-containers/elk/sketch.exp.svg b/e2etests/testdata/stable/icon-containers/elk/sketch.exp.svg
index 4282640c7..264838350 100644
--- a/e2etests/testdata/stable/icon-containers/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/icon-containers/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="464" height="470" viewBox="10 10 464 470"><rect x="10.000000" y="10.000000" width="464.000000" height="470.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 464 470"><svg id="d2-svg" width="464" height="470" viewBox="10 10 464 470"><rect x="10.000000" y="10.000000" width="464.000000" height="470.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="vpc"><g class="shape" ><rect x="12.000000" y="12.000000" width="460.000000" height="466.000000" stroke="green" fill="white" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="17.000000" y="17.000000" width="64" height="64" /><text x="364.000000" y="45.000000" fill="green" class="text" style="text-anchor:middle;font-size:28px">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="62.000000" y="86.000000" width="360.000000" height="342.000000" stroke="blue" fill="white" style="stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text x="242.000000" y="115.000000" fill="blue" class="text" style="text-anchor:middle;font-size:24px">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="112.000000" y="136.000000" width="260.000000" height="242.000000" stroke="purple" fill="#e1d5e7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="117.000000" y="141.000000" width="64" height="64" /><text x="294.500000" y="161.000000" fill="purple" class="text" style="text-anchor:middle;font-size:20px">Firewall Subnet A</text></g><g id="vpc.az.firewall.ec2"><g class="shape" ><rect x="162.000000" y="210.000000" width="160.000000" height="118.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg" x="212.500000" y="239.500000" width="59" height="59" /><text x="242.000000" y="231.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">EC2 Instance</text></g><mask id="3510345669" maskUnits="userSpaceOnUse" x="10" y="10" width="464" height="470">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="vpc"><g class="shape" ><rect x="12.000000" y="12.000000" width="460.000000" height="466.000000" stroke="green" fill="white" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg" x="17.000000" y="17.000000" width="64" height="64" /><text x="364.000000" y="45.000000" fill="green" class="text" style="text-anchor:middle;font-size:28px">VPC 1 10.1.0.0./16</text></g><g id="vpc.az"><g class="shape" ><rect x="62.000000" y="86.000000" width="360.000000" height="342.000000" stroke="blue" fill="white" style="stroke-width:2;stroke-dasharray:6.000000,5.919384;" /></g><text x="242.000000" y="115.000000" fill="blue" class="text" style="text-anchor:middle;font-size:24px">Availability Zone A</text></g><g id="vpc.az.firewall"><g class="shape" ><rect x="112.000000" y="136.000000" width="260.000000" height="242.000000" stroke="purple" fill="#e1d5e7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FNetworking%20&amp;%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg" x="117.000000" y="141.000000" width="64" height="64" /><text x="294.500000" y="161.000000" fill="purple" class="text" style="text-anchor:middle;font-size:20px">Firewall Subnet A</text></g><g id="vpc.az.firewall.ec2"><g class="shape" ><rect x="162.000000" y="210.000000" width="160.000000" height="118.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg" x="212.500000" y="239.500000" width="59" height="59" /><text x="242.000000" y="231.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">EC2 Instance</text></g><mask id="3510345669" maskUnits="userSpaceOnUse" x="10" y="10" width="464" height="470">
 <rect x="10" y="10" width="464" height="470" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg b/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
index 09b207cf8..24a5260be 100644
--- a/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="122" viewBox="-2 -2 110 122"><rect x="-2.000000" y="-2.000000" width="110.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 110 122"><svg id="d2-svg" width="110" height="122" viewBox="-2 -2 110 122"><rect x="-2.000000" y="-2.000000" width="110.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="ww"><g class="shape" ><rect x="0.000000" y="0.000000" width="106.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="26.500000" y="32.500000" width="53" height="53" /><text x="53.000000" y="21.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="514100967" maskUnits="userSpaceOnUse" x="-2" y="-2" width="110" height="122">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="ww"><g class="shape" ><rect x="0.000000" y="0.000000" width="106.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="26.500000" y="32.500000" width="53" height="53" /><text x="53.000000" y="21.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="514100967" maskUnits="userSpaceOnUse" x="-2" y="-2" width="110" height="122">
 <rect x="-2" y="-2" width="110" height="122" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg b/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
index a3419ac3a..551bdd44c 100644
--- a/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="122" viewBox="10 10 110 122"><rect x="10.000000" y="10.000000" width="110.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 110 122"><svg id="d2-svg" width="110" height="122" viewBox="10 10 110 122"><rect x="10.000000" y="10.000000" width="110.000000" height="122.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="ww"><g class="shape" ><rect x="12.000000" y="12.000000" width="106.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="38.500000" y="44.500000" width="53" height="53" /><text x="65.000000" y="33.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="3333584775" maskUnits="userSpaceOnUse" x="10" y="10" width="110" height="122">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="ww"><g class="shape" ><rect x="12.000000" y="12.000000" width="106.000000" height="118.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="38.500000" y="44.500000" width="53" height="53" /><text x="65.000000" y="33.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="3333584775" maskUnits="userSpaceOnUse" x="10" y="10" width="110" height="122">
 <rect x="10" y="10" width="110" height="122" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/images/dagre/sketch.exp.svg b/e2etests/testdata/stable/images/dagre/sketch.exp.svg
index 02d602922..ca3b167fa 100644
--- a/e2etests/testdata/stable/images/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/images/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="410" viewBox="-2 -2 132 410"><rect x="-2.000000" y="-2.000000" width="132.000000" height="410.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 132 410"><svg id="d2-svg" width="132" height="410" viewBox="-2 -2 132 410"><rect x="-2.000000" y="-2.000000" width="132.000000" height="410.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0.000000" y="254.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="403.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 156.000000 C 64.000000 194.000000 64.000000 214.000000 64.000000 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2784238266)" /></g><mask id="2784238266" maskUnits="userSpaceOnUse" x="-2" y="-2" width="132" height="410">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0.000000" y="254.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="403.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 156.000000 C 64.000000 194.000000 64.000000 214.000000 64.000000 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2784238266)" /></g><mask id="2784238266" maskUnits="userSpaceOnUse" x="-2" y="-2" width="132" height="410">
 <rect x="-2" y="-2" width="132" height="410" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/images/elk/sketch.exp.svg b/e2etests/testdata/stable/images/elk/sketch.exp.svg
index 39e581511..b653a1734 100644
--- a/e2etests/testdata/stable/images/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/images/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="380" viewBox="10 10 132 380"><rect x="10.000000" y="10.000000" width="132.000000" height="380.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 132 380"><svg id="d2-svg" width="132" height="380" viewBox="10 10 132 380"><rect x="10.000000" y="10.000000" width="132.000000" height="380.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="161.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12.000000" y="236.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="385.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 168.000000 L 76.000000 232.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2036212292)" /></g><mask id="2036212292" maskUnits="userSpaceOnUse" x="10" y="10" width="132" height="380">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="161.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12.000000" y="236.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="385.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 168.000000 L 76.000000 232.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2036212292)" /></g><mask id="2036212292" maskUnits="userSpaceOnUse" x="10" y="10" width="132" height="380">
 <rect x="10" y="10" width="132" height="380" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg b/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
index 8af9f8d35..f5016b6af 100644
--- a/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="531" height="3656" viewBox="-2 -2 531 3656"><rect x="-2.000000" y="-2.000000" width="531.000000" height="3656.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 531 3656"><svg id="d2-svg" width="531" height="3656" viewBox="-2 -2 531 3656"><rect x="-2.000000" y="-2.000000" width="531.000000" height="3656.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="aa"><g class="shape" ><path d="M 72 0 L 139 0 L 174 51 L 139 101 L 72 101 L 107 51 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="123.000000" y="56.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="bb"><g class="shape" ><path d="M 301 201 L 369 201 L 404 252 L 369 302 L 301 302 L 336 252 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="352.500000" y="257.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">bb</text></g><g id="cc"><g class="shape" ><path d="M 256 423 L 322 423 L 357 474 L 322 524 L 256 524 L 291 474 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="306.500000" y="479.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="dd"><g class="shape" ><rect x="9.000000" y="686.000000" width="370.000000" height="151.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="194.000000" y="673.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">dd</text></g><g id="ff"><g class="shape" ><rect x="0.000000" y="1936.000000" width="384.000000" height="332.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="192.000000" y="1923.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ff</text></g><g id="ii"><g class="shape" ><rect x="54.000000" y="937.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="81.000000" y="975.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ii</text></g><g id="jj"><g class="shape" ><rect x="53.000000" y="1174.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="80.500000" y="1212.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">jj</text></g><g id="kk"><g class="shape" ><rect x="50.000000" y="1440.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="81.000000" y="1478.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">kk</text></g><g id="ll"><g class="shape" ><rect x="0.000000" y="2409.000000" width="352.000000" height="306.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="176.000000" y="2396.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ll</text></g><g id="nn"><g class="shape" ><path d="M 9 3385 C 9 3361 220 3361 244 3361 C 267 3361 478 3361 478 3385 V 3462 C 478 3486 267 3486 244 3486 C 220 3486 9 3486 9 3462 V 3385 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 9 3385 C 9 3409 220 3409 244 3409 C 267 3409 478 3409 478 3385" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="243.500000" y="3348.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">nn</text></g><g id="ss"><g class="shape" ><rect x="387.000000" y="1165.000000" width="138.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="456.000000" y="1152.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ss</text></g><g id="uu"><g class="shape" ><rect x="384.000000" y="1431.000000" width="143.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="455.500000" y="1418.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">uu</text></g><g id="ww"><g class="shape" ><path d="M 360 1656 H 461 C 485 1656 485 1709 485 1715 C 485 1721 485 1774 461 1774 H 360 C 336 1774 336 1721 336 1715 C 336 1709 336 1656 360 1656 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 461 1656 C 437 1656 437 1709 437 1715 C 437 1721 437 1774 461 1774" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="379.000000" y="1695.500000" width="39" height="39" /><text x="398.500000" y="1677.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ww</text></g><g id="rm"><g class="shape" ><rect x="398.000000" y="2592.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="430.000000" y="2630.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rm</text></g><g id="yy"><g class="shape" ><rect x="261.000000" y="2856.000000" width="260.000000" height="364.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="391.000000" y="2843.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">yy</text></g><g id="ad"><g class="shape" ><path d="M 376 3586 L 465 3586 L 439 3652 L 350 3652 L 350 3652 Z" fill="red" class=" stroke-B1" style="stroke-width:2;" /></g><text x="407.500000" y="3624.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ad</text></g><g id="dd.ee"><g class="shape" ><path d="M 81 807 C 81 807 81 807 80 807 L 49 762 C 49 762 49 761 49 760 L 80 715 C 80 715 81 715 81 715 L 112 760 C 112 760 112 761 112 762 L 82 807 C 81 807 81 807 81 807 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="81.000000" y="766.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="ff.gg"><g class="shape" ><path d="M 281 2057 C 281 2057 281 2057 280 2057 L 248 2012 C 248 2012 248 2011 248 2010 L 280 1965 C 280 1965 281 1965 281 1965 L 313 2010 C 313 2010 313 2011 313 2012 L 282 2057 C 281 2057 281 2057 281 2057 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="281.000000" y="2016.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 306 807 C 306 807 306 807 305 807 L 273 762 C 273 762 273 761 273 760 L 305 715 C 305 715 306 715 306 715 L 338 760 C 338 760 338 761 338 762 L 307 807 C 306 807 306 807 306 807 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="306.000000" y="766.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hh</text></g><g id="ll.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="80.500000" cy="2644.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="80.500000" y="2650.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="80.500000" cy="2197.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="80.500000" y="2203.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="nn.oo"><g class="shape" ><rect x="49.000000" y="3390.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="80.500000" y="3428.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="249.000000" y="2165.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="280.500000" y="2203.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="249.000000" y="2438.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="281.000000" y="2476.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="252.000000" y="2612.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="281.000000" y="2650.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="427.000000" y="1194.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="456.000000" y="1232.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="424.000000" y="1460.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="455.500000" y="1498.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="210.000000" y="3390.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="241.000000" y="3428.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">xx</text></g><g id="yy.zz"><g class="shape" ><path d="M 362 2885 H 452 C 476 2885 476 2938 476 2944 C 476 2950 476 3003 452 3003 H 362 C 338 3003 338 2950 338 2944 C 338 2938 338 2885 362 2885 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 452 2885 C 428 2885 428 2938 428 2944 C 428 2950 428 3003 452 3003" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="378.500000" y="2927.500000" width="33" height="33" /><text x="395.000000" y="2906.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">zz</text></g><g id="yy.ab"><g class="shape" ><rect x="376.000000" y="3124.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.500000" y="3162.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="376.000000" y="3390.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.000000" y="3428.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ac</text></g><g id="(aa -- bb)[0]"><path d="M 163.833911 68.797980 C 314.600000 134.400000 352.800000 161.000000 352.990000 199.000025" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#4207061919)" /></g><g id="(bb -- cc)[0]"><path d="M 331.216753 303.840251 C 311.400000 350.400000 306.200000 374.600000 306.008264 421.000017" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#4207061919)" /></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 101.209944 102.837338 C 84.800000 141.000000 80.500000 171.100000 80.500000 201.250000 C 80.500000 231.400000 80.500000 273.700000 80.500000 307.000000 C 80.500000 340.300000 80.500000 384.700000 80.500000 418.000000 C 80.500000 451.300000 80.500000 495.700000 80.500000 529.000000 C 80.500000 562.300000 80.600000 659.200000 80.971832 712.000099" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="80.500000" y="412.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 372.778348 299.842328 C 393.800000 349.600000 399.250000 384.700000 399.250000 418.000000 C 399.250000 451.300000 399.250000 495.700000 399.250000 529.000000 C 399.250000 562.300000 399.250000 596.600000 399.250000 614.750000 C 399.250000 632.900000 399.250000 664.200000 399.250000 693.000000 C 399.250000 721.800000 399.250000 760.200000 399.250000 789.000000 C 399.250000 817.800000 365.850000 847.000000 315.750000 862.000000 C 265.650000 877.000000 232.250000 903.600000 232.250000 928.500000 C 232.250000 953.400000 232.250000 988.700000 232.250000 1016.750000 C 232.250000 1044.800000 232.250000 1075.600000 232.250000 1093.750000 C 232.250000 1111.900000 232.250000 1140.600000 232.250000 1165.500000 C 232.250000 1190.400000 232.250000 1223.600000 232.250000 1248.500000 C 232.250000 1273.400000 232.250000 1300.000000 232.250000 1315.000000 C 232.250000 1330.000000 232.250000 1350.000000 232.250000 1365.000000 C 232.250000 1380.000000 232.250000 1406.600000 232.250000 1431.500000 C 232.250000 1456.400000 232.250000 1489.600000 232.250000 1514.500000 C 232.250000 1539.400000 232.250000 1566.000000 232.250000 1581.000000 C 232.250000 1596.000000 232.250000 1627.800000 232.250000 1660.500000 C 232.250000 1693.200000 232.250000 1738.900000 232.250000 1774.750000 C 232.250000 1810.600000 238.800000 1913.400000 263.658547 1983.231644" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="232.500000" y="1095.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 306.008264 525.999983 C 306.200000 572.400000 306.200000 659.200000 306.014084 712.000025" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="306.500000" y="625.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 80.965522 809.999703 C 80.600000 831.200000 80.500000 897.000000 80.500000 933.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ii -- jj)[0]"><path d="M 80.500000 1005.000000 C 80.500000 1051.400000 80.500000 1134.000000 80.500000 1172.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#4207061919)" /></g><g id="(jj -&gt; kk)[0]"><path d="M 80.500000 1242.000000 C 80.500000 1280.000000 80.500000 1300.000000 80.500000 1315.000000 C 80.500000 1330.000000 80.500000 1400.000000 80.500000 1436.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 80.500000 1508.000000 C 80.500000 1546.000000 80.500000 1566.000000 80.500000 1581.000000 C 80.500000 1596.000000 80.500000 1627.800000 80.500000 1660.500000 C 80.500000 1693.200000 80.500000 1738.900000 80.500000 1774.750000 C 80.500000 1810.600000 80.500000 1846.600000 80.500000 1864.750000 C 80.500000 1882.900000 80.500000 1914.200000 80.500000 1943.000000 C 80.500000 1971.800000 80.600000 2101.200000 80.971832 2154.000099" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="81.000000" y="1838.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 80.965522 2240.999703 C 80.600000 2262.200000 80.500000 2278.000000 80.500000 2293.000000 C 80.500000 2308.000000 80.500000 2328.000000 80.500000 2343.000000 C 80.500000 2358.000000 80.500000 2384.600000 80.500000 2409.500000 C 80.500000 2434.400000 80.600000 2548.200000 80.971832 2601.000099" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="81.000000" y="2427.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 80.965522 2687.999703 C 80.600000 2709.200000 80.500000 2725.000000 80.500000 2740.000000 C 80.500000 2755.000000 80.500000 2775.000000 80.500000 2790.000000 C 80.500000 2805.000000 80.500000 2836.800000 80.500000 2869.500000 C 80.500000 2902.200000 80.500000 2947.900000 80.500000 2983.750000 C 80.500000 3019.600000 80.500000 3062.200000 80.500000 3090.250000 C 80.500000 3118.300000 80.500000 3153.600000 80.500000 3178.500000 C 80.500000 3203.400000 80.500000 3230.000000 80.500000 3245.000000 C 80.500000 3260.000000 80.500000 3334.100000 80.500000 3386.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="81.000000" y="3044.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 280.989899 2059.999974 C 280.800000 2097.600000 280.750000 2119.000000 280.750000 2161.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 280.750000 2234.000000 C 280.750000 2260.800000 280.750000 2278.000000 280.750000 2293.000000 C 280.750000 2308.000000 280.750000 2382.100000 280.750000 2434.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 280.750000 2506.500000 C 280.750000 2544.500000 280.750000 2566.000000 280.750000 2608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 306.016666 808.999931 C 306.200000 831.000000 336.150000 847.000000 381.000000 862.000000 C 425.850000 877.000000 455.750000 903.600000 455.750000 928.500000 C 455.750000 953.400000 455.750000 988.700000 455.750000 1016.750000 C 455.750000 1044.800000 455.750000 1138.100000 455.750000 1190.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 455.750000 1262.500000 C 455.750000 1284.100000 455.750000 1300.000000 455.750000 1315.000000 C 455.750000 1330.000000 455.750000 1404.100000 455.750000 1456.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(kk -&gt; ww)[0]"><path d="M 114.368932 1485.460963 C 262.100000 1541.749772 310.200000 1616.400000 350.131648 1655.212069" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 455.750000 1528.500000 C 455.750000 1550.100000 451.600000 1616.000000 436.533213 1652.305510" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ww -&gt; rm)[0]"><path d="M 420.326153 1775.973227 C 428.000000 1822.400000 430.000000 1846.600000 430.000000 1864.750000 C 430.000000 1882.900000 430.000000 1914.200000 430.000000 1943.000000 C 430.000000 1971.800000 430.000000 2010.200000 430.000000 2039.000000 C 430.000000 2067.800000 430.000000 2105.100000 430.000000 2132.250000 C 430.000000 2159.400000 430.000000 2195.600000 430.000000 2222.750000 C 430.000000 2249.900000 430.000000 2278.000000 430.000000 2293.000000 C 430.000000 2308.000000 430.000000 2328.000000 430.000000 2343.000000 C 430.000000 2358.000000 430.000000 2384.600000 430.000000 2409.500000 C 430.000000 2434.400000 430.000000 2545.500000 430.000000 2587.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 419.958079 2660.419633 C 407.303867 2703.700000 371.300000 2725.000000 322.250000 2740.000000 C 273.200000 2755.000000 240.500000 2775.000000 240.500000 2790.000000 C 240.500000 2805.000000 240.500000 2836.800000 240.500000 2869.500000 C 240.500000 2902.200000 240.500000 2947.900000 240.500000 2983.750000 C 240.500000 3019.600000 240.500000 3062.200000 240.500000 3090.250000 C 240.500000 3118.300000 240.500000 3153.600000 240.500000 3178.500000 C 240.500000 3203.400000 240.500000 3230.000000 240.500000 3245.000000 C 240.500000 3260.000000 240.500000 3334.100000 240.500000 3386.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 280.750000 2681.000000 C 280.750000 2707.800000 291.600000 2725.000000 307.875000 2740.000000 C 324.150000 2755.000000 341.600000 2829.200000 366.314054 2882.372661" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 440.330265 2660.415224 C 453.350829 2703.700000 456.750000 2725.000000 456.750000 2740.000000 C 456.750000 2755.000000 452.200000 2829.200000 435.220563 2882.190771" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 407.000000 3006.000000 C 407.000000 3052.000000 407.000000 3076.200000 407.000000 3121.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 407.000000 3192.500000 C 407.000000 3214.100000 407.000000 3230.000000 407.000000 3245.000000 C 407.000000 3260.000000 407.000000 3334.100000 407.000000 3386.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 407.000000 3458.500000 C 407.000000 3480.100000 407.000000 3546.000000 407.000000 3582.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 372.977282 1775.718734 C 345.200000 1822.400000 330.000000 1914.000000 299.552228 1986.313458" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><mask id="4207061919" maskUnits="userSpaceOnUse" x="-2" y="-2" width="531" height="3656">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="aa"><g class="shape" ><path d="M 72 0 L 139 0 L 174 51 L 139 101 L 72 101 L 107 51 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="123.000000" y="56.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="bb"><g class="shape" ><path d="M 301 201 L 369 201 L 404 252 L 369 302 L 301 302 L 336 252 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="352.500000" y="257.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">bb</text></g><g id="cc"><g class="shape" ><path d="M 256 423 L 322 423 L 357 474 L 322 524 L 256 524 L 291 474 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="306.500000" y="479.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="dd"><g class="shape" ><rect x="9.000000" y="686.000000" width="370.000000" height="151.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="194.000000" y="673.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">dd</text></g><g id="ff"><g class="shape" ><rect x="0.000000" y="1936.000000" width="384.000000" height="332.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="192.000000" y="1923.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ff</text></g><g id="ii"><g class="shape" ><rect x="54.000000" y="937.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="81.000000" y="975.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ii</text></g><g id="jj"><g class="shape" ><rect x="53.000000" y="1174.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="80.500000" y="1212.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">jj</text></g><g id="kk"><g class="shape" ><rect x="50.000000" y="1440.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="81.000000" y="1478.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">kk</text></g><g id="ll"><g class="shape" ><rect x="0.000000" y="2409.000000" width="352.000000" height="306.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="176.000000" y="2396.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ll</text></g><g id="nn"><g class="shape" ><path d="M 9 3385 C 9 3361 220 3361 244 3361 C 267 3361 478 3361 478 3385 V 3462 C 478 3486 267 3486 244 3486 C 220 3486 9 3486 9 3462 V 3385 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 9 3385 C 9 3409 220 3409 244 3409 C 267 3409 478 3409 478 3385" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="243.500000" y="3348.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">nn</text></g><g id="ss"><g class="shape" ><rect x="387.000000" y="1165.000000" width="138.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="456.000000" y="1152.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ss</text></g><g id="uu"><g class="shape" ><rect x="384.000000" y="1431.000000" width="143.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="455.500000" y="1418.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">uu</text></g><g id="ww"><g class="shape" ><path d="M 360 1656 H 461 C 485 1656 485 1709 485 1715 C 485 1721 485 1774 461 1774 H 360 C 336 1774 336 1721 336 1715 C 336 1709 336 1656 360 1656 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 461 1656 C 437 1656 437 1709 437 1715 C 437 1721 437 1774 461 1774" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="379.000000" y="1695.500000" width="39" height="39" /><text x="398.500000" y="1677.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ww</text></g><g id="rm"><g class="shape" ><rect x="398.000000" y="2592.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="430.000000" y="2630.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rm</text></g><g id="yy"><g class="shape" ><rect x="261.000000" y="2856.000000" width="260.000000" height="364.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="391.000000" y="2843.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">yy</text></g><g id="ad"><g class="shape" ><path d="M 376 3586 L 465 3586 L 439 3652 L 350 3652 L 350 3652 Z" fill="red" class=" stroke-B1" style="stroke-width:2;" /></g><text x="407.500000" y="3624.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ad</text></g><g id="dd.ee"><g class="shape" ><path d="M 81 807 C 81 807 81 807 80 807 L 49 762 C 49 762 49 761 49 760 L 80 715 C 80 715 81 715 81 715 L 112 760 C 112 760 112 761 112 762 L 82 807 C 81 807 81 807 81 807 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="81.000000" y="766.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="ff.gg"><g class="shape" ><path d="M 281 2057 C 281 2057 281 2057 280 2057 L 248 2012 C 248 2012 248 2011 248 2010 L 280 1965 C 280 1965 281 1965 281 1965 L 313 2010 C 313 2010 313 2011 313 2012 L 282 2057 C 281 2057 281 2057 281 2057 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="281.000000" y="2016.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 306 807 C 306 807 306 807 305 807 L 273 762 C 273 762 273 761 273 760 L 305 715 C 305 715 306 715 306 715 L 338 760 C 338 760 338 761 338 762 L 307 807 C 306 807 306 807 306 807 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="306.000000" y="766.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hh</text></g><g id="ll.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="80.500000" cy="2644.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="80.500000" y="2650.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="80.500000" cy="2197.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="80.500000" y="2203.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="nn.oo"><g class="shape" ><rect x="49.000000" y="3390.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="80.500000" y="3428.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="249.000000" y="2165.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="280.500000" y="2203.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="249.000000" y="2438.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="281.000000" y="2476.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="252.000000" y="2612.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="281.000000" y="2650.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="427.000000" y="1194.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="456.000000" y="1232.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="424.000000" y="1460.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="455.500000" y="1498.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="210.000000" y="3390.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="241.000000" y="3428.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">xx</text></g><g id="yy.zz"><g class="shape" ><path d="M 362 2885 H 452 C 476 2885 476 2938 476 2944 C 476 2950 476 3003 452 3003 H 362 C 338 3003 338 2950 338 2944 C 338 2938 338 2885 362 2885 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 452 2885 C 428 2885 428 2938 428 2944 C 428 2950 428 3003 452 3003" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="378.500000" y="2927.500000" width="33" height="33" /><text x="395.000000" y="2906.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">zz</text></g><g id="yy.ab"><g class="shape" ><rect x="376.000000" y="3124.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.500000" y="3162.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="376.000000" y="3390.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="407.000000" y="3428.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ac</text></g><g id="(aa -- bb)[0]"><path d="M 163.833911 68.797980 C 314.600000 134.400000 352.800000 161.000000 352.990000 199.000025" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#4207061919)" /></g><g id="(bb -- cc)[0]"><path d="M 331.216753 303.840251 C 311.400000 350.400000 306.200000 374.600000 306.008264 421.000017" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#4207061919)" /></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 101.209944 102.837338 C 84.800000 141.000000 80.500000 171.100000 80.500000 201.250000 C 80.500000 231.400000 80.500000 273.700000 80.500000 307.000000 C 80.500000 340.300000 80.500000 384.700000 80.500000 418.000000 C 80.500000 451.300000 80.500000 495.700000 80.500000 529.000000 C 80.500000 562.300000 80.600000 659.200000 80.971832 712.000099" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="80.500000" y="412.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 372.778348 299.842328 C 393.800000 349.600000 399.250000 384.700000 399.250000 418.000000 C 399.250000 451.300000 399.250000 495.700000 399.250000 529.000000 C 399.250000 562.300000 399.250000 596.600000 399.250000 614.750000 C 399.250000 632.900000 399.250000 664.200000 399.250000 693.000000 C 399.250000 721.800000 399.250000 760.200000 399.250000 789.000000 C 399.250000 817.800000 365.850000 847.000000 315.750000 862.000000 C 265.650000 877.000000 232.250000 903.600000 232.250000 928.500000 C 232.250000 953.400000 232.250000 988.700000 232.250000 1016.750000 C 232.250000 1044.800000 232.250000 1075.600000 232.250000 1093.750000 C 232.250000 1111.900000 232.250000 1140.600000 232.250000 1165.500000 C 232.250000 1190.400000 232.250000 1223.600000 232.250000 1248.500000 C 232.250000 1273.400000 232.250000 1300.000000 232.250000 1315.000000 C 232.250000 1330.000000 232.250000 1350.000000 232.250000 1365.000000 C 232.250000 1380.000000 232.250000 1406.600000 232.250000 1431.500000 C 232.250000 1456.400000 232.250000 1489.600000 232.250000 1514.500000 C 232.250000 1539.400000 232.250000 1566.000000 232.250000 1581.000000 C 232.250000 1596.000000 232.250000 1627.800000 232.250000 1660.500000 C 232.250000 1693.200000 232.250000 1738.900000 232.250000 1774.750000 C 232.250000 1810.600000 238.800000 1913.400000 263.658547 1983.231644" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="232.500000" y="1095.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 306.008264 525.999983 C 306.200000 572.400000 306.200000 659.200000 306.014084 712.000025" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="306.500000" y="625.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 80.965522 809.999703 C 80.600000 831.200000 80.500000 897.000000 80.500000 933.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ii -- jj)[0]"><path d="M 80.500000 1005.000000 C 80.500000 1051.400000 80.500000 1134.000000 80.500000 1172.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#4207061919)" /></g><g id="(jj -&gt; kk)[0]"><path d="M 80.500000 1242.000000 C 80.500000 1280.000000 80.500000 1300.000000 80.500000 1315.000000 C 80.500000 1330.000000 80.500000 1400.000000 80.500000 1436.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 80.500000 1508.000000 C 80.500000 1546.000000 80.500000 1566.000000 80.500000 1581.000000 C 80.500000 1596.000000 80.500000 1627.800000 80.500000 1660.500000 C 80.500000 1693.200000 80.500000 1738.900000 80.500000 1774.750000 C 80.500000 1810.600000 80.500000 1846.600000 80.500000 1864.750000 C 80.500000 1882.900000 80.500000 1914.200000 80.500000 1943.000000 C 80.500000 1971.800000 80.600000 2101.200000 80.971832 2154.000099" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="81.000000" y="1838.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 80.965522 2240.999703 C 80.600000 2262.200000 80.500000 2278.000000 80.500000 2293.000000 C 80.500000 2308.000000 80.500000 2328.000000 80.500000 2343.000000 C 80.500000 2358.000000 80.500000 2384.600000 80.500000 2409.500000 C 80.500000 2434.400000 80.600000 2548.200000 80.971832 2601.000099" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="81.000000" y="2427.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 80.965522 2687.999703 C 80.600000 2709.200000 80.500000 2725.000000 80.500000 2740.000000 C 80.500000 2755.000000 80.500000 2775.000000 80.500000 2790.000000 C 80.500000 2805.000000 80.500000 2836.800000 80.500000 2869.500000 C 80.500000 2902.200000 80.500000 2947.900000 80.500000 2983.750000 C 80.500000 3019.600000 80.500000 3062.200000 80.500000 3090.250000 C 80.500000 3118.300000 80.500000 3153.600000 80.500000 3178.500000 C 80.500000 3203.400000 80.500000 3230.000000 80.500000 3245.000000 C 80.500000 3260.000000 80.500000 3334.100000 80.500000 3386.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /><text x="81.000000" y="3044.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 280.989899 2059.999974 C 280.800000 2097.600000 280.750000 2119.000000 280.750000 2161.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 280.750000 2234.000000 C 280.750000 2260.800000 280.750000 2278.000000 280.750000 2293.000000 C 280.750000 2308.000000 280.750000 2382.100000 280.750000 2434.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 280.750000 2506.500000 C 280.750000 2544.500000 280.750000 2566.000000 280.750000 2608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 306.016666 808.999931 C 306.200000 831.000000 336.150000 847.000000 381.000000 862.000000 C 425.850000 877.000000 455.750000 903.600000 455.750000 928.500000 C 455.750000 953.400000 455.750000 988.700000 455.750000 1016.750000 C 455.750000 1044.800000 455.750000 1138.100000 455.750000 1190.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 455.750000 1262.500000 C 455.750000 1284.100000 455.750000 1300.000000 455.750000 1315.000000 C 455.750000 1330.000000 455.750000 1404.100000 455.750000 1456.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(kk -&gt; ww)[0]"><path d="M 114.368932 1485.460963 C 262.100000 1541.749772 310.200000 1616.400000 350.131648 1655.212069" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 455.750000 1528.500000 C 455.750000 1550.100000 451.600000 1616.000000 436.533213 1652.305510" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ww -&gt; rm)[0]"><path d="M 420.326153 1775.973227 C 428.000000 1822.400000 430.000000 1846.600000 430.000000 1864.750000 C 430.000000 1882.900000 430.000000 1914.200000 430.000000 1943.000000 C 430.000000 1971.800000 430.000000 2010.200000 430.000000 2039.000000 C 430.000000 2067.800000 430.000000 2105.100000 430.000000 2132.250000 C 430.000000 2159.400000 430.000000 2195.600000 430.000000 2222.750000 C 430.000000 2249.900000 430.000000 2278.000000 430.000000 2293.000000 C 430.000000 2308.000000 430.000000 2328.000000 430.000000 2343.000000 C 430.000000 2358.000000 430.000000 2384.600000 430.000000 2409.500000 C 430.000000 2434.400000 430.000000 2545.500000 430.000000 2587.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 419.958079 2660.419633 C 407.303867 2703.700000 371.300000 2725.000000 322.250000 2740.000000 C 273.200000 2755.000000 240.500000 2775.000000 240.500000 2790.000000 C 240.500000 2805.000000 240.500000 2836.800000 240.500000 2869.500000 C 240.500000 2902.200000 240.500000 2947.900000 240.500000 2983.750000 C 240.500000 3019.600000 240.500000 3062.200000 240.500000 3090.250000 C 240.500000 3118.300000 240.500000 3153.600000 240.500000 3178.500000 C 240.500000 3203.400000 240.500000 3230.000000 240.500000 3245.000000 C 240.500000 3260.000000 240.500000 3334.100000 240.500000 3386.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 280.750000 2681.000000 C 280.750000 2707.800000 291.600000 2725.000000 307.875000 2740.000000 C 324.150000 2755.000000 341.600000 2829.200000 366.314054 2882.372661" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 440.330265 2660.415224 C 453.350829 2703.700000 456.750000 2725.000000 456.750000 2740.000000 C 456.750000 2755.000000 452.200000 2829.200000 435.220563 2882.190771" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 407.000000 3006.000000 C 407.000000 3052.000000 407.000000 3076.200000 407.000000 3121.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 407.000000 3192.500000 C 407.000000 3214.100000 407.000000 3230.000000 407.000000 3245.000000 C 407.000000 3260.000000 407.000000 3334.100000 407.000000 3386.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 407.000000 3458.500000 C 407.000000 3480.100000 407.000000 3546.000000 407.000000 3582.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 372.977282 1775.718734 C 345.200000 1822.400000 330.000000 1914.000000 299.552228 1986.313458" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4207061919)" /></g><mask id="4207061919" maskUnits="userSpaceOnUse" x="-2" y="-2" width="531" height="3656">
 <rect x="-2" y="-2" width="531" height="3656" fill="white"></rect>
 <rect x="77.000000" y="396.000000" width="7" height="21" fill="black"></rect>
 <rect x="228.000000" y="1079.000000" width="9" height="21" fill="black"></rect>
@@ -59,4 +39,4 @@
 <rect x="77.000000" y="1822.000000" width="8" height="21" fill="black"></rect>
 <rect x="77.000000" y="2411.000000" width="8" height="21" fill="black"></rect>
 <rect x="77.000000" y="3028.000000" width="8" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
index 3d9d503b9..6e2df79ce 100644
--- a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="547" height="3558" viewBox="10 10 547 3558"><rect x="10.000000" y="10.000000" width="547.000000" height="3558.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 547 3558"><svg id="d2-svg" width="547" height="3558" viewBox="10 10 547 3558"><rect x="10.000000" y="10.000000" width="547.000000" height="3558.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="aa"><g class="shape" ><path d="M 67 12 L 134 12 L 169 63 L 134 113 L 67 113 L 102 63 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="118.000000" y="68.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="bb"><g class="shape" ><path d="M 152 193 L 220 193 L 255 244 L 220 294 L 152 294 L 187 244 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="203.500000" y="249.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">bb</text></g><g id="cc"><g class="shape" ><path d="M 136 374 L 202 374 L 237 425 L 202 475 L 136 475 L 171 425 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="186.500000" y="430.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="dd"><g class="shape" ><rect x="19.000000" y="641.000000" width="250.000000" height="272.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="144.000000" y="674.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">dd</text></g><g id="ff"><g class="shape" ><rect x="279.000000" y="1839.000000" width="276.000000" height="338.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="417.000000" y="1872.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ff</text></g><g id="ii"><g class="shape" ><rect x="292.000000" y="998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.000000" y="1036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ii</text></g><g id="jj"><g class="shape" ><rect x="291.000000" y="1189.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="318.500000" y="1227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">jj</text></g><g id="kk"><g class="shape" ><rect x="288.000000" y="1451.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.000000" y="1489.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">kk</text></g><g id="ll"><g class="shape" ><rect x="238.000000" y="2358.000000" width="265.000000" height="317.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="370.500000" y="2391.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ll</text></g><g id="nn"><g class="shape" ><path d="M 12 3283 C 12 3259 159 3259 176 3259 C 192 3259 339 3259 339 3283 V 3401 C 339 3425 192 3425 176 3425 C 159 3425 12 3425 12 3401 V 3283 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 12 3283 C 12 3307 159 3307 176 3307 C 192 3307 339 3307 339 3283" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="175.500000" y="3340.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">nn</text></g><g id="ss"><g class="shape" ><rect x="107.000000" y="1139.000000" width="158.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="186.000000" y="1172.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ss</text></g><g id="uu"><g class="shape" ><rect x="105.000000" y="1385.000000" width="163.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="186.500000" y="1418.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">uu</text></g><g id="ww"><g class="shape" ><path d="M 161 1636 H 262 C 286 1636 286 1689 286 1695 C 286 1701 286 1754 262 1754 H 161 C 137 1754 137 1701 137 1695 C 137 1689 137 1636 161 1636 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 262 1636 C 238 1636 238 1689 238 1695 C 238 1701 238 1754 262 1754" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="180.000000" y="1675.500000" width="39" height="39" /><text x="199.500000" y="1657.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ww</text></g><g id="rm"><g class="shape" ><rect x="154.000000" y="2525.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="186.000000" y="2563.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rm</text></g><g id="yy"><g class="shape" ><rect x="279.000000" y="2815.000000" width="238.000000" height="354.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="398.000000" y="2848.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">yy</text></g><g id="ad"><g class="shape" ><path d="M 226 3500 L 315 3500 L 289 3566 L 200 3566 L 200 3566 Z" fill="red" class=" stroke-B1" style="stroke-width:2;" /></g><text x="257.500000" y="3538.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ad</text></g><g id="dd.ee"><g class="shape" ><path d="M 101 783 C 101 783 101 783 100 783 L 69 738 C 69 738 69 737 69 736 L 100 691 C 100 691 101 691 101 691 L 132 736 C 132 736 132 737 132 738 L 102 783 C 101 783 101 783 101 783 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="101.000000" y="742.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="ff.gg"><g class="shape" ><path d="M 371 1981 C 371 1981 371 1981 370 1981 L 338 1936 C 338 1936 338 1935 338 1934 L 370 1889 C 370 1889 371 1889 371 1889 L 403 1934 C 403 1934 403 1935 403 1936 L 372 1981 C 371 1981 371 1981 371 1981 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="371.000000" y="1940.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 186 783 C 186 783 186 783 185 783 L 153 738 C 153 738 153 737 153 736 L 185 691 C 185 691 186 691 186 691 L 218 736 C 218 736 218 737 218 738 L 187 783 C 186 783 186 783 186 783 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="186.000000" y="742.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hh</text></g><g id="ll.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="328.500000" cy="2448.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="328.500000" y="2454.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="464.500000" cy="1934.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="464.500000" y="1940.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="nn.oo"><g class="shape" ><rect x="62.000000" y="3309.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="93.500000" y="3347.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="340.000000" y="2061.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="371.500000" y="2099.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="389.000000" y="2415.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="421.000000" y="2453.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="392.000000" y="2559.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="421.000000" y="2597.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="157.000000" y="1189.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="186.000000" y="1227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="155.000000" y="1435.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="186.500000" y="1473.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="145.000000" y="3309.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="176.000000" y="3347.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">xx</text></g><g id="yy.zz"><g class="shape" ><path d="M 353 2865 H 443 C 467 2865 467 2918 467 2924 C 467 2930 467 2983 443 2983 H 353 C 329 2983 329 2930 329 2924 C 329 2918 329 2865 353 2865 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 443 2865 C 419 2865 419 2918 419 2924 C 419 2930 419 2983 443 2983" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="369.500000" y="2907.500000" width="33" height="33" /><text x="386.000000" y="2886.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">zz</text></g><g id="yy.ab"><g class="shape" ><rect x="367.000000" y="3053.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="398.500000" y="3091.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="227.000000" y="3309.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="258.000000" y="3347.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ac</text></g><g id="(aa -- bb)[0]"><path d="M 135.983740 113.999934 L 135.747965 143.000330 S 135.666667 153.000000 145.666667 153.000000 L 193.833333 153.000000 S 203.833333 153.000000 203.875000 162.999913 L 203.991667 191.000017" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2190467899)" /></g><g id="(bb -- cc)[0]"><path d="M 187.000000 296.000000 L 187.000000 372.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2190467899)" /></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 102.000000 115.000000 L 102.000000 687.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="102.500000" y="408.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 221.000000 295.000000 L 221.000000 324.000000 S 221.000000 334.000000 231.000000 334.000000 L 372.666667 334.000000 S 382.666667 334.000000 382.668790 344.000000 L 382.999151 1900.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="382.500000" y="1023.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 187.000000 477.000000 L 187.000000 687.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="187.500000" y="589.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 101.983334 784.999931 L 101.749997 813.000347 S 101.666667 823.000000 111.666667 823.000000 L 186.666667 823.000000 S 196.666667 823.000000 196.666667 833.000000 L 196.666667 948.000000 S 196.666667 958.000000 206.666667 958.000000 L 309.166667 958.000000 S 319.166667 958.000000 319.166667 968.000000 L 319.166667 994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ii -- jj)[0]"><path d="M 319.166667 1066.000000 L 319.166667 1187.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2190467899)" /></g><g id="(jj -&gt; kk)[0]"><path d="M 319.166667 1257.000000 L 319.166667 1447.666667" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 329.500000 1519.666667 L 329.500000 1586.000000 S 329.500000 1596.000000 339.500000 1596.000000 L 455.166667 1596.000000 S 465.166667 1596.000000 465.161093 1605.999998 L 465.002230 1891.000001" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="465.000000" y="1644.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 465.007407 1977.999986 L 465.129630 2011.000069 S 465.166667 2021.000000 455.166667 2021.000000 L 339.166667 2021.000000 S 329.166667 2021.000000 329.162360 2030.999999 L 329.001723 2404.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="329.000000" y="2129.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 329.001443 2490.999999 L 329.159452 2710.000003 S 329.166667 2720.000000 319.166667 2720.000000 L 103.500000 2720.000000 S 93.500000 2720.000000 93.500000 2730.000000 L 93.500000 3305.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="94.000000" y="2787.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 371.991667 1982.999983 L 371.683333 2057.000035" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 371.666667 2129.000000 L 371.666667 2212.000000 S 371.666667 2222.000000 381.666667 2222.000000 L 411.666667 2222.000000 S 421.666667 2222.000000 421.666667 2232.000000 L 421.666667 2411.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 421.666667 2483.500000 L 421.666667 2555.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 186.998358 784.999999 L 186.669951 1185.000001" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 186.666667 1257.000000 L 186.666667 1431.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(kk -&gt; ww)[0]"><path d="M 308.833333 1519.666667 L 308.833333 1586.000000 S 308.833333 1596.000000 298.833333 1596.000000 L 246.333333 1596.000000 S 236.333333 1596.000000 236.250003 1605.999653 L 236.033332 1632.000139" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 186.671605 1502.999994 L 186.990123 1632.000012" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ww -&gt; rm)[0]"><path d="M 186.999136 1756.000000 L 186.668395 2521.333334" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 176.000000 2593.333333 L 176.000000 3305.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 421.669444 2626.999998 L 421.994444 2861.000004" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 197.333333 2593.333333 L 197.333333 2760.000000 S 197.333333 2770.000000 207.333333 2770.000000 L 365.666667 2770.000000 S 375.666667 2770.000000 375.701754 2779.999938 L 375.985965 2861.000025" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 398.990476 2984.999977 L 398.685714 3049.000045" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 398.666667 3121.000000 L 398.666667 3204.000000 S 398.666667 3214.000000 388.666667 3214.000000 L 268.000000 3214.000000 S 258.000000 3214.000000 258.000000 3224.000000 L 258.000000 3305.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 258.000000 3377.000000 L 258.000000 3496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 236.016666 1755.999931 L 236.250003 1784.000347 S 236.333333 1794.000000 246.333333 1794.000000 L 350.666667 1794.000000 S 360.666667 1794.000000 360.696970 1803.999954 L 360.987879 1900.000018" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><mask id="2190467899" maskUnits="userSpaceOnUse" x="10" y="10" width="547" height="3558">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="aa"><g class="shape" ><path d="M 67 12 L 134 12 L 169 63 L 134 113 L 67 113 L 102 63 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="118.000000" y="68.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="bb"><g class="shape" ><path d="M 152 193 L 220 193 L 255 244 L 220 294 L 152 294 L 187 244 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="203.500000" y="249.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">bb</text></g><g id="cc"><g class="shape" ><path d="M 136 374 L 202 374 L 237 425 L 202 475 L 136 475 L 171 425 Z" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="186.500000" y="430.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="dd"><g class="shape" ><rect x="19.000000" y="641.000000" width="250.000000" height="272.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="144.000000" y="674.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">dd</text></g><g id="ff"><g class="shape" ><rect x="279.000000" y="1839.000000" width="276.000000" height="338.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="417.000000" y="1872.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ff</text></g><g id="ii"><g class="shape" ><rect x="292.000000" y="998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.000000" y="1036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ii</text></g><g id="jj"><g class="shape" ><rect x="291.000000" y="1189.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="318.500000" y="1227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">jj</text></g><g id="kk"><g class="shape" ><rect x="288.000000" y="1451.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.000000" y="1489.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">kk</text></g><g id="ll"><g class="shape" ><rect x="238.000000" y="2358.000000" width="265.000000" height="317.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="370.500000" y="2391.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ll</text></g><g id="nn"><g class="shape" ><path d="M 12 3283 C 12 3259 159 3259 176 3259 C 192 3259 339 3259 339 3283 V 3401 C 339 3425 192 3425 176 3425 C 159 3425 12 3425 12 3401 V 3283 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 12 3283 C 12 3307 159 3307 176 3307 C 192 3307 339 3307 339 3283" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="175.500000" y="3340.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">nn</text></g><g id="ss"><g class="shape" ><rect x="107.000000" y="1139.000000" width="158.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="186.000000" y="1172.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">ss</text></g><g id="uu"><g class="shape" ><rect x="105.000000" y="1385.000000" width="163.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="186.500000" y="1418.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">uu</text></g><g id="ww"><g class="shape" ><path d="M 161 1636 H 262 C 286 1636 286 1689 286 1695 C 286 1701 286 1754 262 1754 H 161 C 137 1754 137 1701 137 1695 C 137 1689 137 1636 161 1636 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 262 1636 C 238 1636 238 1689 238 1695 C 238 1701 238 1754 262 1754" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="180.000000" y="1675.500000" width="39" height="39" /><text x="199.500000" y="1657.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ww</text></g><g id="rm"><g class="shape" ><rect x="154.000000" y="2525.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="186.000000" y="2563.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rm</text></g><g id="yy"><g class="shape" ><rect x="279.000000" y="2815.000000" width="238.000000" height="354.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="398.000000" y="2848.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">yy</text></g><g id="ad"><g class="shape" ><path d="M 226 3500 L 315 3500 L 289 3566 L 200 3566 L 200 3566 Z" fill="red" class=" stroke-B1" style="stroke-width:2;" /></g><text x="257.500000" y="3538.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ad</text></g><g id="dd.ee"><g class="shape" ><path d="M 101 783 C 101 783 101 783 100 783 L 69 738 C 69 738 69 737 69 736 L 100 691 C 100 691 101 691 101 691 L 132 736 C 132 736 132 737 132 738 L 102 783 C 101 783 101 783 101 783 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="101.000000" y="742.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="ff.gg"><g class="shape" ><path d="M 371 1981 C 371 1981 371 1981 370 1981 L 338 1936 C 338 1936 338 1935 338 1934 L 370 1889 C 370 1889 371 1889 371 1889 L 403 1934 C 403 1934 403 1935 403 1936 L 372 1981 C 371 1981 371 1981 371 1981 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="371.000000" y="1940.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 186 783 C 186 783 186 783 185 783 L 153 738 C 153 738 153 737 153 736 L 185 691 C 185 691 186 691 186 691 L 218 736 C 218 736 218 737 218 738 L 187 783 C 186 783 186 783 186 783 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="186.000000" y="742.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hh</text></g><g id="ll.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="328.500000" cy="2448.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="328.500000" y="2454.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse rx="40.500000" ry="40.500000" cx="464.500000" cy="1934.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="464.500000" y="1940.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mm</text></g><g id="nn.oo"><g class="shape" ><rect x="62.000000" y="3309.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="93.500000" y="3347.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="340.000000" y="2061.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="371.500000" y="2099.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="389.000000" y="2415.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="421.000000" y="2453.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="392.000000" y="2559.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="421.000000" y="2597.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="157.000000" y="1189.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="186.000000" y="1227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="155.000000" y="1435.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="186.500000" y="1473.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="145.000000" y="3309.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="176.000000" y="3347.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">xx</text></g><g id="yy.zz"><g class="shape" ><path d="M 353 2865 H 443 C 467 2865 467 2918 467 2924 C 467 2930 467 2983 443 2983 H 353 C 329 2983 329 2930 329 2924 C 329 2918 329 2865 353 2865 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 443 2865 C 419 2865 419 2918 419 2924 C 419 2930 419 2983 443 2983" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="369.500000" y="2907.500000" width="33" height="33" /><text x="386.000000" y="2886.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">zz</text></g><g id="yy.ab"><g class="shape" ><rect x="367.000000" y="3053.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="398.500000" y="3091.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="227.000000" y="3309.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="258.000000" y="3347.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ac</text></g><g id="(aa -- bb)[0]"><path d="M 135.983740 113.999934 L 135.747965 143.000330 S 135.666667 153.000000 145.666667 153.000000 L 193.833333 153.000000 S 203.833333 153.000000 203.875000 162.999913 L 203.991667 191.000017" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2190467899)" /></g><g id="(bb -- cc)[0]"><path d="M 187.000000 296.000000 L 187.000000 372.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2190467899)" /></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 102.000000 115.000000 L 102.000000 687.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="102.500000" y="408.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 221.000000 295.000000 L 221.000000 324.000000 S 221.000000 334.000000 231.000000 334.000000 L 372.666667 334.000000 S 382.666667 334.000000 382.668790 344.000000 L 382.999151 1900.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="382.500000" y="1023.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 187.000000 477.000000 L 187.000000 687.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="187.500000" y="589.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 101.983334 784.999931 L 101.749997 813.000347 S 101.666667 823.000000 111.666667 823.000000 L 186.666667 823.000000 S 196.666667 823.000000 196.666667 833.000000 L 196.666667 948.000000 S 196.666667 958.000000 206.666667 958.000000 L 309.166667 958.000000 S 319.166667 958.000000 319.166667 968.000000 L 319.166667 994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ii -- jj)[0]"><path d="M 319.166667 1066.000000 L 319.166667 1187.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2190467899)" /></g><g id="(jj -&gt; kk)[0]"><path d="M 319.166667 1257.000000 L 319.166667 1447.666667" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 329.500000 1519.666667 L 329.500000 1586.000000 S 329.500000 1596.000000 339.500000 1596.000000 L 455.166667 1596.000000 S 465.166667 1596.000000 465.161093 1605.999998 L 465.002230 1891.000001" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="465.000000" y="1644.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 465.007407 1977.999986 L 465.129630 2011.000069 S 465.166667 2021.000000 455.166667 2021.000000 L 339.166667 2021.000000 S 329.166667 2021.000000 329.162360 2030.999999 L 329.001723 2404.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="329.000000" y="2129.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 329.001443 2490.999999 L 329.159452 2710.000003 S 329.166667 2720.000000 319.166667 2720.000000 L 103.500000 2720.000000 S 93.500000 2720.000000 93.500000 2730.000000 L 93.500000 3305.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /><text x="94.000000" y="2787.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 371.991667 1982.999983 L 371.683333 2057.000035" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 371.666667 2129.000000 L 371.666667 2212.000000 S 371.666667 2222.000000 381.666667 2222.000000 L 411.666667 2222.000000 S 421.666667 2222.000000 421.666667 2232.000000 L 421.666667 2411.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 421.666667 2483.500000 L 421.666667 2555.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 186.998358 784.999999 L 186.669951 1185.000001" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 186.666667 1257.000000 L 186.666667 1431.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(kk -&gt; ww)[0]"><path d="M 308.833333 1519.666667 L 308.833333 1586.000000 S 308.833333 1596.000000 298.833333 1596.000000 L 246.333333 1596.000000 S 236.333333 1596.000000 236.250003 1605.999653 L 236.033332 1632.000139" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 186.671605 1502.999994 L 186.990123 1632.000012" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ww -&gt; rm)[0]"><path d="M 186.999136 1756.000000 L 186.668395 2521.333334" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 176.000000 2593.333333 L 176.000000 3305.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 421.669444 2626.999998 L 421.994444 2861.000004" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 197.333333 2593.333333 L 197.333333 2760.000000 S 197.333333 2770.000000 207.333333 2770.000000 L 365.666667 2770.000000 S 375.666667 2770.000000 375.701754 2779.999938 L 375.985965 2861.000025" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 398.990476 2984.999977 L 398.685714 3049.000045" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 398.666667 3121.000000 L 398.666667 3204.000000 S 398.666667 3214.000000 388.666667 3214.000000 L 268.000000 3214.000000 S 258.000000 3214.000000 258.000000 3224.000000 L 258.000000 3305.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 258.000000 3377.000000 L 258.000000 3496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 236.016666 1755.999931 L 236.250003 1784.000347 S 236.333333 1794.000000 246.333333 1794.000000 L 350.666667 1794.000000 S 360.666667 1794.000000 360.696970 1803.999954 L 360.987879 1900.000018" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2190467899)" /></g><mask id="2190467899" maskUnits="userSpaceOnUse" x="10" y="10" width="547" height="3558">
 <rect x="10" y="10" width="547" height="3558" fill="white"></rect>
 <rect x="99.000000" y="392.000000" width="7" height="21" fill="black"></rect>
 <rect x="378.000000" y="1007.000000" width="9" height="21" fill="black"></rect>
@@ -59,4 +39,4 @@
 <rect x="461.000000" y="1628.000000" width="8" height="21" fill="black"></rect>
 <rect x="325.000000" y="2113.000000" width="8" height="21" fill="black"></rect>
 <rect x="90.000000" y="2771.000000" width="8" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg b/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
index 0faefb6dd..b8eb46be1 100644
--- a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1906" height="1282" viewBox="-2 0 1906 1282"><rect x="-2.000000" y="0.000000" width="1906.000000" height="1282.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1906 1282"><svg id="d2-svg" width="1906" height="1282" viewBox="-2 0 1906 1282"><rect x="-2.000000" y="0.000000" width="1906.000000" height="1282.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="150.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="188.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="113.000000" y="150.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="188.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="867.000000" y="1048.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="893.500000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="980.000000" y="1048.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1007.000000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="981.000000" y="1214.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1007.500000" y="1252.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="1094.000000" y="1048.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1119.500000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="1628.000000" y="1048.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1655.000000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="497.000000" y="782.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="523.500000" y="820.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="1427.000000" y="407.000000" width="475.000000" height="541.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1664.500000" y="394.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">i</text></g><g id="q"><g class="shape" ><rect x="1810.000000" y="1048.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1837.000000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="206.000000" y="41.000000" width="1201.000000" height="591.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="806.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">r</text></g><g id="i.j"><g class="shape" ><rect x="1449.000000" y="472.000000" width="348.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1623.000000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">j</text></g><g id="i.m"><g class="shape" ><rect x="1693.000000" y="802.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1721.500000" y="840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="i.n"><g class="shape" ><rect x="1810.000000" y="802.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1836.500000" y="840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="i.o"><g class="shape" ><rect x="1447.000000" y="788.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1513.500000" y="776.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">o</text></g><g id="r.s"><g class="shape" ><rect x="471.000000" y="106.000000" width="402.000000" height="496.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="672.000000" y="94.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="r.z"><g class="shape" ><rect x="913.000000" y="486.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="939.000000" y="524.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="r.aa"><g class="shape" ><rect x="246.000000" y="170.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="277.000000" y="208.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="r.bb"><g class="shape" ><rect x="1122.000000" y="472.000000" width="265.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1254.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">bb</text></g><g id="r.ee"><g class="shape" ><rect x="1023.000000" y="170.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1054.000000" y="208.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="r.ff"><g class="shape" ><rect x="1025.000000" y="486.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1053.500000" y="524.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ff</text></g><g id="r.gg"><g class="shape" ><rect x="368.000000" y="170.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="399.500000" y="208.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="1705.000000" y="504.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1731.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="i.j.l"><g class="shape" ><rect x="1489.000000" y="504.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1513.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="i.o.p"><g class="shape" ><rect x="1487.000000" y="820.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1513.500000" y="858.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="r.s.t"><g class="shape" ><rect x="532.000000" y="504.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="557.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="r.s.u"><g class="shape" ><rect x="715.000000" y="169.000000" width="134.000000" height="135.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="782.000000" y="158.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">u</text></g><g id="r.s.w"><g class="shape" ><rect x="643.000000" y="504.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="672.000000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="r.s.x"><g class="shape" ><rect x="622.000000" y="188.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="648.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="r.s.y"><g class="shape" ><rect x="761.000000" y="504.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="788.000000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="1162.000000" y="504.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1192.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="1283.000000" y="504.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1315.000000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="755.000000" y="204.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="782.000000" y="242.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1731.500000 572.500000 C 1731.500000 596.100000 1731.500000 612.500000 1731.500000 627.500000 C 1731.500000 642.500000 1731.500000 662.500000 1731.500000 677.500000 C 1731.500000 692.500000 1730.300000 762.500000 1725.976581 798.528493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 1513.750000 572.500000 C 1513.750000 596.100000 1513.750000 612.500000 1513.750000 627.500000 C 1513.750000 642.500000 1513.750000 662.500000 1513.750000 677.500000 C 1513.750000 692.500000 1513.750000 766.100000 1513.750000 816.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(q -&gt; i.m)[0]"><path d="M 1812.499619 1046.355972 C 1785.927711 1008.000000 1779.000000 988.000000 1779.000000 973.000000 C 1779.000000 958.000000 1772.000000 892.100000 1747.058511 871.077888" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; q)[0]"><path d="M 1751.864144 852.180701 C 1845.800000 888.691231 1869.750000 908.000000 1869.750000 923.000000 C 1869.750000 938.000000 1865.750000 1008.000000 1851.235563 1044.286093" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.n -&gt; q)[0]"><path d="M 1836.500000 870.500000 C 1836.500000 892.100000 1836.500000 908.000000 1836.500000 923.000000 C 1836.500000 938.000000 1836.500000 1008.000000 1836.500000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; c)[0]"><path d="M 1691.195382 856.580129 C 1622.200000 889.543590 1604.500000 908.000000 1604.500000 923.000000 C 1604.500000 938.000000 893.750000 1008.000000 893.750000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; d)[0]"><path d="M 1691.252312 860.859011 C 1638.200000 890.377320 1624.500000 908.000000 1624.500000 923.000000 C 1624.500000 938.000000 1007.250000 1008.000000 1007.250000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; g)[0]"><path d="M 1737.625610 870.087896 C 1754.481928 892.100000 1759.000000 908.000000 1759.000000 923.000000 C 1759.000000 938.000000 1743.600000 1010.200000 1685.135357 1056.516145" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; f)[0]"><path d="M 1697.627088 869.813227 C 1672.027108 892.100000 1665.250000 908.000000 1665.250000 923.000000 C 1665.250000 938.000000 1119.750000 1008.000000 1119.750000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(d -&gt; e)[0]"><path d="M 1007.250000 1116.000000 C 1007.250000 1154.000000 1007.250000 1174.000000 1007.250000 1210.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.s.(x -&gt; t)[0]"><path d="M 628.474398 256.238095 C 606.692771 294.500000 601.000000 314.500000 601.000000 329.500000 C 601.000000 344.500000 601.000000 364.500000 601.000000 379.500000 C 601.000000 394.500000 595.600000 464.500000 575.900596 500.980378" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.s.(x -&gt; w)[0]"><path d="M 658.033451 256.425868 C 668.698795 294.500000 671.500000 314.500000 671.500000 329.500000 C 671.500000 344.500000 671.500000 364.500000 671.500000 379.500000 C 671.500000 394.500000 671.500000 464.500000 671.500000 500.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 432.769349 221.032419 C 531.800000 273.220000 557.000000 296.500000 557.000000 311.500000 C 557.000000 326.500000 557.000000 346.500000 557.000000 361.500000 C 557.000000 376.500000 557.000000 450.100000 557.000000 500.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 781.750000 272.000000 C 781.750000 283.200000 781.750000 296.500000 781.750000 311.500000 C 781.750000 326.500000 781.750000 346.500000 781.750000 361.500000 C 781.750000 376.500000 807.950000 450.300000 909.210913 503.635901" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 309.878132 215.534774 C 464.600000 272.169460 503.750000 296.500000 503.750000 311.500000 C 503.750000 326.500000 503.750000 346.500000 503.750000 361.500000 C 503.750000 376.500000 510.150000 450.100000 534.046812 500.880725" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 671.500000 572.500000 C 671.500000 579.700000 671.500000 592.000000 671.500000 607.000000 C 671.500000 622.000000 862.100000 642.000000 1148.000000 657.000000 C 1433.900000 672.000000 1638.300000 747.900000 1690.878109 808.479125" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(r.s.t -&gt; g)[0]"><path d="M 577.640516 571.249205 C 598.557229 579.700000 604.250000 592.000000 604.250000 607.000000 C 604.250000 622.000000 604.250000 642.000000 604.250000 657.000000 C 604.250000 672.000000 604.250000 692.000000 604.250000 707.000000 C 604.250000 722.000000 604.250000 748.600000 604.250000 773.500000 C 604.250000 798.400000 604.250000 831.600000 604.250000 856.500000 C 604.250000 881.400000 604.250000 908.000000 604.250000 923.000000 C 604.250000 938.000000 1274.300000 1013.643330 1623.561332 1075.518870" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(r.s.t -&gt; h)[0]"><path d="M 542.045660 571.495815 C 527.756024 579.700000 523.750000 592.000000 523.750000 607.000000 C 523.750000 622.000000 523.750000 642.000000 523.750000 657.000000 C 523.750000 672.000000 523.750000 742.000000 523.750000 778.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(ee -&gt; ff)[0]"><path d="M 1053.750000 238.500000 C 1053.750000 276.500000 1053.750000 296.500000 1053.750000 311.500000 C 1053.750000 326.500000 1053.750000 346.500000 1053.750000 361.500000 C 1053.750000 376.500000 1053.750000 446.500000 1053.750000 482.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><mask id="885286353" maskUnits="userSpaceOnUse" x="-2" y="0" width="1906" height="1282">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="150.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="188.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="113.000000" y="150.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="188.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="867.000000" y="1048.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="893.500000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="980.000000" y="1048.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1007.000000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="981.000000" y="1214.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1007.500000" y="1252.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="1094.000000" y="1048.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1119.500000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="1628.000000" y="1048.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1655.000000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="497.000000" y="782.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="523.500000" y="820.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="1427.000000" y="407.000000" width="475.000000" height="541.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1664.500000" y="394.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">i</text></g><g id="q"><g class="shape" ><rect x="1810.000000" y="1048.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1837.000000" y="1086.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="206.000000" y="41.000000" width="1201.000000" height="591.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="806.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">r</text></g><g id="i.j"><g class="shape" ><rect x="1449.000000" y="472.000000" width="348.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1623.000000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">j</text></g><g id="i.m"><g class="shape" ><rect x="1693.000000" y="802.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1721.500000" y="840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="i.n"><g class="shape" ><rect x="1810.000000" y="802.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1836.500000" y="840.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="i.o"><g class="shape" ><rect x="1447.000000" y="788.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1513.500000" y="776.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">o</text></g><g id="r.s"><g class="shape" ><rect x="471.000000" y="106.000000" width="402.000000" height="496.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="672.000000" y="94.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="r.z"><g class="shape" ><rect x="913.000000" y="486.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="939.000000" y="524.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="r.aa"><g class="shape" ><rect x="246.000000" y="170.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="277.000000" y="208.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="r.bb"><g class="shape" ><rect x="1122.000000" y="472.000000" width="265.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1254.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">bb</text></g><g id="r.ee"><g class="shape" ><rect x="1023.000000" y="170.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1054.000000" y="208.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="r.ff"><g class="shape" ><rect x="1025.000000" y="486.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1053.500000" y="524.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ff</text></g><g id="r.gg"><g class="shape" ><rect x="368.000000" y="170.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="399.500000" y="208.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="1705.000000" y="504.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1731.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="i.j.l"><g class="shape" ><rect x="1489.000000" y="504.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1513.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="i.o.p"><g class="shape" ><rect x="1487.000000" y="820.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1513.500000" y="858.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="r.s.t"><g class="shape" ><rect x="532.000000" y="504.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="557.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="r.s.u"><g class="shape" ><rect x="715.000000" y="169.000000" width="134.000000" height="135.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="782.000000" y="158.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">u</text></g><g id="r.s.w"><g class="shape" ><rect x="643.000000" y="504.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="672.000000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="r.s.x"><g class="shape" ><rect x="622.000000" y="188.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="648.500000" y="226.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="r.s.y"><g class="shape" ><rect x="761.000000" y="504.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="788.000000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="1162.000000" y="504.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1192.500000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="1283.000000" y="504.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1315.000000" y="542.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="755.000000" y="204.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="782.000000" y="242.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1731.500000 572.500000 C 1731.500000 596.100000 1731.500000 612.500000 1731.500000 627.500000 C 1731.500000 642.500000 1731.500000 662.500000 1731.500000 677.500000 C 1731.500000 692.500000 1730.300000 762.500000 1725.976581 798.528493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 1513.750000 572.500000 C 1513.750000 596.100000 1513.750000 612.500000 1513.750000 627.500000 C 1513.750000 642.500000 1513.750000 662.500000 1513.750000 677.500000 C 1513.750000 692.500000 1513.750000 766.100000 1513.750000 816.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(q -&gt; i.m)[0]"><path d="M 1812.499619 1046.355972 C 1785.927711 1008.000000 1779.000000 988.000000 1779.000000 973.000000 C 1779.000000 958.000000 1772.000000 892.100000 1747.058511 871.077888" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; q)[0]"><path d="M 1751.864144 852.180701 C 1845.800000 888.691231 1869.750000 908.000000 1869.750000 923.000000 C 1869.750000 938.000000 1865.750000 1008.000000 1851.235563 1044.286093" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.n -&gt; q)[0]"><path d="M 1836.500000 870.500000 C 1836.500000 892.100000 1836.500000 908.000000 1836.500000 923.000000 C 1836.500000 938.000000 1836.500000 1008.000000 1836.500000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; c)[0]"><path d="M 1691.195382 856.580129 C 1622.200000 889.543590 1604.500000 908.000000 1604.500000 923.000000 C 1604.500000 938.000000 893.750000 1008.000000 893.750000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; d)[0]"><path d="M 1691.252312 860.859011 C 1638.200000 890.377320 1624.500000 908.000000 1624.500000 923.000000 C 1624.500000 938.000000 1007.250000 1008.000000 1007.250000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; g)[0]"><path d="M 1737.625610 870.087896 C 1754.481928 892.100000 1759.000000 908.000000 1759.000000 923.000000 C 1759.000000 938.000000 1743.600000 1010.200000 1685.135357 1056.516145" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(i.m -&gt; f)[0]"><path d="M 1697.627088 869.813227 C 1672.027108 892.100000 1665.250000 908.000000 1665.250000 923.000000 C 1665.250000 938.000000 1119.750000 1008.000000 1119.750000 1044.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(d -&gt; e)[0]"><path d="M 1007.250000 1116.000000 C 1007.250000 1154.000000 1007.250000 1174.000000 1007.250000 1210.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.s.(x -&gt; t)[0]"><path d="M 628.474398 256.238095 C 606.692771 294.500000 601.000000 314.500000 601.000000 329.500000 C 601.000000 344.500000 601.000000 364.500000 601.000000 379.500000 C 601.000000 394.500000 595.600000 464.500000 575.900596 500.980378" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.s.(x -&gt; w)[0]"><path d="M 658.033451 256.425868 C 668.698795 294.500000 671.500000 314.500000 671.500000 329.500000 C 671.500000 344.500000 671.500000 364.500000 671.500000 379.500000 C 671.500000 394.500000 671.500000 464.500000 671.500000 500.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 432.769349 221.032419 C 531.800000 273.220000 557.000000 296.500000 557.000000 311.500000 C 557.000000 326.500000 557.000000 346.500000 557.000000 361.500000 C 557.000000 376.500000 557.000000 450.100000 557.000000 500.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 781.750000 272.000000 C 781.750000 283.200000 781.750000 296.500000 781.750000 311.500000 C 781.750000 326.500000 781.750000 346.500000 781.750000 361.500000 C 781.750000 376.500000 807.950000 450.300000 909.210913 503.635901" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 309.878132 215.534774 C 464.600000 272.169460 503.750000 296.500000 503.750000 311.500000 C 503.750000 326.500000 503.750000 346.500000 503.750000 361.500000 C 503.750000 376.500000 510.150000 450.100000 534.046812 500.880725" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 671.500000 572.500000 C 671.500000 579.700000 671.500000 592.000000 671.500000 607.000000 C 671.500000 622.000000 862.100000 642.000000 1148.000000 657.000000 C 1433.900000 672.000000 1638.300000 747.900000 1690.878109 808.479125" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(r.s.t -&gt; g)[0]"><path d="M 577.640516 571.249205 C 598.557229 579.700000 604.250000 592.000000 604.250000 607.000000 C 604.250000 622.000000 604.250000 642.000000 604.250000 657.000000 C 604.250000 672.000000 604.250000 692.000000 604.250000 707.000000 C 604.250000 722.000000 604.250000 748.600000 604.250000 773.500000 C 604.250000 798.400000 604.250000 831.600000 604.250000 856.500000 C 604.250000 881.400000 604.250000 908.000000 604.250000 923.000000 C 604.250000 938.000000 1274.300000 1013.643330 1623.561332 1075.518870" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="(r.s.t -&gt; h)[0]"><path d="M 542.045660 571.495815 C 527.756024 579.700000 523.750000 592.000000 523.750000 607.000000 C 523.750000 622.000000 523.750000 642.000000 523.750000 657.000000 C 523.750000 672.000000 523.750000 742.000000 523.750000 778.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><g id="r.(ee -&gt; ff)[0]"><path d="M 1053.750000 238.500000 C 1053.750000 276.500000 1053.750000 296.500000 1053.750000 311.500000 C 1053.750000 326.500000 1053.750000 346.500000 1053.750000 361.500000 C 1053.750000 376.500000 1053.750000 446.500000 1053.750000 482.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#885286353)" /></g><mask id="885286353" maskUnits="userSpaceOnUse" x="-2" y="0" width="1906" height="1282">
 <rect x="-2" y="0" width="1906" height="1282" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg b/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
index 0abb2575c..6428429c7 100644
--- a/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="878" height="2192" viewBox="10 10 878 2192"><rect x="10.000000" y="10.000000" width="878.000000" height="2192.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 878 2192"><svg id="d2-svg" width="878" height="2192" viewBox="10 10 878 2192"><rect x="10.000000" y="10.000000" width="878.000000" height="2192.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="436.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="474.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="833.000000" y="436.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="859.500000" y="474.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="437.000000" y="1998.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="463.500000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="510.000000" y="1998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="511.000000" y="2134.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.500000" y="2172.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="584.000000" y="1998.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="609.500000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="184.000000" y="1998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="211.000000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="213.000000" y="1011.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="239.500000" y="1049.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="394.000000" y="1011.000000" width="403.000000" height="752.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="595.500000" y="1044.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">i</text></g><g id="q"><g class="shape" ><rect x="767.000000" y="1998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="794.000000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="85.000000" y="12.000000" width="728.000000" height="909.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="449.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">r</text></g><g id="i.j"><g class="shape" ><rect x="523.000000" y="1061.000000" width="222.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="634.000000" y="1090.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">j</text></g><g id="i.m"><g class="shape" ><rect x="444.000000" y="1377.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="472.500000" y="1415.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="i.n"><g class="shape" ><rect x="521.000000" y="1417.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="547.500000" y="1455.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="i.o"><g class="shape" ><rect x="594.000000" y="1317.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="670.500000" y="1346.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">o</text></g><g id="r.s"><g class="shape" ><rect x="135.000000" y="313.000000" width="465.000000" height="417.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="367.500000" y="342.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="r.z"><g class="shape" ><rect x="307.000000" y="805.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="333.000000" y="843.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="r.aa"><g class="shape" ><rect x="166.000000" y="162.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="r.bb"><g class="shape" ><rect x="248.000000" y="62.000000" width="245.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="370.500000" y="91.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">bb</text></g><g id="r.ee"><g class="shape" ><rect x="618.000000" y="162.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="649.000000" y="200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="r.ff"><g class="shape" ><rect x="620.000000" y="313.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="648.500000" y="351.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ff</text></g><g id="r.gg"><g class="shape" ><rect x="700.000000" y="162.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="731.500000" y="200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="573.000000" y="1111.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="599.500000" y="1149.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="i.j.l"><g class="shape" ><rect x="646.000000" y="1111.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="670.500000" y="1149.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="i.o.p"><g class="shape" ><rect x="644.000000" y="1367.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="670.500000" y="1405.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="r.s.t"><g class="shape" ><rect x="185.000000" y="551.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="210.500000" y="589.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="r.s.u"><g class="shape" ><rect x="256.000000" y="509.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="333.000000" y="534.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">u</text></g><g id="r.s.w"><g class="shape" ><rect x="430.000000" y="561.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="459.000000" y="599.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="r.s.x"><g class="shape" ><rect x="423.000000" y="363.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="449.500000" y="401.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="r.s.y"><g class="shape" ><rect x="496.000000" y="363.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="523.000000" y="401.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="298.000000" y="112.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="328.500000" y="150.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="379.000000" y="112.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="411.000000" y="150.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="306.000000" y="559.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="333.000000" y="597.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 600.250000 1179.000000 L 600.250000 1262.000000 S 600.250000 1272.000000 590.250000 1272.000000 L 497.500000 1272.000000 S 487.500000 1272.000000 487.500000 1282.000000 L 487.500000 1373.625000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 671.250000 1179.000000 L 671.250000 1363.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(q -&gt; i.m)[0]"><path d="M 807.750000 1996.000000 L 807.750000 976.000000 S 807.750000 966.000000 797.750000 966.000000 L 483.250000 966.000000 S 473.250000 966.000000 473.250000 976.000000 L 473.250000 1373.625000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; q)[0]"><path d="M 492.250000 1445.625000 L 492.250000 1522.000000 C 492.250000 1524.000000 494.250000 1522.000000 494.250000 1524.000000 L 494.250000 1848.000000 S 494.250000 1858.000000 504.250000 1858.000000 L 770.750000 1858.000000 S 780.750000 1858.000000 780.750000 1868.000000 L 780.750000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.n -&gt; q)[0]"><path d="M 548.250000 1485.000000 L 548.250000 1798.000000 S 548.250000 1808.000000 558.250000 1808.000000 L 784.250000 1808.000000 S 794.250000 1808.000000 794.250000 1818.000000 L 794.250000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; c)[0]"><path d="M 463.750000 1445.625000 L 463.750000 1672.750000 C 463.750000 1673.250000 464.250000 1672.750000 464.250000 1673.250000 L 464.250000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; d)[0]"><path d="M 473.250000 1445.625000 L 473.250000 1622.500000 C 473.250000 1623.500000 474.250000 1622.500000 474.250000 1623.500000 L 474.250000 1948.000000 S 474.250000 1958.000000 484.250000 1958.000000 L 527.750000 1958.000000 S 537.750000 1958.000000 537.750000 1968.000000 L 537.750000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; g)[0]"><path d="M 454.250000 1445.625000 L 454.250000 1798.000000 S 454.250000 1808.000000 444.250000 1808.000000 L 230.000000 1808.000000 S 220.000000 1808.000000 220.000000 1818.000000 L 220.000000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; f)[0]"><path d="M 482.750000 1445.625000 L 482.750000 1572.250000 C 482.750000 1573.750000 484.250000 1572.250000 484.250000 1573.750000 L 484.250000 1898.000000 S 484.250000 1908.000000 494.250000 1908.000000 L 600.250000 1908.000000 S 610.250000 1908.000000 610.250000 1918.000000 L 610.250000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(d -&gt; e)[0]"><path d="M 537.750000 2066.000000 L 537.750000 2130.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.s.(x -&gt; t)[0]"><path d="M 441.333333 431.000000 L 441.333333 459.000000 S 441.333333 469.000000 431.333333 469.000000 L 233.250000 469.000000 S 223.250000 469.000000 223.250000 479.000000 L 223.250000 547.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.s.(x -&gt; w)[0]"><path d="M 459.000000 431.000000 L 459.000000 557.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 731.666667 230.000000 L 731.666667 258.000000 S 731.666667 268.000000 721.666667 268.000000 L 220.500000 268.000000 S 210.500000 268.000000 210.500000 278.000000 L 210.500000 547.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 333.000000 627.000000 L 333.000000 801.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 197.750000 230.000000 L 197.750000 547.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 459.000000 629.500000 L 459.000000 1373.625000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(r.s.t -&gt; g)[0]"><path d="M 202.000000 619.000000 L 202.000000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(r.s.t -&gt; h)[0]"><path d="M 219.000000 619.000000 L 219.000000 956.000000 S 219.000000 966.000000 229.000000 966.000000 L 229.500000 966.000000 S 239.500000 966.000000 239.500000 976.000000 L 239.500000 1007.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(ee -&gt; ff)[0]"><path d="M 649.166667 230.000000 L 649.166667 309.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><mask id="946354238" maskUnits="userSpaceOnUse" x="10" y="10" width="878" height="2192">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="436.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="474.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="833.000000" y="436.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="859.500000" y="474.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="437.000000" y="1998.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="463.500000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="510.000000" y="1998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.000000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="511.000000" y="2134.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="537.500000" y="2172.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="584.000000" y="1998.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="609.500000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="184.000000" y="1998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="211.000000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="213.000000" y="1011.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="239.500000" y="1049.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="394.000000" y="1011.000000" width="403.000000" height="752.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="595.500000" y="1044.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">i</text></g><g id="q"><g class="shape" ><rect x="767.000000" y="1998.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="794.000000" y="2036.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="85.000000" y="12.000000" width="728.000000" height="909.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="449.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">r</text></g><g id="i.j"><g class="shape" ><rect x="523.000000" y="1061.000000" width="222.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="634.000000" y="1090.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">j</text></g><g id="i.m"><g class="shape" ><rect x="444.000000" y="1377.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="472.500000" y="1415.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="i.n"><g class="shape" ><rect x="521.000000" y="1417.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="547.500000" y="1455.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="i.o"><g class="shape" ><rect x="594.000000" y="1317.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="670.500000" y="1346.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">o</text></g><g id="r.s"><g class="shape" ><rect x="135.000000" y="313.000000" width="465.000000" height="417.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="367.500000" y="342.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">s</text></g><g id="r.z"><g class="shape" ><rect x="307.000000" y="805.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="333.000000" y="843.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="r.aa"><g class="shape" ><rect x="166.000000" y="162.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.000000" y="200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">aa</text></g><g id="r.bb"><g class="shape" ><rect x="248.000000" y="62.000000" width="245.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="370.500000" y="91.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">bb</text></g><g id="r.ee"><g class="shape" ><rect x="618.000000" y="162.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="649.000000" y="200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ee</text></g><g id="r.ff"><g class="shape" ><rect x="620.000000" y="313.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="648.500000" y="351.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ff</text></g><g id="r.gg"><g class="shape" ><rect x="700.000000" y="162.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="731.500000" y="200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="573.000000" y="1111.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="599.500000" y="1149.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="i.j.l"><g class="shape" ><rect x="646.000000" y="1111.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="670.500000" y="1149.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="i.o.p"><g class="shape" ><rect x="644.000000" y="1367.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="670.500000" y="1405.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="r.s.t"><g class="shape" ><rect x="185.000000" y="551.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="210.500000" y="589.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="r.s.u"><g class="shape" ><rect x="256.000000" y="509.000000" width="154.000000" height="166.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="333.000000" y="534.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">u</text></g><g id="r.s.w"><g class="shape" ><rect x="430.000000" y="561.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="459.000000" y="599.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="r.s.x"><g class="shape" ><rect x="423.000000" y="363.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="449.500000" y="401.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="r.s.y"><g class="shape" ><rect x="496.000000" y="363.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="523.000000" y="401.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="298.000000" y="112.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="328.500000" y="150.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="379.000000" y="112.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="411.000000" y="150.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="306.000000" y="559.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="333.000000" y="597.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 600.250000 1179.000000 L 600.250000 1262.000000 S 600.250000 1272.000000 590.250000 1272.000000 L 497.500000 1272.000000 S 487.500000 1272.000000 487.500000 1282.000000 L 487.500000 1373.625000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 671.250000 1179.000000 L 671.250000 1363.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(q -&gt; i.m)[0]"><path d="M 807.750000 1996.000000 L 807.750000 976.000000 S 807.750000 966.000000 797.750000 966.000000 L 483.250000 966.000000 S 473.250000 966.000000 473.250000 976.000000 L 473.250000 1373.625000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; q)[0]"><path d="M 492.250000 1445.625000 L 492.250000 1522.000000 C 492.250000 1524.000000 494.250000 1522.000000 494.250000 1524.000000 L 494.250000 1848.000000 S 494.250000 1858.000000 504.250000 1858.000000 L 770.750000 1858.000000 S 780.750000 1858.000000 780.750000 1868.000000 L 780.750000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.n -&gt; q)[0]"><path d="M 548.250000 1485.000000 L 548.250000 1798.000000 S 548.250000 1808.000000 558.250000 1808.000000 L 784.250000 1808.000000 S 794.250000 1808.000000 794.250000 1818.000000 L 794.250000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; c)[0]"><path d="M 463.750000 1445.625000 L 463.750000 1672.750000 C 463.750000 1673.250000 464.250000 1672.750000 464.250000 1673.250000 L 464.250000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; d)[0]"><path d="M 473.250000 1445.625000 L 473.250000 1622.500000 C 473.250000 1623.500000 474.250000 1622.500000 474.250000 1623.500000 L 474.250000 1948.000000 S 474.250000 1958.000000 484.250000 1958.000000 L 527.750000 1958.000000 S 537.750000 1958.000000 537.750000 1968.000000 L 537.750000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; g)[0]"><path d="M 454.250000 1445.625000 L 454.250000 1798.000000 S 454.250000 1808.000000 444.250000 1808.000000 L 230.000000 1808.000000 S 220.000000 1808.000000 220.000000 1818.000000 L 220.000000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(i.m -&gt; f)[0]"><path d="M 482.750000 1445.625000 L 482.750000 1572.250000 C 482.750000 1573.750000 484.250000 1572.250000 484.250000 1573.750000 L 484.250000 1898.000000 S 484.250000 1908.000000 494.250000 1908.000000 L 600.250000 1908.000000 S 610.250000 1908.000000 610.250000 1918.000000 L 610.250000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(d -&gt; e)[0]"><path d="M 537.750000 2066.000000 L 537.750000 2130.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.s.(x -&gt; t)[0]"><path d="M 441.333333 431.000000 L 441.333333 459.000000 S 441.333333 469.000000 431.333333 469.000000 L 233.250000 469.000000 S 223.250000 469.000000 223.250000 479.000000 L 223.250000 547.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.s.(x -&gt; w)[0]"><path d="M 459.000000 431.000000 L 459.000000 557.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 731.666667 230.000000 L 731.666667 258.000000 S 731.666667 268.000000 721.666667 268.000000 L 220.500000 268.000000 S 210.500000 268.000000 210.500000 278.000000 L 210.500000 547.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 333.000000 627.000000 L 333.000000 801.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 197.750000 230.000000 L 197.750000 547.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 459.000000 629.500000 L 459.000000 1373.625000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(r.s.t -&gt; g)[0]"><path d="M 202.000000 619.000000 L 202.000000 1994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="(r.s.t -&gt; h)[0]"><path d="M 219.000000 619.000000 L 219.000000 956.000000 S 219.000000 966.000000 229.000000 966.000000 L 229.500000 966.000000 S 239.500000 966.000000 239.500000 976.000000 L 239.500000 1007.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><g id="r.(ee -&gt; ff)[0]"><path d="M 649.166667 230.000000 L 649.166667 309.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#946354238)" /></g><mask id="946354238" maskUnits="userSpaceOnUse" x="10" y="10" width="878" height="2192">
 <rect x="10" y="10" width="878" height="2192" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/latex/dagre/sketch.exp.svg b/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
index 0d1a940c9..ad66d1189 100644
--- a/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="657" height="609" viewBox="-2 -2 657 609"><rect x="-2.000000" y="-2.000000" width="657.000000" height="609.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 657 609"><svg id="d2-svg" width="657" height="609" viewBox="-2 -2 657 609"><rect x="-2.000000" y="-2.000000" width="657.000000" height="609.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -789,4 +769,4 @@
 </style><g id="a"><g class="shape" ></g><g transform="translate(0.000000 151.000000)" class=" color-N1"><svg style="vertical-align: -4.118ex;" xmlns="http://www.w3.org/2000/svg" width="47.718ex" height="12.624ex" role="img" focusable="false" viewBox="0 -3759.7 21091.2 5579.8" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D6FC" d="M34 156Q34 270 120 356T309 442Q379 442 421 402T478 304Q484 275 485 237V208Q534 282 560 374Q564 388 566 390T582 393Q603 393 603 385Q603 376 594 346T558 261T497 161L486 147L487 123Q489 67 495 47T514 26Q528 28 540 37T557 60Q559 67 562 68T577 70Q597 70 597 62Q597 56 591 43Q579 19 556 5T512 -10H505Q438 -10 414 62L411 69L400 61Q390 53 370 41T325 18T267 -2T203 -11Q124 -11 79 39T34 156ZM208 26Q257 26 306 47T379 90L403 112Q401 255 396 290Q382 405 304 405Q235 405 183 332Q156 292 139 224T121 120Q121 71 146 49T208 26Z"></path><path id="MJX-1-TEX-I-1D454" d="M311 43Q296 30 267 15T206 0Q143 0 105 45T66 160Q66 265 143 353T314 442Q361 442 401 394L404 398Q406 401 409 404T418 412T431 419T447 422Q461 422 470 413T480 394Q480 379 423 152T363 -80Q345 -134 286 -169T151 -205Q10 -205 10 -137Q10 -111 28 -91T74 -71Q89 -71 102 -80T116 -111Q116 -121 114 -130T107 -144T99 -154T92 -162L90 -164H91Q101 -167 151 -167Q189 -167 211 -155Q234 -144 254 -122T282 -75Q288 -56 298 -13Q311 35 311 43ZM384 328L380 339Q377 350 375 354T369 368T359 382T346 393T328 402T306 405Q262 405 221 352Q191 313 171 233T151 117Q151 38 213 38Q269 38 323 108L331 118L384 328Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-I-1D714" d="M495 384Q495 406 514 424T555 443Q574 443 589 425T604 364Q604 334 592 278T555 155T483 38T377 -11Q297 -11 267 66Q266 68 260 61Q201 -11 125 -11Q15 -11 15 139Q15 230 56 325T123 434Q135 441 147 436Q160 429 160 418Q160 406 140 379T94 306T62 208Q61 202 61 187Q61 124 85 100T143 76Q201 76 245 129L253 137V156Q258 297 317 297Q348 297 348 261Q348 243 338 213T318 158L308 135Q309 133 310 129T318 115T334 97T358 83T393 76Q456 76 501 148T546 274Q546 305 533 325T508 357T495 384Z"></path><path id="MJX-1-TEX-N-35" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z"></path><path id="MJX-1-TEX-I-1D452" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path><path id="MJX-1-TEX-N-5B" d="M118 -250V750H255V710H158V-210H255V-250H118Z"></path><path id="MJX-1-TEX-N-2212" d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path><path id="MJX-1-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-1-TEX-N-2E" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z"></path><path id="MJX-1-TEX-N-37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z"></path><path id="MJX-1-TEX-N-34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path><path id="MJX-1-TEX-SO-7B" d="M477 -343L471 -349H458Q432 -349 367 -325T273 -263Q258 -245 250 -212L249 -51Q249 -27 249 12Q248 118 244 128Q243 129 243 130Q220 189 121 228Q109 232 107 235T105 250Q105 256 105 257T105 261T107 265T111 268T118 272T128 276T142 283T162 291Q224 324 243 371Q243 372 244 373Q248 384 249 469Q249 475 249 489Q249 528 249 552L250 714Q253 728 256 736T271 761T299 789T347 816T422 843Q440 849 441 849H443Q445 849 447 849T452 850T457 850H471L477 844V830Q477 820 476 817T470 811T459 807T437 801T404 785Q353 760 338 724Q333 710 333 550Q333 526 333 492T334 447Q334 393 327 368T295 318Q257 280 181 255L169 251L184 245Q318 198 332 112Q333 106 333 -49Q333 -209 338 -223Q351 -255 391 -277T469 -309Q477 -311 477 -329V-343Z"></path><path id="MJX-1-TEX-I-1D448" d="M107 637Q73 637 71 641Q70 643 70 649Q70 673 81 682Q83 683 98 683Q139 681 234 681Q268 681 297 681T342 682T362 682Q378 682 378 672Q378 670 376 658Q371 641 366 638H364Q362 638 359 638T352 638T343 637T334 637Q295 636 284 634T266 623Q265 621 238 518T184 302T154 169Q152 155 152 140Q152 86 183 55T269 24Q336 24 403 69T501 205L552 406Q599 598 599 606Q599 633 535 637Q511 637 511 648Q511 650 513 660Q517 676 519 679T529 683Q532 683 561 682T645 680Q696 680 723 681T752 682Q767 682 767 672Q767 650 759 642Q756 637 737 637Q666 633 648 597Q646 592 598 404Q557 235 548 205Q515 105 433 42T263 -22Q171 -22 116 34T60 167V183Q60 201 115 421Q164 622 164 628Q164 635 107 637Z"></path><path id="MJX-1-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path><path id="MJX-1-TEX-N-39" d="M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z"></path><path id="MJX-1-TEX-SO-7D" d="M110 849L115 850Q120 850 125 850Q151 850 215 826T309 764Q324 747 332 714L333 552Q333 528 333 489Q334 383 338 373Q339 372 339 371Q353 336 391 310T469 271Q477 268 477 251Q477 241 476 237T472 232T456 225T428 214Q357 179 339 130Q339 129 338 128Q334 117 333 32Q333 26 333 12Q333 -27 333 -51L332 -212Q328 -228 323 -240T302 -271T255 -307T175 -338Q139 -349 125 -349T108 -346T105 -329Q105 -314 107 -312T130 -304Q233 -271 248 -209Q249 -203 249 -49V57Q249 106 253 125T273 167Q307 213 398 245L413 251L401 255Q265 300 250 389Q249 395 249 550Q249 710 244 724Q224 774 112 811Q105 813 105 830Q105 845 110 849Z"></path><path id="MJX-1-TEX-N-5D" d="M22 710V750H159V-250H22V-210H119V710H22Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mstyle" transform="scale(2.49)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mfrac"><g data-mml-node="mrow" transform="translate(220,676)"><g data-mml-node="mi"><use data-c="1D6FC" xlink:href="#MJX-1-TEX-I-1D6FC"></use></g><g data-mml-node="msup" transform="translate(640,0)"><g data-mml-node="mi"><use data-c="1D454" xlink:href="#MJX-1-TEX-I-1D454"></use></g><g data-mml-node="mn" transform="translate(510,363) scale(0.707)"><use data-c="32" xlink:href="#MJX-1-TEX-N-32"></use></g></g></g><g data-mml-node="msup" transform="translate(467.5,-719.9)"><g data-mml-node="mi"><use data-c="1D714" xlink:href="#MJX-1-TEX-I-1D714"></use></g><g data-mml-node="mn" transform="translate(655,289) scale(0.707)"><use data-c="35" xlink:href="#MJX-1-TEX-N-35"></use></g></g><rect width="1753.6" height="60" x="120" y="220"></rect></g><g data-mml-node="msup" transform="translate(1993.6,0)"><g data-mml-node="mi"><use data-c="1D452" xlink:href="#MJX-1-TEX-I-1D452"></use></g><g data-mml-node="TeXAtom" transform="translate(499,457) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="mo"><use data-c="5B" xlink:href="#MJX-1-TEX-N-5B"></use></g><g data-mml-node="mo" transform="translate(278,0)"><use data-c="2212" xlink:href="#MJX-1-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(1056,0)"><use data-c="30" xlink:href="#MJX-1-TEX-N-30"></use><use data-c="2E" xlink:href="#MJX-1-TEX-N-2E" transform="translate(500,0)"></use><use data-c="37" xlink:href="#MJX-1-TEX-N-37" transform="translate(778,0)"></use><use data-c="34" xlink:href="#MJX-1-TEX-N-34" transform="translate(1278,0)"></use></g><g data-mml-node="TeXAtom" data-mjx-texclass="OPEN" transform="translate(2834,0)"><g data-mml-node="mo" transform="translate(0 -0.5)"><use data-c="7B" xlink:href="#MJX-1-TEX-SO-7B"></use></g></g><g data-mml-node="mfrac" transform="translate(3417,0)"><g data-mml-node="mrow" transform="translate(220,453.8) scale(0.707)"><g data-mml-node="mi"><use data-c="1D714" xlink:href="#MJX-1-TEX-I-1D714"></use></g><g data-mml-node="msub" transform="translate(622,0)"><g data-mml-node="mi"><use data-c="1D448" xlink:href="#MJX-1-TEX-I-1D448"></use></g><g data-mml-node="mi" transform="translate(716,-150)"><use data-c="1D714" xlink:href="#MJX-1-TEX-I-1D714"></use></g></g><g data-mml-node="mn" transform="translate(2010,0)"><use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use><use data-c="39" xlink:href="#MJX-1-TEX-N-39" transform="translate(500,0)"></use><use data-c="2E" xlink:href="#MJX-1-TEX-N-2E" transform="translate(1000,0)"></use><use data-c="35" xlink:href="#MJX-1-TEX-N-35" transform="translate(1278,0)"></use></g></g><g data-mml-node="mi" transform="translate(1390.6,-345) scale(0.707)"><use data-c="1D454" xlink:href="#MJX-1-TEX-I-1D454"></use></g><rect width="2878.5" height="60" x="120" y="220"></rect></g><g data-mml-node="msup" transform="translate(6535.5,0)"><g data-mml-node="TeXAtom" data-mjx-texclass="CLOSE"><g data-mml-node="mo" transform="translate(0 -0.5)"><use data-c="7D" xlink:href="#MJX-1-TEX-SO-7D"></use></g></g><g data-mml-node="TeXAtom" transform="translate(616,576.6) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="mstyle" transform="scale(2)"><g data-mml-node="mspace"></g></g><g data-mml-node="mo" transform="translate(-334,0)"><use data-c="2212" xlink:href="#MJX-1-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(444,0)"><use data-c="34" xlink:href="#MJX-1-TEX-N-34"></use></g></g></g><g data-mml-node="mstyle" transform="translate(7869,0) scale(1.414)"><g data-mml-node="mspace"></g></g><g data-mml-node="mo" transform="translate(8105.2,0)"><use data-c="5D" xlink:href="#MJX-1-TEX-N-5D"></use></g></g></g></g></g></g></g></svg></g></g><g id="b"><g class="shape" ></g><g transform="translate(442.000000 193.000000)" class=" color-N1"><svg style="vertical-align: -0.186ex;" xmlns="http://www.w3.org/2000/svg" width="8.025ex" height="2.185ex" role="img" focusable="false" viewBox="0 -883.9 3547.1 965.9" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D452" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path><path id="MJX-1-TEX-N-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path><path id="MJX-1-TEX-I-1D45A" d="M21 287Q22 293 24 303T36 341T56 388T88 425T132 442T175 435T205 417T221 395T229 376L231 369Q231 367 232 367L243 378Q303 442 384 442Q401 442 415 440T441 433T460 423T475 411T485 398T493 385T497 373T500 364T502 357L510 367Q573 442 659 442Q713 442 746 415T780 336Q780 285 742 178T704 50Q705 36 709 31T724 26Q752 26 776 56T815 138Q818 149 821 151T837 153Q857 153 857 145Q857 144 853 130Q845 101 831 73T785 17T716 -10Q669 -10 648 17T627 73Q627 92 663 193T700 345Q700 404 656 404H651Q565 404 506 303L499 291L466 157Q433 26 428 16Q415 -11 385 -11Q372 -11 364 -4T353 8T350 18Q350 29 384 161L420 307Q423 322 423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 181Q151 335 151 342Q154 357 154 369Q154 405 129 405Q107 405 92 377T69 316T57 280Q55 278 41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D450" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D452" xlink:href="#MJX-1-TEX-I-1D452"></use></g><g data-mml-node="mo" transform="translate(743.8,0)"><use data-c="3D" xlink:href="#MJX-1-TEX-N-3D"></use></g><g data-mml-node="mi" transform="translate(1799.6,0)"><use data-c="1D45A" xlink:href="#MJX-1-TEX-I-1D45A"></use></g><g data-mml-node="msup" transform="translate(2677.6,0)"><g data-mml-node="mi"><use data-c="1D450" xlink:href="#MJX-1-TEX-I-1D450"></use></g><g data-mml-node="mn" transform="translate(466,413) scale(0.707)"><use data-c="32" xlink:href="#MJX-1-TEX-N-32"></use></g></g></g></g></svg></g></g><g id="z"><g class="shape" ></g><g transform="translate(243.000000 0.000000)" class=" color-N1"><svg style="vertical-align: -2.819ex;" xmlns="http://www.w3.org/2000/svg" width="22.251ex" height="6.354ex" role="img" focusable="false" viewBox="0 -1562.5 9834.8 2808.5" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D454" d="M311 43Q296 30 267 15T206 0Q143 0 105 45T66 160Q66 265 143 353T314 442Q361 442 401 394L404 398Q406 401 409 404T418 412T431 419T447 422Q461 422 470 413T480 394Q480 379 423 152T363 -80Q345 -134 286 -169T151 -205Q10 -205 10 -137Q10 -111 28 -91T74 -71Q89 -71 102 -80T116 -111Q116 -121 114 -130T107 -144T99 -154T92 -162L90 -164H91Q101 -167 151 -167Q189 -167 211 -155Q234 -144 254 -122T282 -75Q288 -56 298 -13Q311 35 311 43ZM384 328L380 339Q377 350 375 354T369 368T359 382T346 393T328 402T306 405Q262 405 221 352Q191 313 171 233T151 117Q151 38 213 38Q269 38 323 108L331 118L384 328Z"></path><path id="MJX-1-TEX-I-1D456" d="M184 600Q184 624 203 642T247 661Q265 661 277 649T290 619Q290 596 270 577T226 557Q211 557 198 567T184 600ZM21 287Q21 295 30 318T54 369T98 420T158 442Q197 442 223 419T250 357Q250 340 236 301T196 196T154 83Q149 61 149 51Q149 26 166 26Q175 26 185 29T208 43T235 78T260 137Q263 149 265 151T282 153Q302 153 302 143Q302 135 293 112T268 61T223 11T161 -11Q129 -11 102 10T74 74Q74 91 79 106T122 220Q160 321 166 341T173 380Q173 404 156 404H154Q124 404 99 371T61 287Q60 286 59 284T58 281T56 279T53 278T49 278T41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D44F" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path><path id="MJX-1-TEX-I-1D452" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path><path id="MJX-1-TEX-I-1D45F" d="M21 287Q22 290 23 295T28 317T38 348T53 381T73 411T99 433T132 442Q161 442 183 430T214 408T225 388Q227 382 228 382T236 389Q284 441 347 441H350Q398 441 422 400Q430 381 430 363Q430 333 417 315T391 292T366 288Q346 288 334 299T322 328Q322 376 378 392Q356 405 342 405Q286 405 239 331Q229 315 224 298T190 165Q156 25 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 114 189T154 366Q154 405 128 405Q107 405 92 377T68 316T57 280Q55 278 41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D460" d="M131 289Q131 321 147 354T203 415T300 442Q362 442 390 415T419 355Q419 323 402 308T364 292Q351 292 340 300T328 326Q328 342 337 354T354 372T367 378Q368 378 368 379Q368 382 361 388T336 399T297 405Q249 405 227 379T204 326Q204 301 223 291T278 274T330 259Q396 230 396 163Q396 135 385 107T352 51T289 7T195 -10Q118 -10 86 19T53 87Q53 126 74 143T118 160Q133 160 146 151T160 120Q160 94 142 76T111 58Q109 57 108 57T107 55Q108 52 115 47T146 34T201 27Q237 27 263 38T301 66T318 97T323 122Q323 150 302 164T254 181T195 196T148 231Q131 256 131 289Z"></path><path id="MJX-1-TEX-I-210E" d="M137 683Q138 683 209 688T282 694Q294 694 294 685Q294 674 258 534Q220 386 220 383Q220 381 227 388Q288 442 357 442Q411 442 444 415T478 336Q478 285 440 178T402 50Q403 36 407 31T422 26Q450 26 474 56T513 138Q516 149 519 151T535 153Q555 153 555 145Q555 144 551 130Q535 71 500 33Q466 -10 419 -10H414Q367 -10 346 17T325 74Q325 90 361 192T398 345Q398 404 354 404H349Q266 404 205 306L198 293L164 158Q132 28 127 16Q114 -11 83 -11Q69 -11 59 -2T48 16Q48 30 121 320L195 616Q195 629 188 632T149 637H128Q122 643 122 645T124 664Q129 683 137 683Z"></path><path id="MJX-1-TEX-I-1D45A" d="M21 287Q22 293 24 303T36 341T56 388T88 425T132 442T175 435T205 417T221 395T229 376L231 369Q231 367 232 367L243 378Q303 442 384 442Q401 442 415 440T441 433T460 423T475 411T485 398T493 385T497 373T500 364T502 357L510 367Q573 442 659 442Q713 442 746 415T780 336Q780 285 742 178T704 50Q705 36 709 31T724 26Q752 26 776 56T815 138Q818 149 821 151T837 153Q857 153 857 145Q857 144 853 130Q845 101 831 73T785 17T716 -10Q669 -10 648 17T627 73Q627 92 663 193T700 345Q700 404 656 404H651Q565 404 506 303L499 291L466 157Q433 26 428 16Q415 -11 385 -11Q372 -11 364 -4T353 8T350 18Q350 29 384 161L420 307Q423 322 423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 181Q151 335 151 342Q154 357 154 369Q154 405 129 405Q107 405 92 377T69 316T57 280Q55 278 41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D44E" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path><path id="MJX-1-TEX-I-1D461" d="M26 385Q19 392 19 395Q19 399 22 411T27 425Q29 430 36 430T87 431H140L159 511Q162 522 166 540T173 566T179 586T187 603T197 615T211 624T229 626Q247 625 254 615T261 596Q261 589 252 549T232 470L222 433Q222 431 272 431H323Q330 424 330 420Q330 398 317 385H210L174 240Q135 80 135 68Q135 26 162 26Q197 26 230 60T283 144Q285 150 288 151T303 153H307Q322 153 322 145Q322 142 319 133Q314 117 301 95T267 48T216 6T155 -11Q125 -11 98 4T59 56Q57 64 57 83V101L92 241Q127 382 128 383Q128 385 77 385H26Z"></path><path id="MJX-1-TEX-N-3A" d="M78 370Q78 394 95 412T138 430Q162 430 180 414T199 371Q199 346 182 328T139 310T96 327T78 370ZM78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z"></path><path id="MJX-1-TEX-LO-2211" d="M60 948Q63 950 665 950H1267L1325 815Q1384 677 1388 669H1348L1341 683Q1320 724 1285 761Q1235 809 1174 838T1033 881T882 898T699 902H574H543H251L259 891Q722 258 724 252Q725 250 724 246Q721 243 460 -56L196 -356Q196 -357 407 -357Q459 -357 548 -357T676 -358Q812 -358 896 -353T1063 -332T1204 -283T1307 -196Q1328 -170 1348 -124H1388Q1388 -125 1381 -145T1356 -210T1325 -294L1267 -449L666 -450Q64 -450 61 -448Q55 -446 55 -439Q55 -437 57 -433L590 177Q590 178 557 222T452 366T322 544L56 909L55 924Q55 945 60 948Z"></path><path id="MJX-1-TEX-N-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path><path id="MJX-1-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-1-TEX-N-221E" d="M55 217Q55 305 111 373T254 442Q342 442 419 381Q457 350 493 303L507 284L514 294Q618 442 747 442Q833 442 888 374T944 214Q944 128 889 59T743 -11Q657 -11 580 50Q542 81 506 128L492 147L485 137Q381 -11 252 -11Q166 -11 111 57T55 217ZM907 217Q907 285 869 341T761 397Q740 397 720 392T682 378T648 359T619 335T594 310T574 285T559 263T548 246L543 238L574 198Q605 158 622 138T664 94T714 61T765 51Q827 51 867 100T907 217ZM92 214Q92 145 131 89T239 33Q357 33 456 193L425 233Q364 312 334 337Q285 380 233 380Q171 380 132 331T92 214Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D454" xlink:href="#MJX-1-TEX-I-1D454"></use></g><g data-mml-node="mi" transform="translate(477,0)"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mi" transform="translate(822,0)"><use data-c="1D44F" xlink:href="#MJX-1-TEX-I-1D44F"></use></g><g data-mml-node="mi" transform="translate(1251,0)"><use data-c="1D44F" xlink:href="#MJX-1-TEX-I-1D44F"></use></g><g data-mml-node="mi" transform="translate(1680,0)"><use data-c="1D452" xlink:href="#MJX-1-TEX-I-1D452"></use></g><g data-mml-node="mi" transform="translate(2146,0)"><use data-c="1D45F" xlink:href="#MJX-1-TEX-I-1D45F"></use></g><g data-mml-node="mi" transform="translate(2597,0)"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mi" transform="translate(2942,0)"><use data-c="1D460" xlink:href="#MJX-1-TEX-I-1D460"></use></g><g data-mml-node="mi" transform="translate(3411,0)"><use data-c="210E" xlink:href="#MJX-1-TEX-I-210E"></use></g><g data-mml-node="mstyle" transform="translate(3987,0)"><g data-mml-node="mspace"></g></g><g data-mml-node="mi" transform="translate(4265,0)"><use data-c="1D45A" xlink:href="#MJX-1-TEX-I-1D45A"></use></g><g data-mml-node="mi" transform="translate(5143,0)"><use data-c="1D44E" xlink:href="#MJX-1-TEX-I-1D44E"></use></g><g data-mml-node="mi" transform="translate(5672,0)"><use data-c="1D461" xlink:href="#MJX-1-TEX-I-1D461"></use></g><g data-mml-node="mi" transform="translate(6033,0)"><use data-c="210E" xlink:href="#MJX-1-TEX-I-210E"></use></g><g data-mml-node="mo" transform="translate(6886.8,0)"><use data-c="3A" xlink:href="#MJX-1-TEX-N-3A"></use></g><g data-mml-node="munderover" transform="translate(7442.6,0)"><g data-mml-node="mo"><use data-c="2211" xlink:href="#MJX-1-TEX-LO-2211"></use></g><g data-mml-node="TeXAtom" transform="translate(148.2,-1087.9) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="mi"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mo" transform="translate(345,0)"><use data-c="3D" xlink:href="#MJX-1-TEX-N-3D"></use></g><g data-mml-node="mn" transform="translate(1123,0)"><use data-c="30" xlink:href="#MJX-1-TEX-N-30"></use></g></g><g data-mml-node="mi" transform="translate(368.4,1150) scale(0.707)"><use data-c="221E" xlink:href="#MJX-1-TEX-N-221E"></use></g></g><g data-mml-node="msup" transform="translate(9053.2,0)"><g data-mml-node="mi"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mn" transform="translate(378,413) scale(0.707)"><use data-c="32" xlink:href="#MJX-1-TEX-N-32"></use></g></g></g></g></svg></g></g><g id="c"><g class="shape" ><rect x="398.000000" y="352.000000" width="154.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="475.000000" y="390.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mixed together</text></g><g id="sugar"><g class="shape" ><rect x="567.000000" y="169.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="610.000000" y="207.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sugar</text></g><g id="solution"><g class="shape" ><rect x="423.000000" y="539.000000" width="104.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="475.000000" y="577.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">solution</text></g><g id="(z -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 283.108949 51.940207 C 209.774834 91.000000 191.000000 111.000000 191.000000 147.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2472778904)" /></g><g id="(z -&gt; b)[0]"><path d="M 382.391051 51.940207 C 455.725166 91.000000 474.500000 119.300000 474.500000 188.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2472778904)" /></g><g id="(a -&gt; c)[0]"><path d="M 191.000000 254.000000 C 191.000000 292.000000 232.300000 314.091358 393.661139 361.332891" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2472778904)" /></g><g id="(b -&gt; c)[0]"><path d="M 474.500000 213.500000 C 474.500000 283.900000 474.500000 312.000000 474.500000 348.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2472778904)" /></g><g id="(sugar -&gt; c)[0]"><path d="M 610.000000 237.500000 C 610.000000 288.700000 593.600000 312.000000 531.415185 349.917570" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2472778904)" /></g><g id="(c -&gt; solution)[0]"><path d="M 474.500000 420.000000 C 474.500000 466.400000 474.500000 490.700000 474.500000 535.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2472778904)" /><text x="475.000000" y="484.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">we get</text></g><mask id="2472778904" maskUnits="userSpaceOnUse" x="-2" y="-2" width="657" height="609">
 <rect x="-2" y="-2" width="657" height="609" fill="white"></rect>
 <rect x="453.000000" y="468.000000" width="44" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/latex/elk/sketch.exp.svg b/e2etests/testdata/stable/latex/elk/sketch.exp.svg
index a28322b56..0f7fddee0 100644
--- a/e2etests/testdata/stable/latex/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/latex/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="577" height="609" viewBox="10 10 577 609"><rect x="10.000000" y="10.000000" width="577.000000" height="609.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 577 609"><svg id="d2-svg" width="577" height="609" viewBox="10 10 577 609"><rect x="10.000000" y="10.000000" width="577.000000" height="609.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -789,4 +769,4 @@
 </style><g id="a"><g class="shape" ></g><g transform="translate(12.000000 143.000000)" class=" color-N1"><svg style="vertical-align: -4.118ex;" xmlns="http://www.w3.org/2000/svg" width="47.718ex" height="12.624ex" role="img" focusable="false" viewBox="0 -3759.7 21091.2 5579.8" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D6FC" d="M34 156Q34 270 120 356T309 442Q379 442 421 402T478 304Q484 275 485 237V208Q534 282 560 374Q564 388 566 390T582 393Q603 393 603 385Q603 376 594 346T558 261T497 161L486 147L487 123Q489 67 495 47T514 26Q528 28 540 37T557 60Q559 67 562 68T577 70Q597 70 597 62Q597 56 591 43Q579 19 556 5T512 -10H505Q438 -10 414 62L411 69L400 61Q390 53 370 41T325 18T267 -2T203 -11Q124 -11 79 39T34 156ZM208 26Q257 26 306 47T379 90L403 112Q401 255 396 290Q382 405 304 405Q235 405 183 332Q156 292 139 224T121 120Q121 71 146 49T208 26Z"></path><path id="MJX-1-TEX-I-1D454" d="M311 43Q296 30 267 15T206 0Q143 0 105 45T66 160Q66 265 143 353T314 442Q361 442 401 394L404 398Q406 401 409 404T418 412T431 419T447 422Q461 422 470 413T480 394Q480 379 423 152T363 -80Q345 -134 286 -169T151 -205Q10 -205 10 -137Q10 -111 28 -91T74 -71Q89 -71 102 -80T116 -111Q116 -121 114 -130T107 -144T99 -154T92 -162L90 -164H91Q101 -167 151 -167Q189 -167 211 -155Q234 -144 254 -122T282 -75Q288 -56 298 -13Q311 35 311 43ZM384 328L380 339Q377 350 375 354T369 368T359 382T346 393T328 402T306 405Q262 405 221 352Q191 313 171 233T151 117Q151 38 213 38Q269 38 323 108L331 118L384 328Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-I-1D714" d="M495 384Q495 406 514 424T555 443Q574 443 589 425T604 364Q604 334 592 278T555 155T483 38T377 -11Q297 -11 267 66Q266 68 260 61Q201 -11 125 -11Q15 -11 15 139Q15 230 56 325T123 434Q135 441 147 436Q160 429 160 418Q160 406 140 379T94 306T62 208Q61 202 61 187Q61 124 85 100T143 76Q201 76 245 129L253 137V156Q258 297 317 297Q348 297 348 261Q348 243 338 213T318 158L308 135Q309 133 310 129T318 115T334 97T358 83T393 76Q456 76 501 148T546 274Q546 305 533 325T508 357T495 384Z"></path><path id="MJX-1-TEX-N-35" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z"></path><path id="MJX-1-TEX-I-1D452" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path><path id="MJX-1-TEX-N-5B" d="M118 -250V750H255V710H158V-210H255V-250H118Z"></path><path id="MJX-1-TEX-N-2212" d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path><path id="MJX-1-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-1-TEX-N-2E" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z"></path><path id="MJX-1-TEX-N-37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z"></path><path id="MJX-1-TEX-N-34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path><path id="MJX-1-TEX-SO-7B" d="M477 -343L471 -349H458Q432 -349 367 -325T273 -263Q258 -245 250 -212L249 -51Q249 -27 249 12Q248 118 244 128Q243 129 243 130Q220 189 121 228Q109 232 107 235T105 250Q105 256 105 257T105 261T107 265T111 268T118 272T128 276T142 283T162 291Q224 324 243 371Q243 372 244 373Q248 384 249 469Q249 475 249 489Q249 528 249 552L250 714Q253 728 256 736T271 761T299 789T347 816T422 843Q440 849 441 849H443Q445 849 447 849T452 850T457 850H471L477 844V830Q477 820 476 817T470 811T459 807T437 801T404 785Q353 760 338 724Q333 710 333 550Q333 526 333 492T334 447Q334 393 327 368T295 318Q257 280 181 255L169 251L184 245Q318 198 332 112Q333 106 333 -49Q333 -209 338 -223Q351 -255 391 -277T469 -309Q477 -311 477 -329V-343Z"></path><path id="MJX-1-TEX-I-1D448" d="M107 637Q73 637 71 641Q70 643 70 649Q70 673 81 682Q83 683 98 683Q139 681 234 681Q268 681 297 681T342 682T362 682Q378 682 378 672Q378 670 376 658Q371 641 366 638H364Q362 638 359 638T352 638T343 637T334 637Q295 636 284 634T266 623Q265 621 238 518T184 302T154 169Q152 155 152 140Q152 86 183 55T269 24Q336 24 403 69T501 205L552 406Q599 598 599 606Q599 633 535 637Q511 637 511 648Q511 650 513 660Q517 676 519 679T529 683Q532 683 561 682T645 680Q696 680 723 681T752 682Q767 682 767 672Q767 650 759 642Q756 637 737 637Q666 633 648 597Q646 592 598 404Q557 235 548 205Q515 105 433 42T263 -22Q171 -22 116 34T60 167V183Q60 201 115 421Q164 622 164 628Q164 635 107 637Z"></path><path id="MJX-1-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path><path id="MJX-1-TEX-N-39" d="M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z"></path><path id="MJX-1-TEX-SO-7D" d="M110 849L115 850Q120 850 125 850Q151 850 215 826T309 764Q324 747 332 714L333 552Q333 528 333 489Q334 383 338 373Q339 372 339 371Q353 336 391 310T469 271Q477 268 477 251Q477 241 476 237T472 232T456 225T428 214Q357 179 339 130Q339 129 338 128Q334 117 333 32Q333 26 333 12Q333 -27 333 -51L332 -212Q328 -228 323 -240T302 -271T255 -307T175 -338Q139 -349 125 -349T108 -346T105 -329Q105 -314 107 -312T130 -304Q233 -271 248 -209Q249 -203 249 -49V57Q249 106 253 125T273 167Q307 213 398 245L413 251L401 255Q265 300 250 389Q249 395 249 550Q249 710 244 724Q224 774 112 811Q105 813 105 830Q105 845 110 849Z"></path><path id="MJX-1-TEX-N-5D" d="M22 710V750H159V-250H22V-210H119V710H22Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mstyle" transform="scale(2.49)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mfrac"><g data-mml-node="mrow" transform="translate(220,676)"><g data-mml-node="mi"><use data-c="1D6FC" xlink:href="#MJX-1-TEX-I-1D6FC"></use></g><g data-mml-node="msup" transform="translate(640,0)"><g data-mml-node="mi"><use data-c="1D454" xlink:href="#MJX-1-TEX-I-1D454"></use></g><g data-mml-node="mn" transform="translate(510,363) scale(0.707)"><use data-c="32" xlink:href="#MJX-1-TEX-N-32"></use></g></g></g><g data-mml-node="msup" transform="translate(467.5,-719.9)"><g data-mml-node="mi"><use data-c="1D714" xlink:href="#MJX-1-TEX-I-1D714"></use></g><g data-mml-node="mn" transform="translate(655,289) scale(0.707)"><use data-c="35" xlink:href="#MJX-1-TEX-N-35"></use></g></g><rect width="1753.6" height="60" x="120" y="220"></rect></g><g data-mml-node="msup" transform="translate(1993.6,0)"><g data-mml-node="mi"><use data-c="1D452" xlink:href="#MJX-1-TEX-I-1D452"></use></g><g data-mml-node="TeXAtom" transform="translate(499,457) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="mo"><use data-c="5B" xlink:href="#MJX-1-TEX-N-5B"></use></g><g data-mml-node="mo" transform="translate(278,0)"><use data-c="2212" xlink:href="#MJX-1-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(1056,0)"><use data-c="30" xlink:href="#MJX-1-TEX-N-30"></use><use data-c="2E" xlink:href="#MJX-1-TEX-N-2E" transform="translate(500,0)"></use><use data-c="37" xlink:href="#MJX-1-TEX-N-37" transform="translate(778,0)"></use><use data-c="34" xlink:href="#MJX-1-TEX-N-34" transform="translate(1278,0)"></use></g><g data-mml-node="TeXAtom" data-mjx-texclass="OPEN" transform="translate(2834,0)"><g data-mml-node="mo" transform="translate(0 -0.5)"><use data-c="7B" xlink:href="#MJX-1-TEX-SO-7B"></use></g></g><g data-mml-node="mfrac" transform="translate(3417,0)"><g data-mml-node="mrow" transform="translate(220,453.8) scale(0.707)"><g data-mml-node="mi"><use data-c="1D714" xlink:href="#MJX-1-TEX-I-1D714"></use></g><g data-mml-node="msub" transform="translate(622,0)"><g data-mml-node="mi"><use data-c="1D448" xlink:href="#MJX-1-TEX-I-1D448"></use></g><g data-mml-node="mi" transform="translate(716,-150)"><use data-c="1D714" xlink:href="#MJX-1-TEX-I-1D714"></use></g></g><g data-mml-node="mn" transform="translate(2010,0)"><use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use><use data-c="39" xlink:href="#MJX-1-TEX-N-39" transform="translate(500,0)"></use><use data-c="2E" xlink:href="#MJX-1-TEX-N-2E" transform="translate(1000,0)"></use><use data-c="35" xlink:href="#MJX-1-TEX-N-35" transform="translate(1278,0)"></use></g></g><g data-mml-node="mi" transform="translate(1390.6,-345) scale(0.707)"><use data-c="1D454" xlink:href="#MJX-1-TEX-I-1D454"></use></g><rect width="2878.5" height="60" x="120" y="220"></rect></g><g data-mml-node="msup" transform="translate(6535.5,0)"><g data-mml-node="TeXAtom" data-mjx-texclass="CLOSE"><g data-mml-node="mo" transform="translate(0 -0.5)"><use data-c="7D" xlink:href="#MJX-1-TEX-SO-7D"></use></g></g><g data-mml-node="TeXAtom" transform="translate(616,576.6) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="mstyle" transform="scale(2)"><g data-mml-node="mspace"></g></g><g data-mml-node="mo" transform="translate(-334,0)"><use data-c="2212" xlink:href="#MJX-1-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(444,0)"><use data-c="34" xlink:href="#MJX-1-TEX-N-34"></use></g></g></g><g data-mml-node="mstyle" transform="translate(7869,0) scale(1.414)"><g data-mml-node="mspace"></g></g><g data-mml-node="mo" transform="translate(8105.2,0)"><use data-c="5D" xlink:href="#MJX-1-TEX-N-5D"></use></g></g></g></g></g></g></g></svg></g></g><g id="b"><g class="shape" ></g><g transform="translate(414.000000 184.000000)" class=" color-N1"><svg style="vertical-align: -0.186ex;" xmlns="http://www.w3.org/2000/svg" width="8.025ex" height="2.185ex" role="img" focusable="false" viewBox="0 -883.9 3547.1 965.9" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D452" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path><path id="MJX-1-TEX-N-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path><path id="MJX-1-TEX-I-1D45A" d="M21 287Q22 293 24 303T36 341T56 388T88 425T132 442T175 435T205 417T221 395T229 376L231 369Q231 367 232 367L243 378Q303 442 384 442Q401 442 415 440T441 433T460 423T475 411T485 398T493 385T497 373T500 364T502 357L510 367Q573 442 659 442Q713 442 746 415T780 336Q780 285 742 178T704 50Q705 36 709 31T724 26Q752 26 776 56T815 138Q818 149 821 151T837 153Q857 153 857 145Q857 144 853 130Q845 101 831 73T785 17T716 -10Q669 -10 648 17T627 73Q627 92 663 193T700 345Q700 404 656 404H651Q565 404 506 303L499 291L466 157Q433 26 428 16Q415 -11 385 -11Q372 -11 364 -4T353 8T350 18Q350 29 384 161L420 307Q423 322 423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 181Q151 335 151 342Q154 357 154 369Q154 405 129 405Q107 405 92 377T69 316T57 280Q55 278 41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D450" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D452" xlink:href="#MJX-1-TEX-I-1D452"></use></g><g data-mml-node="mo" transform="translate(743.8,0)"><use data-c="3D" xlink:href="#MJX-1-TEX-N-3D"></use></g><g data-mml-node="mi" transform="translate(1799.6,0)"><use data-c="1D45A" xlink:href="#MJX-1-TEX-I-1D45A"></use></g><g data-mml-node="msup" transform="translate(2677.6,0)"><g data-mml-node="mi"><use data-c="1D450" xlink:href="#MJX-1-TEX-I-1D450"></use></g><g data-mml-node="mn" transform="translate(466,413) scale(0.707)"><use data-c="32" xlink:href="#MJX-1-TEX-N-32"></use></g></g></g></g></svg></g></g><g id="z"><g class="shape" ></g><g transform="translate(143.000000 12.000000)" class=" color-N1"><svg style="vertical-align: -2.819ex;" xmlns="http://www.w3.org/2000/svg" width="22.251ex" height="6.354ex" role="img" focusable="false" viewBox="0 -1562.5 9834.8 2808.5" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D454" d="M311 43Q296 30 267 15T206 0Q143 0 105 45T66 160Q66 265 143 353T314 442Q361 442 401 394L404 398Q406 401 409 404T418 412T431 419T447 422Q461 422 470 413T480 394Q480 379 423 152T363 -80Q345 -134 286 -169T151 -205Q10 -205 10 -137Q10 -111 28 -91T74 -71Q89 -71 102 -80T116 -111Q116 -121 114 -130T107 -144T99 -154T92 -162L90 -164H91Q101 -167 151 -167Q189 -167 211 -155Q234 -144 254 -122T282 -75Q288 -56 298 -13Q311 35 311 43ZM384 328L380 339Q377 350 375 354T369 368T359 382T346 393T328 402T306 405Q262 405 221 352Q191 313 171 233T151 117Q151 38 213 38Q269 38 323 108L331 118L384 328Z"></path><path id="MJX-1-TEX-I-1D456" d="M184 600Q184 624 203 642T247 661Q265 661 277 649T290 619Q290 596 270 577T226 557Q211 557 198 567T184 600ZM21 287Q21 295 30 318T54 369T98 420T158 442Q197 442 223 419T250 357Q250 340 236 301T196 196T154 83Q149 61 149 51Q149 26 166 26Q175 26 185 29T208 43T235 78T260 137Q263 149 265 151T282 153Q302 153 302 143Q302 135 293 112T268 61T223 11T161 -11Q129 -11 102 10T74 74Q74 91 79 106T122 220Q160 321 166 341T173 380Q173 404 156 404H154Q124 404 99 371T61 287Q60 286 59 284T58 281T56 279T53 278T49 278T41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D44F" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path><path id="MJX-1-TEX-I-1D452" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path><path id="MJX-1-TEX-I-1D45F" d="M21 287Q22 290 23 295T28 317T38 348T53 381T73 411T99 433T132 442Q161 442 183 430T214 408T225 388Q227 382 228 382T236 389Q284 441 347 441H350Q398 441 422 400Q430 381 430 363Q430 333 417 315T391 292T366 288Q346 288 334 299T322 328Q322 376 378 392Q356 405 342 405Q286 405 239 331Q229 315 224 298T190 165Q156 25 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 114 189T154 366Q154 405 128 405Q107 405 92 377T68 316T57 280Q55 278 41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D460" d="M131 289Q131 321 147 354T203 415T300 442Q362 442 390 415T419 355Q419 323 402 308T364 292Q351 292 340 300T328 326Q328 342 337 354T354 372T367 378Q368 378 368 379Q368 382 361 388T336 399T297 405Q249 405 227 379T204 326Q204 301 223 291T278 274T330 259Q396 230 396 163Q396 135 385 107T352 51T289 7T195 -10Q118 -10 86 19T53 87Q53 126 74 143T118 160Q133 160 146 151T160 120Q160 94 142 76T111 58Q109 57 108 57T107 55Q108 52 115 47T146 34T201 27Q237 27 263 38T301 66T318 97T323 122Q323 150 302 164T254 181T195 196T148 231Q131 256 131 289Z"></path><path id="MJX-1-TEX-I-210E" d="M137 683Q138 683 209 688T282 694Q294 694 294 685Q294 674 258 534Q220 386 220 383Q220 381 227 388Q288 442 357 442Q411 442 444 415T478 336Q478 285 440 178T402 50Q403 36 407 31T422 26Q450 26 474 56T513 138Q516 149 519 151T535 153Q555 153 555 145Q555 144 551 130Q535 71 500 33Q466 -10 419 -10H414Q367 -10 346 17T325 74Q325 90 361 192T398 345Q398 404 354 404H349Q266 404 205 306L198 293L164 158Q132 28 127 16Q114 -11 83 -11Q69 -11 59 -2T48 16Q48 30 121 320L195 616Q195 629 188 632T149 637H128Q122 643 122 645T124 664Q129 683 137 683Z"></path><path id="MJX-1-TEX-I-1D45A" d="M21 287Q22 293 24 303T36 341T56 388T88 425T132 442T175 435T205 417T221 395T229 376L231 369Q231 367 232 367L243 378Q303 442 384 442Q401 442 415 440T441 433T460 423T475 411T485 398T493 385T497 373T500 364T502 357L510 367Q573 442 659 442Q713 442 746 415T780 336Q780 285 742 178T704 50Q705 36 709 31T724 26Q752 26 776 56T815 138Q818 149 821 151T837 153Q857 153 857 145Q857 144 853 130Q845 101 831 73T785 17T716 -10Q669 -10 648 17T627 73Q627 92 663 193T700 345Q700 404 656 404H651Q565 404 506 303L499 291L466 157Q433 26 428 16Q415 -11 385 -11Q372 -11 364 -4T353 8T350 18Q350 29 384 161L420 307Q423 322 423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 181Q151 335 151 342Q154 357 154 369Q154 405 129 405Q107 405 92 377T69 316T57 280Q55 278 41 278H27Q21 284 21 287Z"></path><path id="MJX-1-TEX-I-1D44E" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path><path id="MJX-1-TEX-I-1D461" d="M26 385Q19 392 19 395Q19 399 22 411T27 425Q29 430 36 430T87 431H140L159 511Q162 522 166 540T173 566T179 586T187 603T197 615T211 624T229 626Q247 625 254 615T261 596Q261 589 252 549T232 470L222 433Q222 431 272 431H323Q330 424 330 420Q330 398 317 385H210L174 240Q135 80 135 68Q135 26 162 26Q197 26 230 60T283 144Q285 150 288 151T303 153H307Q322 153 322 145Q322 142 319 133Q314 117 301 95T267 48T216 6T155 -11Q125 -11 98 4T59 56Q57 64 57 83V101L92 241Q127 382 128 383Q128 385 77 385H26Z"></path><path id="MJX-1-TEX-N-3A" d="M78 370Q78 394 95 412T138 430Q162 430 180 414T199 371Q199 346 182 328T139 310T96 327T78 370ZM78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z"></path><path id="MJX-1-TEX-LO-2211" d="M60 948Q63 950 665 950H1267L1325 815Q1384 677 1388 669H1348L1341 683Q1320 724 1285 761Q1235 809 1174 838T1033 881T882 898T699 902H574H543H251L259 891Q722 258 724 252Q725 250 724 246Q721 243 460 -56L196 -356Q196 -357 407 -357Q459 -357 548 -357T676 -358Q812 -358 896 -353T1063 -332T1204 -283T1307 -196Q1328 -170 1348 -124H1388Q1388 -125 1381 -145T1356 -210T1325 -294L1267 -449L666 -450Q64 -450 61 -448Q55 -446 55 -439Q55 -437 57 -433L590 177Q590 178 557 222T452 366T322 544L56 909L55 924Q55 945 60 948Z"></path><path id="MJX-1-TEX-N-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path><path id="MJX-1-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-1-TEX-N-221E" d="M55 217Q55 305 111 373T254 442Q342 442 419 381Q457 350 493 303L507 284L514 294Q618 442 747 442Q833 442 888 374T944 214Q944 128 889 59T743 -11Q657 -11 580 50Q542 81 506 128L492 147L485 137Q381 -11 252 -11Q166 -11 111 57T55 217ZM907 217Q907 285 869 341T761 397Q740 397 720 392T682 378T648 359T619 335T594 310T574 285T559 263T548 246L543 238L574 198Q605 158 622 138T664 94T714 61T765 51Q827 51 867 100T907 217ZM92 214Q92 145 131 89T239 33Q357 33 456 193L425 233Q364 312 334 337Q285 380 233 380Q171 380 132 331T92 214Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D454" xlink:href="#MJX-1-TEX-I-1D454"></use></g><g data-mml-node="mi" transform="translate(477,0)"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mi" transform="translate(822,0)"><use data-c="1D44F" xlink:href="#MJX-1-TEX-I-1D44F"></use></g><g data-mml-node="mi" transform="translate(1251,0)"><use data-c="1D44F" xlink:href="#MJX-1-TEX-I-1D44F"></use></g><g data-mml-node="mi" transform="translate(1680,0)"><use data-c="1D452" xlink:href="#MJX-1-TEX-I-1D452"></use></g><g data-mml-node="mi" transform="translate(2146,0)"><use data-c="1D45F" xlink:href="#MJX-1-TEX-I-1D45F"></use></g><g data-mml-node="mi" transform="translate(2597,0)"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mi" transform="translate(2942,0)"><use data-c="1D460" xlink:href="#MJX-1-TEX-I-1D460"></use></g><g data-mml-node="mi" transform="translate(3411,0)"><use data-c="210E" xlink:href="#MJX-1-TEX-I-210E"></use></g><g data-mml-node="mstyle" transform="translate(3987,0)"><g data-mml-node="mspace"></g></g><g data-mml-node="mi" transform="translate(4265,0)"><use data-c="1D45A" xlink:href="#MJX-1-TEX-I-1D45A"></use></g><g data-mml-node="mi" transform="translate(5143,0)"><use data-c="1D44E" xlink:href="#MJX-1-TEX-I-1D44E"></use></g><g data-mml-node="mi" transform="translate(5672,0)"><use data-c="1D461" xlink:href="#MJX-1-TEX-I-1D461"></use></g><g data-mml-node="mi" transform="translate(6033,0)"><use data-c="210E" xlink:href="#MJX-1-TEX-I-210E"></use></g><g data-mml-node="mo" transform="translate(6886.8,0)"><use data-c="3A" xlink:href="#MJX-1-TEX-N-3A"></use></g><g data-mml-node="munderover" transform="translate(7442.6,0)"><g data-mml-node="mo"><use data-c="2211" xlink:href="#MJX-1-TEX-LO-2211"></use></g><g data-mml-node="TeXAtom" transform="translate(148.2,-1087.9) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="mi"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mo" transform="translate(345,0)"><use data-c="3D" xlink:href="#MJX-1-TEX-N-3D"></use></g><g data-mml-node="mn" transform="translate(1123,0)"><use data-c="30" xlink:href="#MJX-1-TEX-N-30"></use></g></g><g data-mml-node="mi" transform="translate(368.4,1150) scale(0.707)"><use data-c="221E" xlink:href="#MJX-1-TEX-N-221E"></use></g></g><g data-mml-node="msup" transform="translate(9053.2,0)"><g data-mml-node="mi"><use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use></g><g data-mml-node="mn" transform="translate(378,413) scale(0.707)"><use data-c="32" xlink:href="#MJX-1-TEX-N-32"></use></g></g></g></g></svg></g></g><g id="c"><g class="shape" ><rect x="369.000000" y="324.000000" width="154.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="446.000000" y="362.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mixed together</text></g><g id="sugar"><g class="shape" ><rect x="499.000000" y="178.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="542.000000" y="216.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sugar</text></g><g id="solution"><g class="shape" ><rect x="394.000000" y="551.000000" width="104.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="446.000000" y="589.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">solution</text></g><g id="(z -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 203.000000 65.000000 L 203.000000 139.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1978707465)" /></g><g id="(z -&gt; b)[0]"><path d="M 262.666667 65.000000 L 262.666667 93.000000 S 262.666667 103.000000 272.666667 103.000000 L 436.500000 103.000000 S 446.500000 103.000000 446.500000 113.000000 L 446.500000 180.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1978707465)" /></g><g id="(a -&gt; c)[0]"><path d="M 203.000000 246.000000 L 203.000000 274.000000 S 203.000000 284.000000 213.000000 284.000000 L 398.000000 284.000000 S 408.000000 284.000000 408.000000 294.000000 L 408.000000 320.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1978707465)" /></g><g id="(b -&gt; c)[0]"><path d="M 446.500000 204.500000 L 446.500000 320.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1978707465)" /></g><g id="(sugar -&gt; c)[0]"><path d="M 542.000000 246.000000 L 542.000000 274.000000 S 542.000000 284.000000 532.000000 284.000000 L 495.000000 284.000000 S 485.000000 284.000000 485.000000 294.000000 L 485.000000 320.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1978707465)" /></g><g id="(c -&gt; solution)[0]"><path d="M 446.500000 392.000000 L 446.500000 547.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1978707465)" /><text x="447.000000" y="476.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">we get</text></g><mask id="1978707465" maskUnits="userSpaceOnUse" x="10" y="10" width="577" height="609">
 <rect x="10" y="10" width="577" height="609" fill="white"></rect>
 <rect x="425.000000" y="460.000000" width="44" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li1/dagre/sketch.exp.svg b/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
index be3bc3759..86e41f45c 100644
--- a/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="383" height="436" viewBox="-2 -2 383 436"><rect x="-2.000000" y="-2.000000" width="383.000000" height="436.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 383 436"><svg id="d2-svg" width="383" height="436" viewBox="-2 -2 383 436"><rect x="-2.000000" y="-2.000000" width="383.000000" height="436.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -801,4 +781,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="163.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="163.000000" y="366.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.500000" y="404.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.500000 68.000000 C 189.500000 106.000000 189.500000 126.000000 189.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2583703329)" /></g><g id="(md -&gt; b)[0]"><path d="M 189.500000 268.000000 C 189.500000 306.000000 189.500000 326.000000 189.500000 362.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2583703329)" /></g><mask id="2583703329" maskUnits="userSpaceOnUse" x="-2" y="-2" width="383" height="436">
 <rect x="-2" y="-2" width="383" height="436" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li1/elk/sketch.exp.svg b/e2etests/testdata/stable/li1/elk/sketch.exp.svg
index 54c7cfdc8..7b3f47a53 100644
--- a/e2etests/testdata/stable/li1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li1/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="383" height="376" viewBox="10 10 383 376"><rect x="10.000000" y="10.000000" width="383.000000" height="376.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 383 376"><svg id="d2-svg" width="383" height="376" viewBox="10 10 383 376"><rect x="10.000000" y="10.000000" width="383.000000" height="376.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -801,4 +781,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="175.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="201.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="175.000000" y="318.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="201.500000" y="356.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 201.500000 80.000000 L 201.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3751554958)" /></g><g id="(md -&gt; b)[0]"><path d="M 201.500000 250.000000 L 201.500000 314.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3751554958)" /></g><mask id="3751554958" maskUnits="userSpaceOnUse" x="10" y="10" width="383" height="376">
 <rect x="10" y="10" width="383" height="376" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li2/dagre/sketch.exp.svg b/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
index 11ba9d33f..12aa7c6d7 100644
--- a/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="249" height="412" viewBox="-2 -2 249 412"><rect x="-2.000000" y="-2.000000" width="249.000000" height="412.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 249 412"><svg id="d2-svg" width="249" height="412" viewBox="-2 -2 249 412"><rect x="-2.000000" y="-2.000000" width="249.000000" height="412.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -804,4 +784,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="96.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="122.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="96.000000" y="342.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="122.500000" y="380.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 122.500000 68.000000 C 122.500000 106.000000 122.500000 126.000000 122.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3953069545)" /></g><g id="(md -&gt; b)[0]"><path d="M 122.500000 244.000000 C 122.500000 282.000000 122.500000 302.000000 122.500000 338.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3953069545)" /></g><mask id="3953069545" maskUnits="userSpaceOnUse" x="-2" y="-2" width="249" height="412">
 <rect x="-2" y="-2" width="249" height="412" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li2/elk/sketch.exp.svg b/e2etests/testdata/stable/li2/elk/sketch.exp.svg
index d6517deaa..eae0f0740 100644
--- a/e2etests/testdata/stable/li2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="249" height="352" viewBox="10 10 249 352"><rect x="10.000000" y="10.000000" width="249.000000" height="352.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 249 352"><svg id="d2-svg" width="249" height="352" viewBox="10 10 249 352"><rect x="10.000000" y="10.000000" width="249.000000" height="352.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -804,4 +784,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="108.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="134.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="108.000000" y="294.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="134.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 134.500000 80.000000 L 134.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1393243091)" /></g><g id="(md -&gt; b)[0]"><path d="M 134.500000 226.000000 L 134.500000 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1393243091)" /></g><mask id="1393243091" maskUnits="userSpaceOnUse" x="10" y="10" width="249" height="352">
 <rect x="10" y="10" width="249" height="352" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li3/dagre/sketch.exp.svg b/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
index 9f2a97fea..8da3e4b30 100644
--- a/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="351" height="848" viewBox="-2 -2 351 848"><rect x="-2.000000" y="-2.000000" width="351.000000" height="848.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 351 848"><svg id="d2-svg" width="351" height="848" viewBox="-2 -2 351 848"><rect x="-2.000000" y="-2.000000" width="351.000000" height="848.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -822,4 +802,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="147.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="173.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="147.000000" y="778.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="173.500000" y="816.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 173.500000 68.000000 C 173.500000 106.000000 173.500000 126.000000 173.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1786874233)" /></g><g id="(md -&gt; b)[0]"><path d="M 173.500000 680.000000 C 173.500000 718.000000 173.500000 738.000000 173.500000 774.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1786874233)" /></g><mask id="1786874233" maskUnits="userSpaceOnUse" x="-2" y="-2" width="351" height="848">
 <rect x="-2" y="-2" width="351" height="848" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li3/elk/sketch.exp.svg b/e2etests/testdata/stable/li3/elk/sketch.exp.svg
index a631b3acd..2525c2283 100644
--- a/e2etests/testdata/stable/li3/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="351" height="788" viewBox="10 10 351 788"><rect x="10.000000" y="10.000000" width="351.000000" height="788.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 351 788"><svg id="d2-svg" width="351" height="788" viewBox="10 10 351 788"><rect x="10.000000" y="10.000000" width="351.000000" height="788.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -822,4 +802,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="159.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="185.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="159.000000" y="730.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="185.500000" y="768.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 185.500000 80.000000 L 185.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1101735745)" /></g><g id="(md -&gt; b)[0]"><path d="M 185.500000 662.000000 L 185.500000 726.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1101735745)" /></g><mask id="1101735745" maskUnits="userSpaceOnUse" x="10" y="10" width="351" height="788">
 <rect x="10" y="10" width="351" height="788" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li4/dagre/sketch.exp.svg b/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
index e47459312..67550f1b1 100644
--- a/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="924" height="712" viewBox="-2 -2 924 712"><rect x="-2.000000" y="-2.000000" width="924.000000" height="712.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 924 712"><svg id="d2-svg" width="924" height="712" viewBox="-2 -2 924 712"><rect x="-2.000000" y="-2.000000" width="924.000000" height="712.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -827,4 +807,4 @@ sit amet, consectetuer adipiscing elit.</p>
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="434.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="460.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="434.000000" y="642.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="460.500000" y="680.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 460.000000 68.000000 C 460.000000 106.000000 460.000000 126.000000 460.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#230951845)" /></g><g id="(md -&gt; b)[0]"><path d="M 460.000000 544.000000 C 460.000000 582.000000 460.000000 602.000000 460.000000 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#230951845)" /></g><mask id="230951845" maskUnits="userSpaceOnUse" x="-2" y="-2" width="924" height="712">
 <rect x="-2" y="-2" width="924" height="712" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/li4/elk/sketch.exp.svg b/e2etests/testdata/stable/li4/elk/sketch.exp.svg
index b5ee68801..4ba65e126 100644
--- a/e2etests/testdata/stable/li4/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="924" height="652" viewBox="10 10 924 652"><rect x="10.000000" y="10.000000" width="924.000000" height="652.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 924 652"><svg id="d2-svg" width="924" height="652" viewBox="10 10 924 652"><rect x="10.000000" y="10.000000" width="924.000000" height="652.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -827,4 +807,4 @@ sit amet, consectetuer adipiscing elit.</p>
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="445.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="471.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="445.000000" y="594.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="471.500000" y="632.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 472.000000 80.000000 L 472.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1273348057)" /></g><g id="(md -&gt; b)[0]"><path d="M 472.000000 526.000000 L 472.000000 590.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1273348057)" /></g><mask id="1273348057" maskUnits="userSpaceOnUse" x="10" y="10" width="924" height="652">
 <rect x="10" y="10" width="924" height="652" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/links/dagre/sketch.exp.svg b/e2etests/testdata/stable/links/dagre/sketch.exp.svg
index ee7cdb147..1c2f538a6 100644
--- a/e2etests/testdata/stable/links/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/links/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="138" height="252" viewBox="-2 -18 138 252"><rect x="-2.000000" y="-18.000000" width="138.000000" height="252.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 138 252"><svg id="d2-svg" width="138" height="252" viewBox="-2 -18 138 252"><rect x="-2.000000" y="-18.000000" width="138.000000" height="252.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3440_35088111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -80,4 +60,4 @@
 </g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2830374313)" /></g><mask id="2830374313" maskUnits="userSpaceOnUse" x="-2" y="-18" width="138" height="252">
 <rect x="-2" y="-18" width="138" height="252" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/links/elk/sketch.exp.svg b/e2etests/testdata/stable/links/elk/sketch.exp.svg
index 47097b119..879eb2a0f 100644
--- a/e2etests/testdata/stable/links/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/links/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="138" height="222" viewBox="10 -6 138 222"><rect x="10.000000" y="-6.000000" width="138.000000" height="222.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 138 222"><svg id="d2-svg" width="138" height="222" viewBox="10 -6 138 222"><rect x="10.000000" y="-6.000000" width="138.000000" height="222.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="28.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="70.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(97 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="28.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="70.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(97 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3440_35088111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -80,4 +60,4 @@
 </g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 71.000000 80.000000 L 71.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2271632857)" /></g><mask id="2271632857" maskUnits="userSpaceOnUse" x="10" y="-6" width="138" height="222">
 <rect x="10" y="-6" width="138" height="222" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg b/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
index b546aa601..d4b4c15cc 100644
--- a/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="270" height="387" viewBox="-2 -2 270 387"><rect x="-2.000000" y="-2.000000" width="270.000000" height="387.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 270 387"><svg id="d2-svg" width="270" height="387" viewBox="-2 -2 270 387"><rect x="-2.000000" y="-2.000000" width="270.000000" height="387.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -790,4 +770,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="107.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="133.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="107.000000" y="317.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="133.500000" y="355.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 133.000000 68.000000 C 133.000000 106.000000 133.000000 126.000000 133.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#616795706)" /></g><g id="(md -&gt; b)[0]"><path d="M 133.000000 219.000000 C 133.000000 257.000000 133.000000 277.000000 133.000000 313.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#616795706)" /></g><mask id="616795706" maskUnits="userSpaceOnUse" x="-2" y="-2" width="270" height="387">
 <rect x="-2" y="-2" width="270" height="387" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg b/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
index 857f1bd3e..f89db1fd2 100644
--- a/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="270" height="327" viewBox="10 10 270 327"><rect x="10.000000" y="10.000000" width="270.000000" height="327.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 270 327"><svg id="d2-svg" width="270" height="327" viewBox="10 10 270 327"><rect x="10.000000" y="10.000000" width="270.000000" height="327.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -790,4 +770,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="118.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="144.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="118.000000" y="269.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="144.500000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 145.000000 80.000000 L 145.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2434786200)" /></g><g id="(md -&gt; b)[0]"><path d="M 145.000000 201.000000 L 145.000000 265.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2434786200)" /></g><mask id="2434786200" maskUnits="userSpaceOnUse" x="10" y="10" width="270" height="327">
 <rect x="10" y="10" width="270" height="327" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg b/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
index 72f596348..28587cfc5 100644
--- a/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="535" height="523" viewBox="-2 -2 535 523"><rect x="-2.000000" y="-2.000000" width="535.000000" height="523.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 535 523"><svg id="d2-svg" width="535" height="523" viewBox="-2 -2 535 523"><rect x="-2.000000" y="-2.000000" width="535.000000" height="523.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -803,4 +783,4 @@
 </div></foreignObject></g></g><g id="x"><g class="shape" ><rect x="239.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="265.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="239.000000" y="453.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="266.000000" y="491.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 265.500000 68.000000 C 265.500000 106.000000 265.500000 126.000000 265.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1860881160)" /></g><g id="(hey -&gt; y)[0]"><path d="M 265.500000 355.000000 C 265.500000 393.000000 265.500000 413.000000 265.500000 449.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1860881160)" /></g><mask id="1860881160" maskUnits="userSpaceOnUse" x="-2" y="-2" width="535" height="523">
 <rect x="-2" y="-2" width="535" height="523" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/markdown/elk/sketch.exp.svg b/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
index 3144dc3fc..3b8851909 100644
--- a/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="535" height="463" viewBox="10 10 535 463"><rect x="10.000000" y="10.000000" width="535.000000" height="463.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 535 463"><svg id="d2-svg" width="535" height="463" viewBox="10 10 535 463"><rect x="10.000000" y="10.000000" width="535.000000" height="463.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -803,4 +783,4 @@
 </div></foreignObject></g></g><g id="x"><g class="shape" ><rect x="251.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="277.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="250.000000" y="405.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="277.000000" y="443.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 277.500000 80.000000 L 277.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1103696627)" /></g><g id="(hey -&gt; y)[0]"><path d="M 277.500000 337.000000 L 277.500000 401.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1103696627)" /></g><mask id="1103696627" maskUnits="userSpaceOnUse" x="10" y="10" width="535" height="463">
 <rect x="10" y="10" width="535" height="463" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
index 59b981add..c6b350fb4 100644
--- a/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="296" height="484" viewBox="-2 0 296 484"><rect x="-2.000000" y="0.000000" width="296.000000" height="484.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 296 484"><svg id="d2-svg" width="296" height="484" viewBox="-2 0 296 484"><rect x="-2.000000" y="0.000000" width="296.000000" height="484.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -798,4 +778,4 @@
 </div></foreignObject></g></g><g id="(container -&gt; no container)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 146.000000 360.000000 C 146.000000 398.000000 146.000000 418.000000 146.000000 454.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1493688217)" /></g><mask id="1493688217" maskUnits="userSpaceOnUse" x="-2" y="0" width="296" height="484">
 <rect x="-2" y="0" width="296" height="484" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
index 08ff5740e..c672e94af 100644
--- a/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="316" height="456" viewBox="10 10 316 456"><rect x="10.000000" y="10.000000" width="316.000000" height="456.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 316 456"><svg id="d2-svg" width="316" height="456" viewBox="10 10 316 456"><rect x="10.000000" y="10.000000" width="316.000000" height="456.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -798,4 +778,4 @@
 </div></foreignObject></g></g><g id="(container -&gt; no container)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 168.000000 372.000000 L 168.000000 436.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#380759537)" /></g><mask id="380759537" maskUnits="userSpaceOnUse" x="10" y="10" width="316" height="456">
 <rect x="10" y="10" width="316" height="456" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
index ef7b78172..e7d52af1b 100644
--- a/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="543" height="150" viewBox="-2 0 543 150"><rect x="-2.000000" y="0.000000" width="543.000000" height="150.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 543 150"><svg id="d2-svg" width="543" height="150" viewBox="-2 0 543 150"><rect x="-2.000000" y="0.000000" width="543.000000" height="150.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -784,4 +764,4 @@ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="2196618569" maskUnits="userSpaceOnUse" x="-2" y="0" width="543" height="150">
 <rect x="-2" y="0" width="543" height="150" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
index 21323b370..244fdc03c 100644
--- a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="563" height="152" viewBox="10 10 563 152"><rect x="10.000000" y="10.000000" width="563.000000" height="152.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 563 152"><svg id="d2-svg" width="563" height="152" viewBox="10 10 563 152"><rect x="10.000000" y="10.000000" width="563.000000" height="152.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -784,4 +764,4 @@ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="2492575587" maskUnits="userSpaceOnUse" x="10" y="10" width="563" height="152">
 <rect x="10" y="10" width="563" height="152" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
index aa81ba3f1..38da7fcf0 100644
--- a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="543" height="150" viewBox="-2 0 543 150"><rect x="-2.000000" y="0.000000" width="543.000000" height="150.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 543 150"><svg id="d2-svg" width="543" height="150" viewBox="-2 0 543 150"><rect x="-2.000000" y="0.000000" width="543.000000" height="150.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -784,4 +764,4 @@ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="2320207089" maskUnits="userSpaceOnUse" x="-2" y="0" width="543" height="150">
 <rect x="-2" y="0" width="543" height="150" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
index 71fdfc631..04c956aae 100644
--- a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="563" height="152" viewBox="10 10 563 152"><rect x="10.000000" y="10.000000" width="563.000000" height="152.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 563 152"><svg id="d2-svg" width="563" height="152" viewBox="10 10 563 152"><rect x="10.000000" y="10.000000" width="563.000000" height="152.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -784,4 +764,4 @@ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="116836707" maskUnits="userSpaceOnUse" x="10" y="10" width="563" height="152">
 <rect x="10" y="10" width="563" height="152" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
index 4e11605ec..a7553cf6c 100644
--- a/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="447" viewBox="-2 -2 200 447"><rect x="-2.000000" y="-2.000000" width="200.000000" height="447.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 447"><svg id="d2-svg" width="200" height="447" viewBox="-2 -2 200 447"><rect x="-2.000000" y="-2.000000" width="200.000000" height="447.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -801,4 +781,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="72.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="98.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="72.000000" y="377.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="98.500000" y="415.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 98.000000 68.000000 C 98.000000 106.000000 98.000000 126.000000 98.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2232698946)" /></g><g id="(md -&gt; b)[0]"><path d="M 98.000000 279.000000 C 98.000000 317.000000 98.000000 337.000000 98.000000 373.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2232698946)" /></g><mask id="2232698946" maskUnits="userSpaceOnUse" x="-2" y="-2" width="200" height="447">
 <rect x="-2" y="-2" width="200" height="447" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
index ea7dd0c77..f98d5c257 100644
--- a/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="387" viewBox="10 10 200 387"><rect x="10.000000" y="10.000000" width="200.000000" height="387.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 387"><svg id="d2-svg" width="200" height="387" viewBox="10 10 200 387"><rect x="10.000000" y="10.000000" width="200.000000" height="387.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -801,4 +781,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="83.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="109.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="83.000000" y="329.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="109.500000" y="367.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 110.000000 80.000000 L 110.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1277415131)" /></g><g id="(md -&gt; b)[0]"><path d="M 110.000000 261.000000 L 110.000000 325.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1277415131)" /></g><mask id="1277415131" maskUnits="userSpaceOnUse" x="10" y="10" width="200" height="387">
 <rect x="10" y="10" width="200" height="387" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
index e043b3fd7..a7124677a 100644
--- a/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="216" height="487" viewBox="-2 -2 216 487"><rect x="-2.000000" y="-2.000000" width="216.000000" height="487.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 216 487"><svg id="d2-svg" width="216" height="487" viewBox="-2 -2 216 487"><rect x="-2.000000" y="-2.000000" width="216.000000" height="487.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -802,4 +782,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="80.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="106.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="80.000000" y="417.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="106.500000" y="455.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 106.000000 68.000000 C 106.000000 106.000000 106.000000 126.000000 106.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1440231656)" /></g><g id="(md -&gt; b)[0]"><path d="M 106.000000 319.000000 C 106.000000 357.000000 106.000000 377.000000 106.000000 413.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1440231656)" /></g><mask id="1440231656" maskUnits="userSpaceOnUse" x="-2" y="-2" width="216" height="487">
 <rect x="-2" y="-2" width="216" height="487" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
index a5ae4a105..d5376cada 100644
--- a/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="216" height="427" viewBox="10 10 216 427"><rect x="10.000000" y="10.000000" width="216.000000" height="427.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 216 427"><svg id="d2-svg" width="216" height="427" viewBox="10 10 216 427"><rect x="10.000000" y="10.000000" width="216.000000" height="427.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -802,4 +782,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="91.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="117.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="91.000000" y="369.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="117.500000" y="407.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 118.000000 80.000000 L 118.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#357910408)" /></g><g id="(md -&gt; b)[0]"><path d="M 118.000000 301.000000 L 118.000000 365.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#357910408)" /></g><mask id="357910408" maskUnits="userSpaceOnUse" x="10" y="10" width="216" height="427">
 <rect x="10" y="10" width="216" height="427" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
index dc34016c5..c0a1b63a7 100644
--- a/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="360" viewBox="-2 -2 57 360"><rect x="-2.000000" y="-2.000000" width="57.000000" height="360.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 360"><svg id="d2-svg" width="57" height="360" viewBox="-2 -2 57 360"><rect x="-2.000000" y="-2.000000" width="57.000000" height="360.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -797,4 +777,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="290.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="328.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1598480872)" /></g><g id="(md -&gt; b)[0]"><path d="M 26.500000 192.000000 C 26.500000 230.000000 26.500000 250.000000 26.500000 286.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1598480872)" /></g><mask id="1598480872" maskUnits="userSpaceOnUse" x="-2" y="-2" width="57" height="360">
 <rect x="-2" y="-2" width="57" height="360" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
index e0b3f182e..fc29f607c 100644
--- a/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="57" height="300" viewBox="10 10 57 300"><rect x="10.000000" y="10.000000" width="57.000000" height="300.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 57 300"><svg id="d2-svg" width="57" height="300" viewBox="10 10 57 300"><rect x="10.000000" y="10.000000" width="57.000000" height="300.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -797,4 +777,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="242.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="280.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3328985456)" /></g><g id="(md -&gt; b)[0]"><path d="M 38.500000 174.000000 L 38.500000 238.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3328985456)" /></g><mask id="3328985456" maskUnits="userSpaceOnUse" x="10" y="10" width="57" height="300">
 <rect x="10" y="10" width="57" height="300" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg b/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
index f85409e91..6c538f432 100644
--- a/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="102" viewBox="-2 -2 146 102"><rect x="-2.000000" y="-2.000000" width="146.000000" height="102.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 146 102"><svg id="d2-svg" width="146" height="102" viewBox="-2 -2 146 102"><rect x="-2.000000" y="-2.000000" width="146.000000" height="102.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hey"><g class="shape" ><rect x="0.000000" y="0.000000" width="142.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="71.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="71.000000" dy="0.000000">this</tspan><tspan x="71.000000" dy="17.666667">goes</tspan><tspan x="71.000000" dy="17.666667">multiple lines</tspan></text></g><mask id="2684979736" maskUnits="userSpaceOnUse" x="-2" y="-2" width="146" height="102">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="hey"><g class="shape" ><rect x="0.000000" y="0.000000" width="142.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="71.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="71.000000" dy="0.000000">this</tspan><tspan x="71.000000" dy="17.666667">goes</tspan><tspan x="71.000000" dy="17.666667">multiple lines</tspan></text></g><mask id="2684979736" maskUnits="userSpaceOnUse" x="-2" y="-2" width="146" height="102">
 <rect x="-2" y="-2" width="146" height="102" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg b/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
index d16ac5d47..185b34baa 100644
--- a/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="102" viewBox="10 10 146 102"><rect x="10.000000" y="10.000000" width="146.000000" height="102.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 146 102"><svg id="d2-svg" width="146" height="102" viewBox="10 10 146 102"><rect x="10.000000" y="10.000000" width="146.000000" height="102.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="hey"><g class="shape" ><rect x="12.000000" y="12.000000" width="142.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="83.000000" dy="0.000000">this</tspan><tspan x="83.000000" dy="17.666667">goes</tspan><tspan x="83.000000" dy="17.666667">multiple lines</tspan></text></g><mask id="2296643624" maskUnits="userSpaceOnUse" x="10" y="10" width="146" height="102">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="hey"><g class="shape" ><rect x="12.000000" y="12.000000" width="142.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="83.000000" dy="0.000000">this</tspan><tspan x="83.000000" dy="17.666667">goes</tspan><tspan x="83.000000" dy="17.666667">multiple lines</tspan></text></g><mask id="2296643624" maskUnits="userSpaceOnUse" x="10" y="10" width="146" height="102">
 <rect x="10" y="10" width="146" height="102" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg b/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
index bfcc3362e..c18c42d5f 100644
--- a/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1114" height="900" viewBox="-2 -2 1114 900"><rect x="-2.000000" y="-2.000000" width="1114.000000" height="900.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1114 900"><svg id="d2-svg" width="1114" height="900" viewBox="-2 -2 1114 900"><rect x="-2.000000" y="-2.000000" width="1114.000000" height="900.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="515.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="541.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="53.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="79.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="174.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="200.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="402.000000" y="498.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="429.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="629.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="655.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="853.000000" y="498.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="515.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="542.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="995.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1021.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="0.000000" y="332.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="24.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="109.000000" y="332.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="134.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="460.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="486.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="573.000000" y="0.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="597.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="115.000000" y="664.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="232.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="258.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="345.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="372.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="459.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="485.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="572.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="599.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="686.000000" y="664.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="711.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="459.000000" y="830.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="485.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="797.000000" y="664.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="822.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="908.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="935.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="v"><g class="shape" ><rect x="938.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="965.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="w"><g class="shape" ><rect x="1052.000000" y="332.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1081.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 513.023491 369.403447 C 106.800000 432.219562 14.350000 458.695302 50.078106 498.499770" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; c)[0]"><path d="M 513.056815 371.928201 C 263.600000 432.690976 200.750000 458.000000 200.750000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; d)[0]"><path d="M 513.388097 385.648566 C 445.800000 435.292920 428.500000 458.000000 428.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; e)[0]"><path d="M 569.614391 385.559423 C 637.600000 435.275771 655.000000 458.000000 655.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; f)[0]"><path d="M 569.941968 372.004995 C 816.400000 432.705341 878.500000 458.000000 878.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(g -&gt; a)[0]"><path d="M 541.500000 234.000000 C 541.500000 272.000000 541.500000 292.000000 541.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; h)[0]"><path d="M 569.958886 370.861259 C 869.200000 432.491563 954.700000 458.800000 992.753506 499.091947" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(i -&gt; b)[0]"><path d="M 24.605422 399.999991 C 24.719880 438.000000 31.350000 458.000000 55.546631 494.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(j -&gt; b)[0]"><path d="M 134.105422 399.999991 C 134.219880 438.000000 127.650000 458.000000 103.453369 494.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(k -&gt; g)[0]"><path d="M 486.000000 68.000000 C 486.000000 106.000000 492.600000 126.000000 516.796631 162.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(l -&gt; g)[0]"><path d="M 597.000000 68.000000 C 597.000000 106.000000 590.400000 126.000000 566.203369 162.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(c -&gt; m)[0]"><path d="M 176.749619 565.644028 C 150.177711 604.000000 143.250000 624.000000 143.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(c -&gt; n)[0]"><path d="M 224.750381 565.644028 C 251.322289 604.000000 258.250000 624.000000 258.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(d -&gt; o)[0]"><path d="M 404.807914 565.650980 C 378.587349 604.000000 371.750000 624.000000 371.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(d -&gt; p)[0]"><path d="M 452.192086 565.650980 C 478.412651 604.000000 485.250000 624.000000 485.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(e -&gt; q)[0]"><path d="M 631.513515 565.655613 C 605.527108 604.000000 598.750000 624.000000 598.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(e -&gt; r)[0]"><path d="M 678.486485 565.655613 C 704.472892 604.000000 711.250000 624.000000 711.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(p -&gt; s)[0]"><path d="M 485.250000 732.000000 C 485.250000 770.000000 485.250000 790.000000 485.250000 826.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(f -&gt; t)[0]"><path d="M 855.013515 565.655613 C 829.027108 604.000000 822.250000 624.000000 822.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(f -&gt; u)[0]"><path d="M 901.986485 565.655613 C 927.972892 604.000000 934.750000 624.000000 934.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(v -&gt; h)[0]"><path d="M 964.500000 400.000000 C 964.500000 438.000000 971.300000 458.000000 996.250760 494.692294" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(w -&gt; h)[0]"><path d="M 1080.500000 400.000000 C 1080.500000 438.000000 1073.500000 458.000000 1047.793849 494.723072" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><mask id="2491635802" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1114" height="900">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="515.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="541.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="53.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="79.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="174.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="200.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="402.000000" y="498.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="429.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="629.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="655.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="853.000000" y="498.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="515.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="542.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="995.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1021.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="0.000000" y="332.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="24.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="109.000000" y="332.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="134.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="460.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="486.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="573.000000" y="0.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="597.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="115.000000" y="664.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="143.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="232.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="258.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="345.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="372.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="459.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="485.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="572.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="599.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="686.000000" y="664.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="711.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="459.000000" y="830.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="485.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="797.000000" y="664.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="822.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="908.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="935.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="v"><g class="shape" ><rect x="938.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="965.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="w"><g class="shape" ><rect x="1052.000000" y="332.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1081.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 513.023491 369.403447 C 106.800000 432.219562 14.350000 458.695302 50.078106 498.499770" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; c)[0]"><path d="M 513.056815 371.928201 C 263.600000 432.690976 200.750000 458.000000 200.750000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; d)[0]"><path d="M 513.388097 385.648566 C 445.800000 435.292920 428.500000 458.000000 428.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; e)[0]"><path d="M 569.614391 385.559423 C 637.600000 435.275771 655.000000 458.000000 655.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; f)[0]"><path d="M 569.941968 372.004995 C 816.400000 432.705341 878.500000 458.000000 878.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(g -&gt; a)[0]"><path d="M 541.500000 234.000000 C 541.500000 272.000000 541.500000 292.000000 541.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(a -&gt; h)[0]"><path d="M 569.958886 370.861259 C 869.200000 432.491563 954.700000 458.800000 992.753506 499.091947" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(i -&gt; b)[0]"><path d="M 24.605422 399.999991 C 24.719880 438.000000 31.350000 458.000000 55.546631 494.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(j -&gt; b)[0]"><path d="M 134.105422 399.999991 C 134.219880 438.000000 127.650000 458.000000 103.453369 494.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(k -&gt; g)[0]"><path d="M 486.000000 68.000000 C 486.000000 106.000000 492.600000 126.000000 516.796631 162.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(l -&gt; g)[0]"><path d="M 597.000000 68.000000 C 597.000000 106.000000 590.400000 126.000000 566.203369 162.661562" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(c -&gt; m)[0]"><path d="M 176.749619 565.644028 C 150.177711 604.000000 143.250000 624.000000 143.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(c -&gt; n)[0]"><path d="M 224.750381 565.644028 C 251.322289 604.000000 258.250000 624.000000 258.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(d -&gt; o)[0]"><path d="M 404.807914 565.650980 C 378.587349 604.000000 371.750000 624.000000 371.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(d -&gt; p)[0]"><path d="M 452.192086 565.650980 C 478.412651 604.000000 485.250000 624.000000 485.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(e -&gt; q)[0]"><path d="M 631.513515 565.655613 C 605.527108 604.000000 598.750000 624.000000 598.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(e -&gt; r)[0]"><path d="M 678.486485 565.655613 C 704.472892 604.000000 711.250000 624.000000 711.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(p -&gt; s)[0]"><path d="M 485.250000 732.000000 C 485.250000 770.000000 485.250000 790.000000 485.250000 826.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(f -&gt; t)[0]"><path d="M 855.013515 565.655613 C 829.027108 604.000000 822.250000 624.000000 822.250000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(f -&gt; u)[0]"><path d="M 901.986485 565.655613 C 927.972892 604.000000 934.750000 624.000000 934.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(v -&gt; h)[0]"><path d="M 964.500000 400.000000 C 964.500000 438.000000 971.300000 458.000000 996.250760 494.692294" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><g id="(w -&gt; h)[0]"><path d="M 1080.500000 400.000000 C 1080.500000 438.000000 1073.500000 458.000000 1047.793849 494.723072" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491635802)" /></g><mask id="2491635802" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1114" height="900">
 <rect x="-2" y="-2" width="1114" height="900" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg b/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
index 83d99c07b..f0c543048 100644
--- a/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="722" height="880" viewBox="10 10 722 880"><rect x="10.000000" y="10.000000" width="722.000000" height="880.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 722 880"><svg id="d2-svg" width="722" height="880" viewBox="10 10 722 880"><rect x="10.000000" y="10.000000" width="722.000000" height="880.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="442.000000" y="294.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="468.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="80.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="106.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="152.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="178.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="299.000000" y="540.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="326.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="445.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="471.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="590.000000" y="540.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="615.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="441.000000" y="158.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="468.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="661.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="687.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="82.000000" y="294.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="106.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="12.000000" y="294.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="37.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="451.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="477.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="382.000000" y="12.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="406.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="84.000000" y="686.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="161.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="187.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="234.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="261.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="308.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="334.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="381.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="408.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="455.000000" y="686.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="309.000000" y="822.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="335.000000" y="860.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="526.000000" y="686.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="551.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="597.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="624.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="v"><g class="shape" ><rect x="598.000000" y="294.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="625.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="w"><g class="shape" ><rect x="672.000000" y="294.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="701.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 449.785714 362.000000 L 449.785714 390.000000 S 449.785714 400.000000 439.785714 400.000000 L 129.750000 400.000000 S 119.750000 400.000000 119.750000 410.000000 L 119.750000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; c)[0]"><path d="M 457.357143 362.000000 L 457.357143 440.000000 S 457.357143 450.000000 447.357143 450.000000 L 189.500000 450.000000 S 179.500000 450.000000 179.500000 460.000000 L 179.500000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; d)[0]"><path d="M 464.928571 362.000000 L 464.928571 490.000000 S 464.928571 500.000000 454.928571 500.000000 L 336.333333 500.000000 S 326.333333 500.000000 326.333333 510.000000 L 326.333333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; e)[0]"><path d="M 472.500000 362.000000 L 472.500000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; f)[0]"><path d="M 480.071429 362.000000 L 480.071429 490.000000 S 480.071429 500.000000 490.071429 500.000000 L 606.333333 500.000000 S 616.333333 500.000000 616.333333 510.000000 L 616.333333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(g -&gt; a)[0]"><path d="M 468.714286 226.000000 L 468.714286 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; h)[0]"><path d="M 487.642857 362.000000 L 487.642857 440.000000 S 487.642857 450.000000 497.642857 450.000000 L 665.083333 450.000000 S 675.083333 450.000000 675.083333 460.000000 L 675.083333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(i -&gt; b)[0]"><path d="M 106.500000 362.000000 L 106.500000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(j -&gt; b)[0]"><path d="M 37.000000 362.000000 L 37.000000 390.000000 S 37.000000 400.000000 47.000000 400.000000 L 83.250000 400.000000 S 93.250000 400.000000 93.250000 410.000000 L 93.250000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(k -&gt; g)[0]"><path d="M 477.714286 80.000000 L 477.714286 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(l -&gt; g)[0]"><path d="M 406.714286 80.000000 L 406.714286 108.000000 S 406.714286 118.000000 416.714286 118.000000 L 449.714286 118.000000 S 459.714286 118.000000 459.714286 128.000000 L 459.714286 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(c -&gt; m)[0]"><path d="M 170.666667 608.000000 L 170.666667 636.000000 S 170.666667 646.000000 160.666667 646.000000 L 123.333333 646.000000 S 113.333333 646.000000 113.333333 656.000000 L 113.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(c -&gt; n)[0]"><path d="M 188.333333 608.000000 L 188.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(d -&gt; o)[0]"><path d="M 317.333333 608.000000 L 317.333333 636.000000 S 317.333333 646.000000 307.333333 646.000000 L 271.833333 646.000000 S 261.833333 646.000000 261.833333 656.000000 L 261.833333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(d -&gt; p)[0]"><path d="M 335.333333 608.000000 L 335.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(e -&gt; q)[0]"><path d="M 463.666667 608.000000 L 463.666667 636.000000 S 463.666667 646.000000 453.666667 646.000000 L 418.833333 646.000000 S 408.833333 646.000000 408.833333 656.000000 L 408.833333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(e -&gt; r)[0]"><path d="M 481.333333 608.000000 L 481.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(p -&gt; s)[0]"><path d="M 335.333333 754.000000 L 335.333333 818.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(f -&gt; t)[0]"><path d="M 607.833333 608.000000 L 607.833333 636.000000 S 607.833333 646.000000 597.833333 646.000000 L 562.333333 646.000000 S 552.333333 646.000000 552.333333 656.000000 L 552.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(f -&gt; u)[0]"><path d="M 624.833333 608.000000 L 624.833333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(v -&gt; h)[0]"><path d="M 625.583333 362.000000 L 625.583333 390.000000 S 625.583333 400.000000 635.583333 400.000000 L 678.333333 400.000000 S 688.333333 400.000000 688.333333 410.000000 L 688.333333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(w -&gt; h)[0]"><path d="M 701.583333 362.000000 L 701.583333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><mask id="3874645238" maskUnits="userSpaceOnUse" x="10" y="10" width="722" height="880">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="442.000000" y="294.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="468.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="80.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="106.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="152.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="178.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="299.000000" y="540.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="326.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="445.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="471.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="590.000000" y="540.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="615.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="441.000000" y="158.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="468.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="661.000000" y="540.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="687.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="82.000000" y="294.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="106.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="12.000000" y="294.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="37.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="451.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="477.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="382.000000" y="12.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="406.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="84.000000" y="686.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="161.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="187.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="234.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="261.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="308.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="334.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="381.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="408.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="455.000000" y="686.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="309.000000" y="822.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="335.000000" y="860.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="526.000000" y="686.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="551.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="597.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="624.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="v"><g class="shape" ><rect x="598.000000" y="294.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="625.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">v</text></g><g id="w"><g class="shape" ><rect x="672.000000" y="294.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="701.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 449.785714 362.000000 L 449.785714 390.000000 S 449.785714 400.000000 439.785714 400.000000 L 129.750000 400.000000 S 119.750000 400.000000 119.750000 410.000000 L 119.750000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; c)[0]"><path d="M 457.357143 362.000000 L 457.357143 440.000000 S 457.357143 450.000000 447.357143 450.000000 L 189.500000 450.000000 S 179.500000 450.000000 179.500000 460.000000 L 179.500000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; d)[0]"><path d="M 464.928571 362.000000 L 464.928571 490.000000 S 464.928571 500.000000 454.928571 500.000000 L 336.333333 500.000000 S 326.333333 500.000000 326.333333 510.000000 L 326.333333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; e)[0]"><path d="M 472.500000 362.000000 L 472.500000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; f)[0]"><path d="M 480.071429 362.000000 L 480.071429 490.000000 S 480.071429 500.000000 490.071429 500.000000 L 606.333333 500.000000 S 616.333333 500.000000 616.333333 510.000000 L 616.333333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(g -&gt; a)[0]"><path d="M 468.714286 226.000000 L 468.714286 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(a -&gt; h)[0]"><path d="M 487.642857 362.000000 L 487.642857 440.000000 S 487.642857 450.000000 497.642857 450.000000 L 665.083333 450.000000 S 675.083333 450.000000 675.083333 460.000000 L 675.083333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(i -&gt; b)[0]"><path d="M 106.500000 362.000000 L 106.500000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(j -&gt; b)[0]"><path d="M 37.000000 362.000000 L 37.000000 390.000000 S 37.000000 400.000000 47.000000 400.000000 L 83.250000 400.000000 S 93.250000 400.000000 93.250000 410.000000 L 93.250000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(k -&gt; g)[0]"><path d="M 477.714286 80.000000 L 477.714286 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(l -&gt; g)[0]"><path d="M 406.714286 80.000000 L 406.714286 108.000000 S 406.714286 118.000000 416.714286 118.000000 L 449.714286 118.000000 S 459.714286 118.000000 459.714286 128.000000 L 459.714286 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(c -&gt; m)[0]"><path d="M 170.666667 608.000000 L 170.666667 636.000000 S 170.666667 646.000000 160.666667 646.000000 L 123.333333 646.000000 S 113.333333 646.000000 113.333333 656.000000 L 113.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(c -&gt; n)[0]"><path d="M 188.333333 608.000000 L 188.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(d -&gt; o)[0]"><path d="M 317.333333 608.000000 L 317.333333 636.000000 S 317.333333 646.000000 307.333333 646.000000 L 271.833333 646.000000 S 261.833333 646.000000 261.833333 656.000000 L 261.833333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(d -&gt; p)[0]"><path d="M 335.333333 608.000000 L 335.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(e -&gt; q)[0]"><path d="M 463.666667 608.000000 L 463.666667 636.000000 S 463.666667 646.000000 453.666667 646.000000 L 418.833333 646.000000 S 408.833333 646.000000 408.833333 656.000000 L 408.833333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(e -&gt; r)[0]"><path d="M 481.333333 608.000000 L 481.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(p -&gt; s)[0]"><path d="M 335.333333 754.000000 L 335.333333 818.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(f -&gt; t)[0]"><path d="M 607.833333 608.000000 L 607.833333 636.000000 S 607.833333 646.000000 597.833333 646.000000 L 562.333333 646.000000 S 552.333333 646.000000 552.333333 656.000000 L 552.333333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(f -&gt; u)[0]"><path d="M 624.833333 608.000000 L 624.833333 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(v -&gt; h)[0]"><path d="M 625.583333 362.000000 L 625.583333 390.000000 S 625.583333 400.000000 635.583333 400.000000 L 678.333333 400.000000 S 688.333333 400.000000 688.333333 410.000000 L 688.333333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><g id="(w -&gt; h)[0]"><path d="M 701.583333 362.000000 L 701.583333 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3874645238)" /></g><mask id="3874645238" maskUnits="userSpaceOnUse" x="10" y="10" width="722" height="880">
 <rect x="10" y="10" width="722" height="880" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg b/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
index 1c44b10e9..4be702e09 100644
--- a/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="696" height="1232" viewBox="-38 -2 696 1232"><rect x="-38.000000" y="-2.000000" width="696.000000" height="1232.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 696 1232"><svg id="d2-svg" width="696" height="1232" viewBox="-38 -2 696 1232"><rect x="-38.000000" y="-2.000000" width="696.000000" height="1232.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="233.000000" y="830.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="189.000000" y="1162.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="215.500000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="253.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="279.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="135.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="42.000000" y="830.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="68.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="0.000000" y="996.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="25.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="132.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="159.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="22.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="48.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="24.000000" y="332.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="48.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="24.000000" y="498.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="22.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="48.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="607.000000" y="830.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="631.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="561.000000" y="1162.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="589.500000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="552.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="578.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="473.000000" y="830.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="500.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="430.000000" y="996.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="456.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="507.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="534.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="378.000000" y="166.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="377.000000" y="332.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="378.000000" y="498.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="319.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="346.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 259.250000 898.000000 C 259.250000 936.000000 259.250000 962.600000 259.250000 987.500000 C 259.250000 1012.400000 254.050000 1122.000000 235.095411 1158.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(c -&gt; a)[0]"><path d="M 279.000000 400.000000 C 279.000000 438.000000 279.000000 464.600000 279.000000 489.500000 C 279.000000 514.400000 279.000000 547.600000 279.000000 572.500000 C 279.000000 597.400000 279.000000 630.600000 279.000000 655.500000 C 279.000000 680.400000 276.600000 790.000000 267.933492 826.110451" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(d -&gt; a)[0]"><path d="M 190.767959 721.465019 C 245.050000 768.032558 259.000000 790.000000 259.000000 826.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(d -&gt; b)[0]"><path d="M 162.250000 732.000000 C 162.250000 770.000000 162.250000 796.600000 162.250000 821.500000 C 162.250000 846.400000 162.250000 879.600000 162.250000 904.500000 C 162.250000 929.400000 162.250000 962.600000 162.250000 987.500000 C 162.250000 1012.400000 168.650000 1122.000000 192.093785 1158.630914" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(d -&gt; e)[0]"><path d="M 138.557914 731.650980 C 112.337349 770.000000 101.100000 790.000000 85.110954 826.338740" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(e -&gt; f)[0]"><path d="M 68.750000 898.000000 C 68.750000 936.000000 63.550000 956.000000 44.595411 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(f -&gt; b)[0]"><path d="M 25.500000 1064.000000 C 25.500000 1102.000000 58.300000 1126.200000 185.829233 1181.410827" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(c -&gt; f)[0]"><path d="M 250.573920 372.950681 C 36.300000 432.882393 -17.750000 464.600000 -17.750000 489.500000 C -17.750000 514.400000 -17.750000 547.600000 -17.750000 572.500000 C -17.750000 597.400000 -17.750000 630.600000 -17.750000 655.500000 C -17.750000 680.400000 -17.750000 713.600000 -17.750000 738.500000 C -17.750000 763.400000 -17.750000 796.600000 -17.750000 821.500000 C -17.750000 846.400000 -12.550000 956.000000 6.404589 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(g -&gt; c)[0]"><path d="M 187.644878 52.812707 C 260.400000 103.135000 279.000000 132.600000 279.000000 157.500000 C 279.000000 182.400000 279.000000 292.000000 279.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(g -&gt; h)[0]"><path d="M 130.402177 54.529427 C 65.400000 103.465306 48.750000 126.000000 48.750000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(h -&gt; i)[0]"><path d="M 48.750000 234.000000 C 48.750000 272.000000 48.750000 292.000000 48.750000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(i -&gt; j)[0]"><path d="M 48.750000 400.000000 C 48.750000 438.000000 48.750000 458.000000 48.750000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(j -&gt; k)[0]"><path d="M 48.750000 566.000000 C 48.750000 604.000000 48.750000 624.000000 48.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(k -&gt; e)[0]"><path d="M 48.750000 732.000000 C 48.750000 770.000000 51.150000 790.000000 59.816508 826.110451" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(j -&gt; f)[0]"><path d="M 22.306892 556.373156 C -25.450000 602.197688 -37.750000 630.600000 -37.750000 655.500000 C -37.750000 680.400000 -37.750000 713.600000 -37.750000 738.500000 C -37.750000 763.400000 -37.750000 796.600000 -37.750000 821.500000 C -37.750000 846.400000 -30.150000 956.000000 -2.170333 992.815351" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(l -&gt; m)[0]"><path d="M 631.500000 898.000000 C 631.500000 936.000000 631.500000 962.600000 631.500000 987.500000 C 631.500000 1012.400000 626.500000 1122.000000 608.288854 1158.422291" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; l)[0]"><path d="M 604.757386 731.593064 C 633.909639 770.000000 640.300000 790.000000 635.976581 826.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; l)[1]"><path d="M 591.420716 731.875429 C 605.545181 770.000000 611.850000 790.000000 621.243465 826.128710" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; m)[0]"><path d="M 573.653225 731.981075 C 568.385542 770.000000 567.000000 796.600000 567.000000 821.500000 C 567.000000 846.400000 567.000000 879.600000 567.000000 904.500000 C 567.000000 929.400000 567.000000 962.600000 567.000000 987.500000 C 567.000000 1012.400000 569.800000 1122.000000 579.921480 1158.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; o)[0]"><path d="M 555.527769 731.667184 C 530.126506 770.000000 520.700000 790.000000 510.578520 826.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(o -&gt; p)[0]"><path d="M 500.000000 898.000000 C 500.000000 936.000000 494.800000 956.000000 475.845411 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(p -&gt; m)[0]"><path d="M 456.750000 1064.000000 C 456.750000 1102.000000 477.550000 1125.000000 557.358007 1174.880004" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; p)[0]"><path d="M 550.262779 713.107830 C 456.800000 766.423368 433.000000 796.600000 433.000000 821.500000 C 433.000000 846.400000 435.800000 956.000000 445.921480 992.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(q -&gt; n)[0]"><path d="M 552.637803 67.762644 C 573.138554 106.000000 578.500000 132.600000 578.500000 157.500000 C 578.500000 182.400000 578.500000 215.600000 578.500000 240.500000 C 578.500000 265.400000 578.500000 298.600000 578.500000 323.500000 C 578.500000 348.400000 578.500000 381.600000 578.500000 406.500000 C 578.500000 431.400000 578.500000 464.600000 578.500000 489.500000 C 578.500000 514.400000 578.500000 624.000000 578.500000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(q -&gt; r)[0]"><path d="M 505.311482 51.211450 C 424.000000 102.827916 403.250000 126.000000 403.250000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(r -&gt; s)[0]"><path d="M 403.250000 234.000000 C 403.250000 272.000000 403.250000 292.000000 403.250000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(s -&gt; t)[0]"><path d="M 425.707613 399.678733 C 450.524096 438.000000 450.600000 458.000000 427.156215 494.630914" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(t -&gt; u)[0]"><path d="M 379.352370 565.646346 C 352.897590 604.000000 346.000000 624.000000 346.000000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(u -&gt; o)[0]"><path d="M 374.687589 715.245746 C 455.800000 766.834483 479.300000 790.000000 489.421480 826.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(t -&gt; p)[0]"><path d="M 407.359841 565.986342 C 411.825301 604.000000 413.000000 630.600000 413.000000 655.500000 C 413.000000 680.400000 413.000000 713.600000 413.000000 738.500000 C 413.000000 763.400000 413.000000 796.600000 413.000000 821.500000 C 413.000000 846.400000 418.200000 956.000000 437.154589 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(c -&gt; t)[0]"><path d="M 297.223593 399.771454 C 317.259036 438.000000 333.550000 459.357895 374.960700 501.922453" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(s -&gt; a)[0]"><path d="M 375.464966 379.040535 C 266.650000 434.027702 239.000000 464.600000 239.000000 489.500000 C 239.000000 514.400000 239.000000 547.600000 239.000000 572.500000 C 239.000000 597.400000 239.000000 630.600000 239.000000 655.500000 C 239.000000 680.400000 241.400000 790.000000 250.066508 826.110451" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(u -&gt; a)[0]"><path d="M 317.278025 713.967430 C 228.200000 766.590036 211.900000 790.000000 235.343785 826.630914" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><mask id="1619365336" maskUnits="userSpaceOnUse" x="-38" y="-2" width="696" height="1232">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="233.000000" y="830.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="189.000000" y="1162.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="215.500000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="253.000000" y="332.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="279.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="135.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="42.000000" y="830.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="68.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="0.000000" y="996.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="25.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="132.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="159.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="22.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="48.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="24.000000" y="332.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="48.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="24.000000" y="498.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="49.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="22.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="48.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="607.000000" y="830.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="631.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="561.000000" y="1162.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="589.500000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="552.000000" y="664.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="578.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="473.000000" y="830.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="500.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="430.000000" y="996.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="456.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="507.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="534.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="378.000000" y="166.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="377.000000" y="332.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="378.000000" y="498.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="403.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="319.000000" y="664.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="346.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 259.250000 898.000000 C 259.250000 936.000000 259.250000 962.600000 259.250000 987.500000 C 259.250000 1012.400000 254.050000 1122.000000 235.095411 1158.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(c -&gt; a)[0]"><path d="M 279.000000 400.000000 C 279.000000 438.000000 279.000000 464.600000 279.000000 489.500000 C 279.000000 514.400000 279.000000 547.600000 279.000000 572.500000 C 279.000000 597.400000 279.000000 630.600000 279.000000 655.500000 C 279.000000 680.400000 276.600000 790.000000 267.933492 826.110451" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(d -&gt; a)[0]"><path d="M 190.767959 721.465019 C 245.050000 768.032558 259.000000 790.000000 259.000000 826.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(d -&gt; b)[0]"><path d="M 162.250000 732.000000 C 162.250000 770.000000 162.250000 796.600000 162.250000 821.500000 C 162.250000 846.400000 162.250000 879.600000 162.250000 904.500000 C 162.250000 929.400000 162.250000 962.600000 162.250000 987.500000 C 162.250000 1012.400000 168.650000 1122.000000 192.093785 1158.630914" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(d -&gt; e)[0]"><path d="M 138.557914 731.650980 C 112.337349 770.000000 101.100000 790.000000 85.110954 826.338740" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(e -&gt; f)[0]"><path d="M 68.750000 898.000000 C 68.750000 936.000000 63.550000 956.000000 44.595411 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(f -&gt; b)[0]"><path d="M 25.500000 1064.000000 C 25.500000 1102.000000 58.300000 1126.200000 185.829233 1181.410827" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(c -&gt; f)[0]"><path d="M 250.573920 372.950681 C 36.300000 432.882393 -17.750000 464.600000 -17.750000 489.500000 C -17.750000 514.400000 -17.750000 547.600000 -17.750000 572.500000 C -17.750000 597.400000 -17.750000 630.600000 -17.750000 655.500000 C -17.750000 680.400000 -17.750000 713.600000 -17.750000 738.500000 C -17.750000 763.400000 -17.750000 796.600000 -17.750000 821.500000 C -17.750000 846.400000 -12.550000 956.000000 6.404589 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(g -&gt; c)[0]"><path d="M 187.644878 52.812707 C 260.400000 103.135000 279.000000 132.600000 279.000000 157.500000 C 279.000000 182.400000 279.000000 292.000000 279.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(g -&gt; h)[0]"><path d="M 130.402177 54.529427 C 65.400000 103.465306 48.750000 126.000000 48.750000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(h -&gt; i)[0]"><path d="M 48.750000 234.000000 C 48.750000 272.000000 48.750000 292.000000 48.750000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(i -&gt; j)[0]"><path d="M 48.750000 400.000000 C 48.750000 438.000000 48.750000 458.000000 48.750000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(j -&gt; k)[0]"><path d="M 48.750000 566.000000 C 48.750000 604.000000 48.750000 624.000000 48.750000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(k -&gt; e)[0]"><path d="M 48.750000 732.000000 C 48.750000 770.000000 51.150000 790.000000 59.816508 826.110451" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(j -&gt; f)[0]"><path d="M 22.306892 556.373156 C -25.450000 602.197688 -37.750000 630.600000 -37.750000 655.500000 C -37.750000 680.400000 -37.750000 713.600000 -37.750000 738.500000 C -37.750000 763.400000 -37.750000 796.600000 -37.750000 821.500000 C -37.750000 846.400000 -30.150000 956.000000 -2.170333 992.815351" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(l -&gt; m)[0]"><path d="M 631.500000 898.000000 C 631.500000 936.000000 631.500000 962.600000 631.500000 987.500000 C 631.500000 1012.400000 626.500000 1122.000000 608.288854 1158.422291" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; l)[0]"><path d="M 604.757386 731.593064 C 633.909639 770.000000 640.300000 790.000000 635.976581 826.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; l)[1]"><path d="M 591.420716 731.875429 C 605.545181 770.000000 611.850000 790.000000 621.243465 826.128710" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; m)[0]"><path d="M 573.653225 731.981075 C 568.385542 770.000000 567.000000 796.600000 567.000000 821.500000 C 567.000000 846.400000 567.000000 879.600000 567.000000 904.500000 C 567.000000 929.400000 567.000000 962.600000 567.000000 987.500000 C 567.000000 1012.400000 569.800000 1122.000000 579.921480 1158.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; o)[0]"><path d="M 555.527769 731.667184 C 530.126506 770.000000 520.700000 790.000000 510.578520 826.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(o -&gt; p)[0]"><path d="M 500.000000 898.000000 C 500.000000 936.000000 494.800000 956.000000 475.845411 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(p -&gt; m)[0]"><path d="M 456.750000 1064.000000 C 456.750000 1102.000000 477.550000 1125.000000 557.358007 1174.880004" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(n -&gt; p)[0]"><path d="M 550.262779 713.107830 C 456.800000 766.423368 433.000000 796.600000 433.000000 821.500000 C 433.000000 846.400000 435.800000 956.000000 445.921480 992.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(q -&gt; n)[0]"><path d="M 552.637803 67.762644 C 573.138554 106.000000 578.500000 132.600000 578.500000 157.500000 C 578.500000 182.400000 578.500000 215.600000 578.500000 240.500000 C 578.500000 265.400000 578.500000 298.600000 578.500000 323.500000 C 578.500000 348.400000 578.500000 381.600000 578.500000 406.500000 C 578.500000 431.400000 578.500000 464.600000 578.500000 489.500000 C 578.500000 514.400000 578.500000 624.000000 578.500000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(q -&gt; r)[0]"><path d="M 505.311482 51.211450 C 424.000000 102.827916 403.250000 126.000000 403.250000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(r -&gt; s)[0]"><path d="M 403.250000 234.000000 C 403.250000 272.000000 403.250000 292.000000 403.250000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(s -&gt; t)[0]"><path d="M 425.707613 399.678733 C 450.524096 438.000000 450.600000 458.000000 427.156215 494.630914" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(t -&gt; u)[0]"><path d="M 379.352370 565.646346 C 352.897590 604.000000 346.000000 624.000000 346.000000 660.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(u -&gt; o)[0]"><path d="M 374.687589 715.245746 C 455.800000 766.834483 479.300000 790.000000 489.421480 826.148144" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(t -&gt; p)[0]"><path d="M 407.359841 565.986342 C 411.825301 604.000000 413.000000 630.600000 413.000000 655.500000 C 413.000000 680.400000 413.000000 713.600000 413.000000 738.500000 C 413.000000 763.400000 413.000000 796.600000 413.000000 821.500000 C 413.000000 846.400000 418.200000 956.000000 437.154589 992.451133" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(c -&gt; t)[0]"><path d="M 297.223593 399.771454 C 317.259036 438.000000 333.550000 459.357895 374.960700 501.922453" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(s -&gt; a)[0]"><path d="M 375.464966 379.040535 C 266.650000 434.027702 239.000000 464.600000 239.000000 489.500000 C 239.000000 514.400000 239.000000 547.600000 239.000000 572.500000 C 239.000000 597.400000 239.000000 630.600000 239.000000 655.500000 C 239.000000 680.400000 241.400000 790.000000 250.066508 826.110451" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><g id="(u -&gt; a)[0]"><path d="M 317.278025 713.967430 C 228.200000 766.590036 211.900000 790.000000 235.343785 826.630914" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1619365336)" /></g><mask id="1619365336" maskUnits="userSpaceOnUse" x="-38" y="-2" width="696" height="1232">
 <rect x="-38" y="-2" width="696" height="1232" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg b/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
index c0c5fbebf..b6fbbf86a 100644
--- a/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="445" height="1332" viewBox="10 10 445 1332"><rect x="10.000000" y="10.000000" width="445.000000" height="1332.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 445 1332"><svg id="d2-svg" width="445" height="1332" viewBox="10 10 445 1332"><rect x="10.000000" y="10.000000" width="445.000000" height="1332.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="210.000000" y="982.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="236.500000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="254.000000" y="1274.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="280.500000" y="1312.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="216.000000" y="294.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="242.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="254.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="281.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="319.000000" y="982.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.500000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="365.000000" y="1128.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="390.500000" y="1166.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="225.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="252.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="400.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="402.000000" y="294.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="402.000000" y="540.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="427.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="328.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="354.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="12.000000" y="982.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="36.500000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="42.000000" y="1274.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="70.500000" y="1312.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="19.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="45.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="93.000000" y="982.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="120.000000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="93.000000" y="1128.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="119.500000" y="1166.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="28.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="140.000000" y="158.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="165.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="139.000000" y="294.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="165.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="140.000000" y="540.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="165.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="168.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="195.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 237.300000 1050.000000 L 237.300000 1224.000000 S 237.300000 1234.000000 247.300000 1234.000000 L 257.750000 1234.000000 S 267.750000 1234.000000 267.750000 1244.000000 L 267.750000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(c -&gt; a)[0]"><path d="M 243.000000 362.000000 L 243.000000 791.800000 C 243.000000 792.200000 242.600000 791.800000 242.600000 792.200000 L 242.600000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(d -&gt; a)[0]"><path d="M 267.500000 754.000000 L 267.500000 834.850000 C 267.500000 849.150000 253.200000 834.850000 253.200000 849.150000 L 253.200000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(d -&gt; b)[0]"><path d="M 281.000000 754.000000 L 281.000000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(d -&gt; e)[0]"><path d="M 294.500000 754.000000 L 294.500000 782.000000 S 294.500000 792.000000 304.500000 792.000000 L 326.833333 792.000000 S 336.833333 792.000000 336.833333 802.000000 L 336.833333 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(e -&gt; f)[0]"><path d="M 345.666667 1050.000000 L 345.666667 1078.000000 S 345.666667 1088.000000 355.666667 1088.000000 L 368.250000 1088.000000 S 378.250000 1088.000000 378.250000 1098.000000 L 378.250000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(f -&gt; b)[0]"><path d="M 391.000000 1196.000000 L 391.000000 1224.000000 S 391.000000 1234.000000 381.000000 1234.000000 L 304.250000 1234.000000 S 294.250000 1234.000000 294.250000 1244.000000 L 294.250000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(c -&gt; f)[0]"><path d="M 256.250000 362.000000 L 256.250000 390.000000 S 256.250000 400.000000 266.250000 400.000000 L 381.000000 400.000000 S 391.000000 400.000000 391.000000 410.000000 L 391.000000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(g -&gt; c)[0]"><path d="M 243.000000 80.000000 L 243.000000 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(g -&gt; h)[0]"><path d="M 261.000000 80.000000 L 261.000000 108.000000 S 261.000000 118.000000 271.000000 118.000000 L 417.000000 118.000000 S 427.000000 118.000000 427.000000 128.000000 L 427.000000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(h -&gt; i)[0]"><path d="M 427.000000 226.000000 L 427.000000 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(i -&gt; j)[0]"><path d="M 427.000000 362.000000 L 427.000000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(j -&gt; k)[0]"><path d="M 418.666667 608.000000 L 418.666667 636.000000 S 418.666667 646.000000 408.666667 646.000000 L 364.500000 646.000000 S 354.500000 646.000000 354.500000 656.000000 L 354.500000 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(k -&gt; e)[0]"><path d="M 354.500000 754.000000 L 354.500000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(j -&gt; f)[0]"><path d="M 435.333333 608.000000 L 435.333333 1078.000000 S 435.333333 1088.000000 425.333333 1088.000000 L 413.750000 1088.000000 S 403.750000 1088.000000 403.750000 1098.000000 L 403.750000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(l -&gt; m)[0]"><path d="M 36.500000 1050.000000 L 36.500000 1224.000000 S 36.500000 1234.000000 46.500000 1234.000000 L 46.750000 1234.000000 S 56.750000 1234.000000 56.750000 1244.000000 L 56.750000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; l)[0]"><path d="M 28.333333 754.000000 L 28.333333 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; l)[1]"><path d="M 37.166667 754.000000 L 37.166667 938.250000 C 37.166667 945.750000 44.666667 938.250000 44.666667 945.750000 L 44.666667 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; m)[0]"><path d="M 46.000000 754.000000 L 46.000000 882.000000 S 46.000000 892.000000 56.000000 892.000000 L 61.000000 892.000000 S 71.000000 892.000000 71.000000 902.000000 L 71.000000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; o)[0]"><path d="M 63.666667 754.000000 L 63.666667 782.000000 S 63.666667 792.000000 73.666667 792.000000 L 101.000000 792.000000 S 111.000000 792.000000 111.000000 802.000000 L 111.000000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(o -&gt; p)[0]"><path d="M 120.000000 1050.000000 L 120.000000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(p -&gt; m)[0]"><path d="M 120.000000 1196.000000 L 120.000000 1224.000000 S 120.000000 1234.000000 110.000000 1234.000000 L 95.250000 1234.000000 S 85.250000 1234.000000 85.250000 1244.000000 L 85.250000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; p)[0]"><path d="M 54.833333 754.000000 L 54.833333 832.000000 S 54.833333 842.000000 64.833333 842.000000 L 72.000000 842.000000 S 82.000000 842.000000 82.000000 852.000000 L 82.000000 1078.000000 S 82.000000 1088.000000 92.000000 1088.000000 L 96.750000 1088.000000 S 106.750000 1088.000000 106.750000 1098.000000 L 106.750000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(q -&gt; n)[0]"><path d="M 46.000000 80.000000 L 46.000000 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(q -&gt; r)[0]"><path d="M 64.000000 80.000000 L 64.000000 108.000000 S 64.000000 118.000000 74.000000 118.000000 L 155.666667 118.000000 S 165.666667 118.000000 165.666667 128.000000 L 165.666667 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(r -&gt; s)[0]"><path d="M 165.666667 226.000000 L 165.666667 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(s -&gt; t)[0]"><path d="M 157.000000 362.000000 L 157.000000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(t -&gt; u)[0]"><path d="M 174.000000 608.000000 L 174.000000 636.000000 S 174.000000 646.000000 184.000000 646.000000 L 185.000000 646.000000 S 195.000000 646.000000 195.000000 656.000000 L 195.000000 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(u -&gt; o)[0]"><path d="M 186.000000 754.000000 L 186.000000 782.000000 S 186.000000 792.000000 176.000000 792.000000 L 139.000000 792.000000 S 129.000000 792.000000 129.000000 802.000000 L 129.000000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(t -&gt; p)[0]"><path d="M 157.000000 608.000000 L 157.000000 1078.000000 S 157.000000 1088.000000 147.000000 1088.000000 L 143.250000 1088.000000 S 133.250000 1088.000000 133.250000 1098.000000 L 133.250000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(c -&gt; t)[0]"><path d="M 229.750000 362.000000 L 229.750000 490.000000 S 229.750000 500.000000 219.750000 500.000000 L 184.000000 500.000000 S 174.000000 500.000000 174.000000 510.000000 L 174.000000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(s -&gt; a)[0]"><path d="M 174.333333 362.000000 L 174.333333 440.000000 S 174.333333 450.000000 184.333333 450.000000 L 222.000000 450.000000 S 232.000000 450.000000 232.000000 460.000000 L 232.000000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(u -&gt; a)[0]"><path d="M 204.000000 754.000000 L 204.000000 833.300000 C 204.000000 850.700000 221.400000 833.300000 221.400000 850.700000 L 221.400000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><mask id="1002401658" maskUnits="userSpaceOnUse" x="10" y="10" width="445" height="1332">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="210.000000" y="982.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="236.500000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="254.000000" y="1274.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="280.500000" y="1312.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="216.000000" y="294.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="242.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="254.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="281.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="319.000000" y="982.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.500000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="365.000000" y="1128.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="390.500000" y="1166.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="225.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="252.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="h"><g class="shape" ><rect x="400.000000" y="158.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="i"><g class="shape" ><rect x="402.000000" y="294.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">i</text></g><g id="j"><g class="shape" ><rect x="402.000000" y="540.000000" width="50.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="427.000000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">j</text></g><g id="k"><g class="shape" ><rect x="328.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="354.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">k</text></g><g id="l"><g class="shape" ><rect x="12.000000" y="982.000000" width="49.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="36.500000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">l</text></g><g id="m"><g class="shape" ><rect x="42.000000" y="1274.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="70.500000" y="1312.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">m</text></g><g id="n"><g class="shape" ><rect x="19.000000" y="686.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="45.500000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">n</text></g><g id="o"><g class="shape" ><rect x="93.000000" y="982.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="120.000000" y="1020.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">o</text></g><g id="p"><g class="shape" ><rect x="93.000000" y="1128.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="119.500000" y="1166.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">p</text></g><g id="q"><g class="shape" ><rect x="28.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">q</text></g><g id="r"><g class="shape" ><rect x="140.000000" y="158.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="165.500000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">r</text></g><g id="s"><g class="shape" ><rect x="139.000000" y="294.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="165.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">s</text></g><g id="t"><g class="shape" ><rect x="140.000000" y="540.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="165.500000" y="578.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">t</text></g><g id="u"><g class="shape" ><rect x="168.000000" y="686.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="195.000000" y="724.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 237.300000 1050.000000 L 237.300000 1224.000000 S 237.300000 1234.000000 247.300000 1234.000000 L 257.750000 1234.000000 S 267.750000 1234.000000 267.750000 1244.000000 L 267.750000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(c -&gt; a)[0]"><path d="M 243.000000 362.000000 L 243.000000 791.800000 C 243.000000 792.200000 242.600000 791.800000 242.600000 792.200000 L 242.600000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(d -&gt; a)[0]"><path d="M 267.500000 754.000000 L 267.500000 834.850000 C 267.500000 849.150000 253.200000 834.850000 253.200000 849.150000 L 253.200000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(d -&gt; b)[0]"><path d="M 281.000000 754.000000 L 281.000000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(d -&gt; e)[0]"><path d="M 294.500000 754.000000 L 294.500000 782.000000 S 294.500000 792.000000 304.500000 792.000000 L 326.833333 792.000000 S 336.833333 792.000000 336.833333 802.000000 L 336.833333 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(e -&gt; f)[0]"><path d="M 345.666667 1050.000000 L 345.666667 1078.000000 S 345.666667 1088.000000 355.666667 1088.000000 L 368.250000 1088.000000 S 378.250000 1088.000000 378.250000 1098.000000 L 378.250000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(f -&gt; b)[0]"><path d="M 391.000000 1196.000000 L 391.000000 1224.000000 S 391.000000 1234.000000 381.000000 1234.000000 L 304.250000 1234.000000 S 294.250000 1234.000000 294.250000 1244.000000 L 294.250000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(c -&gt; f)[0]"><path d="M 256.250000 362.000000 L 256.250000 390.000000 S 256.250000 400.000000 266.250000 400.000000 L 381.000000 400.000000 S 391.000000 400.000000 391.000000 410.000000 L 391.000000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(g -&gt; c)[0]"><path d="M 243.000000 80.000000 L 243.000000 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(g -&gt; h)[0]"><path d="M 261.000000 80.000000 L 261.000000 108.000000 S 261.000000 118.000000 271.000000 118.000000 L 417.000000 118.000000 S 427.000000 118.000000 427.000000 128.000000 L 427.000000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(h -&gt; i)[0]"><path d="M 427.000000 226.000000 L 427.000000 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(i -&gt; j)[0]"><path d="M 427.000000 362.000000 L 427.000000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(j -&gt; k)[0]"><path d="M 418.666667 608.000000 L 418.666667 636.000000 S 418.666667 646.000000 408.666667 646.000000 L 364.500000 646.000000 S 354.500000 646.000000 354.500000 656.000000 L 354.500000 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(k -&gt; e)[0]"><path d="M 354.500000 754.000000 L 354.500000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(j -&gt; f)[0]"><path d="M 435.333333 608.000000 L 435.333333 1078.000000 S 435.333333 1088.000000 425.333333 1088.000000 L 413.750000 1088.000000 S 403.750000 1088.000000 403.750000 1098.000000 L 403.750000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(l -&gt; m)[0]"><path d="M 36.500000 1050.000000 L 36.500000 1224.000000 S 36.500000 1234.000000 46.500000 1234.000000 L 46.750000 1234.000000 S 56.750000 1234.000000 56.750000 1244.000000 L 56.750000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; l)[0]"><path d="M 28.333333 754.000000 L 28.333333 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; l)[1]"><path d="M 37.166667 754.000000 L 37.166667 938.250000 C 37.166667 945.750000 44.666667 938.250000 44.666667 945.750000 L 44.666667 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; m)[0]"><path d="M 46.000000 754.000000 L 46.000000 882.000000 S 46.000000 892.000000 56.000000 892.000000 L 61.000000 892.000000 S 71.000000 892.000000 71.000000 902.000000 L 71.000000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; o)[0]"><path d="M 63.666667 754.000000 L 63.666667 782.000000 S 63.666667 792.000000 73.666667 792.000000 L 101.000000 792.000000 S 111.000000 792.000000 111.000000 802.000000 L 111.000000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(o -&gt; p)[0]"><path d="M 120.000000 1050.000000 L 120.000000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(p -&gt; m)[0]"><path d="M 120.000000 1196.000000 L 120.000000 1224.000000 S 120.000000 1234.000000 110.000000 1234.000000 L 95.250000 1234.000000 S 85.250000 1234.000000 85.250000 1244.000000 L 85.250000 1270.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(n -&gt; p)[0]"><path d="M 54.833333 754.000000 L 54.833333 832.000000 S 54.833333 842.000000 64.833333 842.000000 L 72.000000 842.000000 S 82.000000 842.000000 82.000000 852.000000 L 82.000000 1078.000000 S 82.000000 1088.000000 92.000000 1088.000000 L 96.750000 1088.000000 S 106.750000 1088.000000 106.750000 1098.000000 L 106.750000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(q -&gt; n)[0]"><path d="M 46.000000 80.000000 L 46.000000 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(q -&gt; r)[0]"><path d="M 64.000000 80.000000 L 64.000000 108.000000 S 64.000000 118.000000 74.000000 118.000000 L 155.666667 118.000000 S 165.666667 118.000000 165.666667 128.000000 L 165.666667 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(r -&gt; s)[0]"><path d="M 165.666667 226.000000 L 165.666667 290.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(s -&gt; t)[0]"><path d="M 157.000000 362.000000 L 157.000000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(t -&gt; u)[0]"><path d="M 174.000000 608.000000 L 174.000000 636.000000 S 174.000000 646.000000 184.000000 646.000000 L 185.000000 646.000000 S 195.000000 646.000000 195.000000 656.000000 L 195.000000 682.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(u -&gt; o)[0]"><path d="M 186.000000 754.000000 L 186.000000 782.000000 S 186.000000 792.000000 176.000000 792.000000 L 139.000000 792.000000 S 129.000000 792.000000 129.000000 802.000000 L 129.000000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(t -&gt; p)[0]"><path d="M 157.000000 608.000000 L 157.000000 1078.000000 S 157.000000 1088.000000 147.000000 1088.000000 L 143.250000 1088.000000 S 133.250000 1088.000000 133.250000 1098.000000 L 133.250000 1124.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(c -&gt; t)[0]"><path d="M 229.750000 362.000000 L 229.750000 490.000000 S 229.750000 500.000000 219.750000 500.000000 L 184.000000 500.000000 S 174.000000 500.000000 174.000000 510.000000 L 174.000000 536.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(s -&gt; a)[0]"><path d="M 174.333333 362.000000 L 174.333333 440.000000 S 174.333333 450.000000 184.333333 450.000000 L 222.000000 450.000000 S 232.000000 450.000000 232.000000 460.000000 L 232.000000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><g id="(u -&gt; a)[0]"><path d="M 204.000000 754.000000 L 204.000000 833.300000 C 204.000000 850.700000 221.400000 833.300000 221.400000 850.700000 L 221.400000 978.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1002401658)" /></g><mask id="1002401658" maskUnits="userSpaceOnUse" x="10" y="10" width="445" height="1332">
 <rect x="10" y="10" width="445" height="1332" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/near-alone/dagre/sketch.exp.svg b/e2etests/testdata/stable/near-alone/dagre/sketch.exp.svg
index 03a9fe9bd..dbc3f29b2 100644
--- a/e2etests/testdata/stable/near-alone/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/near-alone/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="176" viewBox="-101 -88 130 176"><rect x="-101.000000" y="-88.000000" width="130.000000" height="176.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 130 176"><svg id="d2-svg" width="130" height="176" viewBox="-101 -88 130 176"><rect x="-101.000000" y="-88.000000" width="130.000000" height="176.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="-26.000000" y="-86.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.500000" y="-47.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="-27.000000" y="20.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.000000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="-99.000000" y="-33.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="-73.000000" y="5.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><mask id="668290438" maskUnits="userSpaceOnUse" x="-101" y="-88" width="130" height="176">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="-26.000000" y="-86.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.500000" y="-47.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="-27.000000" y="20.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.000000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="-99.000000" y="-33.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="-73.000000" y="5.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><mask id="668290438" maskUnits="userSpaceOnUse" x="-101" y="-88" width="130" height="176">
 <rect x="-101" y="-88" width="130" height="176" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/near-alone/elk/sketch.exp.svg b/e2etests/testdata/stable/near-alone/elk/sketch.exp.svg
index 03a9fe9bd..dbc3f29b2 100644
--- a/e2etests/testdata/stable/near-alone/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/near-alone/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="176" viewBox="-101 -88 130 176"><rect x="-101.000000" y="-88.000000" width="130.000000" height="176.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 130 176"><svg id="d2-svg" width="130" height="176" viewBox="-101 -88 130 176"><rect x="-101.000000" y="-88.000000" width="130.000000" height="176.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="-26.000000" y="-86.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.500000" y="-47.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="-27.000000" y="20.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.000000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="-99.000000" y="-33.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="-73.000000" y="5.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><mask id="668290438" maskUnits="userSpaceOnUse" x="-101" y="-88" width="130" height="176">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="-26.000000" y="-86.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.500000" y="-47.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="-27.000000" y="20.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="0.000000" y="58.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="-99.000000" y="-33.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="-73.000000" y="5.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><mask id="668290438" maskUnits="userSpaceOnUse" x="-101" y="-88" width="130" height="176">
 <rect x="-101" y="-88" width="130" height="176" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg b/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
index 17d829442..86905681f 100644
--- a/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="216" height="236" viewBox="-2 -2 216 236"><rect x="-2.000000" y="-2.000000" width="216.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 216 236"><svg id="d2-svg" width="216" height="236" viewBox="-2 -2 216 236"><rect x="-2.000000" y="-2.000000" width="216.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="1"><g class="shape" ><rect x="1.000000" y="0.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="foo baz"><g class="shape" ><rect x="113.000000" y="0.000000" width="99.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Foo Baz</text></g><g id="hello"><g class="shape" ><rect x="122.000000" y="166.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3215654061)" /></g><g id="(foo baz -&gt; hello)[0]"><path d="M 162.000000 68.000000 C 162.000000 106.000000 162.000000 126.000000 162.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3215654061)" /></g><mask id="3215654061" maskUnits="userSpaceOnUse" x="-2" y="-2" width="216" height="236">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="1"><g class="shape" ><rect x="1.000000" y="0.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="foo baz"><g class="shape" ><rect x="113.000000" y="0.000000" width="99.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Foo Baz</text></g><g id="hello"><g class="shape" ><rect x="122.000000" y="166.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3215654061)" /></g><g id="(foo baz -&gt; hello)[0]"><path d="M 162.000000 68.000000 C 162.000000 106.000000 162.000000 126.000000 162.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3215654061)" /></g><mask id="3215654061" maskUnits="userSpaceOnUse" x="-2" y="-2" width="216" height="236">
 <rect x="-2" y="-2" width="216" height="236" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg b/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
index d5f32893f..27e4897f4 100644
--- a/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="175" height="206" viewBox="10 10 175 206"><rect x="10.000000" y="10.000000" width="175.000000" height="206.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 175 206"><svg id="d2-svg" width="175" height="206" viewBox="10 10 175 206"><rect x="10.000000" y="10.000000" width="175.000000" height="206.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="1"><g class="shape" ><rect x="12.000000" y="12.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="foo baz"><g class="shape" ><rect x="84.000000" y="12.000000" width="99.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="133.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Foo Baz</text></g><g id="hello"><g class="shape" ><rect x="94.000000" y="148.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="134.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1695982713)" /></g><g id="(foo baz -&gt; hello)[0]"><path d="M 134.000000 80.000000 L 134.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1695982713)" /></g><mask id="1695982713" maskUnits="userSpaceOnUse" x="10" y="10" width="175" height="206">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="1"><g class="shape" ><rect x="12.000000" y="12.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><rect x="12.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="foo baz"><g class="shape" ><rect x="84.000000" y="12.000000" width="99.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="133.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Foo Baz</text></g><g id="hello"><g class="shape" ><rect x="94.000000" y="148.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="134.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1695982713)" /></g><g id="(foo baz -&gt; hello)[0]"><path d="M 134.000000 80.000000 L 134.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1695982713)" /></g><mask id="1695982713" maskUnits="userSpaceOnUse" x="10" y="10" width="175" height="206">
 <rect x="10" y="10" width="175" height="206" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg b/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
index 41d792d3c..288b6b60f 100644
--- a/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="303" height="832" viewBox="-2 0 303 832"><rect x="-2.000000" y="0.000000" width="303.000000" height="832.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 303 832"><svg id="d2-svg" width="303" height="832" viewBox="-2 0 303 832"><rect x="-2.000000" y="0.000000" width="303.000000" height="832.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="299.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="149.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="93.000000" y="764.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="119.500000" y="802.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="206.000000" y="598.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="233.000000" y="636.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="93.000000" y="598.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="119.500000" y="636.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="208.000000" y="432.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="233.500000" y="470.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="206.000000" y="266.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="233.000000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="a.b"><g class="shape" ><rect x="60.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.h"><g class="shape" ><rect x="207.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="233.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.156647 138.154632 C 57.256024 160.100000 53.250000 176.000000 53.250000 191.000000 C 53.250000 206.000000 53.250000 232.600000 53.250000 257.500000 C 53.250000 282.400000 53.250000 315.600000 53.250000 340.500000 C 53.250000 365.400000 53.250000 398.600000 53.250000 423.500000 C 53.250000 448.400000 53.250000 481.600000 53.250000 506.500000 C 53.250000 531.400000 53.250000 564.600000 53.250000 589.500000 C 53.250000 614.400000 61.250000 724.000000 90.751220 760.876525" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(d -&gt; c)[0]"><path d="M 233.250000 666.000000 C 233.250000 704.000000 215.850000 726.724229 149.478782 775.260009" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(e -&gt; c)[0]"><path d="M 119.750000 666.000000 C 119.750000 704.000000 119.750000 724.000000 119.750000 760.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(f -&gt; d)[0]"><path d="M 233.250000 500.000000 C 233.250000 538.000000 233.250000 558.000000 233.250000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(a -&gt; e)[0]"><path d="M 119.750000 168.000000 C 119.750000 206.000000 119.750000 232.600000 119.750000 257.500000 C 119.750000 282.400000 119.750000 315.600000 119.750000 340.500000 C 119.750000 365.400000 119.750000 398.600000 119.750000 423.500000 C 119.750000 448.400000 119.750000 558.000000 119.750000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(g -&gt; f)[0]"><path d="M 233.250000 334.000000 C 233.250000 372.000000 233.250000 392.000000 233.250000 428.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(a.h -&gt; g)[0]"><path d="M 233.250000 138.500000 C 233.250000 160.100000 233.250000 226.000000 233.250000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><mask id="1974132633" maskUnits="userSpaceOnUse" x="-2" y="0" width="303" height="832">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="41.000000" width="299.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="149.500000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="93.000000" y="764.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="119.500000" y="802.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="206.000000" y="598.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="233.000000" y="636.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="93.000000" y="598.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="119.500000" y="636.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="208.000000" y="432.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="233.500000" y="470.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="206.000000" y="266.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="233.000000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="a.b"><g class="shape" ><rect x="60.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.h"><g class="shape" ><rect x="207.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="233.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.156647 138.154632 C 57.256024 160.100000 53.250000 176.000000 53.250000 191.000000 C 53.250000 206.000000 53.250000 232.600000 53.250000 257.500000 C 53.250000 282.400000 53.250000 315.600000 53.250000 340.500000 C 53.250000 365.400000 53.250000 398.600000 53.250000 423.500000 C 53.250000 448.400000 53.250000 481.600000 53.250000 506.500000 C 53.250000 531.400000 53.250000 564.600000 53.250000 589.500000 C 53.250000 614.400000 61.250000 724.000000 90.751220 760.876525" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(d -&gt; c)[0]"><path d="M 233.250000 666.000000 C 233.250000 704.000000 215.850000 726.724229 149.478782 775.260009" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(e -&gt; c)[0]"><path d="M 119.750000 666.000000 C 119.750000 704.000000 119.750000 724.000000 119.750000 760.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(f -&gt; d)[0]"><path d="M 233.250000 500.000000 C 233.250000 538.000000 233.250000 558.000000 233.250000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(a -&gt; e)[0]"><path d="M 119.750000 168.000000 C 119.750000 206.000000 119.750000 232.600000 119.750000 257.500000 C 119.750000 282.400000 119.750000 315.600000 119.750000 340.500000 C 119.750000 365.400000 119.750000 398.600000 119.750000 423.500000 C 119.750000 448.400000 119.750000 558.000000 119.750000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(g -&gt; f)[0]"><path d="M 233.250000 334.000000 C 233.250000 372.000000 233.250000 392.000000 233.250000 428.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><g id="(a.h -&gt; g)[0]"><path d="M 233.250000 138.500000 C 233.250000 160.100000 233.250000 226.000000 233.250000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1974132633)" /></g><mask id="1974132633" maskUnits="userSpaceOnUse" x="-2" y="0" width="303" height="832">
 <rect x="-2" y="0" width="303" height="832" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg b/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
index 377dc23b3..c28262eb6 100644
--- a/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="789" viewBox="10 10 230 789"><rect x="10.000000" y="10.000000" width="230.000000" height="789.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 789"><svg id="d2-svg" width="230" height="789" viewBox="10 10 230 789"><rect x="10.000000" y="10.000000" width="230.000000" height="789.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="226.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="125.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="73.000000" y="731.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.500000" y="769.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="72.000000" y="585.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.000000" y="623.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="145.000000" y="449.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="171.500000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="74.000000" y="449.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.500000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="72.000000" y="313.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.000000" y="351.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.h"><g class="shape" ><rect x="135.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.500000 130.000000 L 88.500000 213.000000 S 88.500000 223.000000 78.500000 223.000000 L 71.500000 223.000000 S 61.500000 223.000000 61.500000 233.000000 L 61.500000 681.000000 S 61.500000 691.000000 71.500000 691.000000 L 76.250000 691.000000 S 86.250000 691.000000 86.250000 701.000000 L 86.250000 727.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(d -&gt; c)[0]"><path d="M 99.500000 653.000000 L 99.500000 727.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(e -&gt; c)[0]"><path d="M 171.500000 517.000000 L 171.500000 681.000000 S 171.500000 691.000000 161.500000 691.000000 L 122.750000 691.000000 S 112.750000 691.000000 112.750000 701.000000 L 112.750000 727.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(f -&gt; d)[0]"><path d="M 99.500000 517.000000 L 99.500000 581.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(a -&gt; e)[0]"><path d="M 171.500000 180.000000 L 171.500000 445.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(g -&gt; f)[0]"><path d="M 99.500000 381.000000 L 99.500000 445.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(a.h -&gt; g)[0]"><path d="M 161.500000 130.000000 L 161.500000 263.000000 S 161.500000 273.000000 151.500000 273.000000 L 109.500000 273.000000 S 99.500000 273.000000 99.500000 283.000000 L 99.500000 309.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><mask id="1309613587" maskUnits="userSpaceOnUse" x="10" y="10" width="230" height="789">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="226.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="125.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a</text></g><g id="c"><g class="shape" ><rect x="73.000000" y="731.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.500000" y="769.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="72.000000" y="585.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.000000" y="623.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="145.000000" y="449.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="171.500000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="74.000000" y="449.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.500000" y="487.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="72.000000" y="313.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="99.000000" y="351.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="a.b"><g class="shape" ><rect x="62.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.h"><g class="shape" ><rect x="135.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.500000 130.000000 L 88.500000 213.000000 S 88.500000 223.000000 78.500000 223.000000 L 71.500000 223.000000 S 61.500000 223.000000 61.500000 233.000000 L 61.500000 681.000000 S 61.500000 691.000000 71.500000 691.000000 L 76.250000 691.000000 S 86.250000 691.000000 86.250000 701.000000 L 86.250000 727.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(d -&gt; c)[0]"><path d="M 99.500000 653.000000 L 99.500000 727.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(e -&gt; c)[0]"><path d="M 171.500000 517.000000 L 171.500000 681.000000 S 171.500000 691.000000 161.500000 691.000000 L 122.750000 691.000000 S 112.750000 691.000000 112.750000 701.000000 L 112.750000 727.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(f -&gt; d)[0]"><path d="M 99.500000 517.000000 L 99.500000 581.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(a -&gt; e)[0]"><path d="M 171.500000 180.000000 L 171.500000 445.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(g -&gt; f)[0]"><path d="M 99.500000 381.000000 L 99.500000 445.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><g id="(a.h -&gt; g)[0]"><path d="M 161.500000 130.000000 L 161.500000 263.000000 S 161.500000 273.000000 151.500000 273.000000 L 109.500000 273.000000 S 99.500000 273.000000 99.500000 283.000000 L 99.500000 309.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1309613587)" /></g><mask id="1309613587" maskUnits="userSpaceOnUse" x="10" y="10" width="230" height="789">
 <rect x="10" y="10" width="230" height="789" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg
index f7f05ddbb..4a8e8b953 100644
--- a/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="330" height="600" viewBox="-2 0 330 600"><rect x="-2.000000" y="0.000000" width="330.000000" height="600.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 330 600"><svg id="d2-svg" width="330" height="600" viewBox="-2 0 330 600"><rect x="-2.000000" y="0.000000" width="330.000000" height="600.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="top2"><g class="shape" ><rect x="0.000000" y="41.000000" width="326.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="163.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">top2</text></g><g id="a"><g class="shape" ><rect x="32.000000" y="266.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="58.500000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="145.000000" y="266.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="171.500000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="258.000000" y="266.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="284.500000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="bottom"><g class="shape" ><rect x="0.000000" y="473.000000" width="324.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="162.000000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bottom</text></g><g id="top2.start"><g class="shape" ><rect x="123.000000" y="70.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="163.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">start</text></g><g id="bottom.end"><g class="shape" ><rect x="137.000000" y="502.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="173.000000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">end</text></g><g id="(top2.start -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 121.193509 135.977296 C 71.000000 159.823810 58.000000 226.000000 58.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(top2.start -&gt; b)[0]"><path d="M 166.503179 138.473834 C 170.036145 160.100000 171.000000 226.000000 171.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(top2.start -&gt; c)[0]"><path d="M 204.835425 131.732506 C 267.800000 158.987603 284.000000 226.000000 284.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(a -&gt; bottom.end)[0]"><path d="M 58.000000 334.000000 C 58.000000 372.000000 73.800000 447.500000 134.144595 506.698811" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(b -&gt; bottom.end)[0]"><path d="M 171.000000 334.000000 C 171.000000 372.000000 171.200000 446.100000 171.943268 498.500402" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(c -&gt; bottom.end)[0]"><path d="M 284.000000 334.000000 C 284.000000 372.000000 269.000000 447.300000 211.800286 505.643709" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><mask id="2825565372" maskUnits="userSpaceOnUse" x="-2" y="0" width="330" height="600">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="top2"><g class="shape" ><rect x="0.000000" y="41.000000" width="326.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="163.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">top2</text></g><g id="a"><g class="shape" ><rect x="32.000000" y="266.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="58.500000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="145.000000" y="266.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="171.500000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="258.000000" y="266.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="284.500000" y="304.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="bottom"><g class="shape" ><rect x="0.000000" y="473.000000" width="324.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="162.000000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bottom</text></g><g id="top2.start"><g class="shape" ><rect x="123.000000" y="70.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="163.000000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">start</text></g><g id="bottom.end"><g class="shape" ><rect x="137.000000" y="502.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="173.000000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">end</text></g><g id="(top2.start -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 121.193509 135.977296 C 71.000000 159.823810 58.000000 226.000000 58.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(top2.start -&gt; b)[0]"><path d="M 166.503179 138.473834 C 170.036145 160.100000 171.000000 226.000000 171.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(top2.start -&gt; c)[0]"><path d="M 204.835425 131.732506 C 267.800000 158.987603 284.000000 226.000000 284.000000 262.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(a -&gt; bottom.end)[0]"><path d="M 58.000000 334.000000 C 58.000000 372.000000 73.800000 447.500000 134.144595 506.698811" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(b -&gt; bottom.end)[0]"><path d="M 171.000000 334.000000 C 171.000000 372.000000 171.200000 446.100000 171.943268 498.500402" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><g id="(c -&gt; bottom.end)[0]"><path d="M 284.000000 334.000000 C 284.000000 372.000000 269.000000 447.300000 211.800286 505.643709" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2825565372)" /></g><mask id="2825565372" maskUnits="userSpaceOnUse" x="-2" y="0" width="330" height="600">
 <rect x="-2" y="0" width="330" height="600" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg b/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg
index 6a69a1814..2b3efce4c 100644
--- a/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="244" height="622" viewBox="10 10 244 622"><rect x="10.000000" y="10.000000" width="244.000000" height="622.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 244 622"><svg id="d2-svg" width="244" height="622" viewBox="10 10 244 622"><rect x="10.000000" y="10.000000" width="244.000000" height="622.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="top2"><g class="shape" ><rect x="63.000000" y="12.000000" width="180.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="153.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">top2</text></g><g id="a"><g class="shape" ><rect x="53.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="79.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="126.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="152.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="199.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="225.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="bottom"><g class="shape" ><rect x="12.000000" y="464.000000" width="172.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="98.000000" y="497.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bottom</text></g><g id="top2.start"><g class="shape" ><rect x="113.000000" y="62.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">start</text></g><g id="bottom.end"><g class="shape" ><rect x="62.000000" y="514.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="98.000000" y="552.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">end</text></g><g id="(top2.start -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 133.000000 130.000000 L 133.000000 213.000000 S 133.000000 223.000000 123.000000 223.000000 L 90.000000 223.000000 S 80.000000 223.000000 80.000000 233.000000 L 80.000000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(top2.start -&gt; b)[0]"><path d="M 153.000000 130.000000 L 153.000000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(top2.start -&gt; c)[0]"><path d="M 173.000000 130.000000 L 173.000000 213.000000 S 173.000000 223.000000 183.000000 223.000000 L 216.000000 223.000000 S 226.000000 223.000000 226.000000 233.000000 L 226.000000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(a -&gt; bottom.end)[0]"><path d="M 80.000000 331.000000 L 80.000000 510.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(b -&gt; bottom.end)[0]"><path d="M 153.000000 331.000000 L 153.000000 359.000000 S 153.000000 369.000000 143.000000 369.000000 L 108.000000 369.000000 S 98.000000 369.000000 98.000000 379.000000 L 98.000000 510.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(c -&gt; bottom.end)[0]"><path d="M 226.000000 331.000000 L 226.000000 409.000000 S 226.000000 419.000000 216.000000 419.000000 L 126.000000 419.000000 S 116.000000 419.000000 116.000000 429.000000 L 116.000000 510.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><mask id="4094334146" maskUnits="userSpaceOnUse" x="10" y="10" width="244" height="622">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="top2"><g class="shape" ><rect x="63.000000" y="12.000000" width="180.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="153.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">top2</text></g><g id="a"><g class="shape" ><rect x="53.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="79.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="126.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="152.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="199.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="225.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="bottom"><g class="shape" ><rect x="12.000000" y="464.000000" width="172.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="98.000000" y="497.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bottom</text></g><g id="top2.start"><g class="shape" ><rect x="113.000000" y="62.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="153.000000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">start</text></g><g id="bottom.end"><g class="shape" ><rect x="62.000000" y="514.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="98.000000" y="552.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">end</text></g><g id="(top2.start -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 133.000000 130.000000 L 133.000000 213.000000 S 133.000000 223.000000 123.000000 223.000000 L 90.000000 223.000000 S 80.000000 223.000000 80.000000 233.000000 L 80.000000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(top2.start -&gt; b)[0]"><path d="M 153.000000 130.000000 L 153.000000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(top2.start -&gt; c)[0]"><path d="M 173.000000 130.000000 L 173.000000 213.000000 S 173.000000 223.000000 183.000000 223.000000 L 216.000000 223.000000 S 226.000000 223.000000 226.000000 233.000000 L 226.000000 259.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(a -&gt; bottom.end)[0]"><path d="M 80.000000 331.000000 L 80.000000 510.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(b -&gt; bottom.end)[0]"><path d="M 153.000000 331.000000 L 153.000000 359.000000 S 153.000000 369.000000 143.000000 369.000000 L 108.000000 369.000000 S 98.000000 369.000000 98.000000 379.000000 L 98.000000 510.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><g id="(c -&gt; bottom.end)[0]"><path d="M 226.000000 331.000000 L 226.000000 409.000000 S 226.000000 419.000000 216.000000 419.000000 L 126.000000 419.000000 S 116.000000 419.000000 116.000000 429.000000 L 116.000000 510.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4094334146)" /></g><mask id="4094334146" maskUnits="userSpaceOnUse" x="10" y="10" width="244" height="622">
 <rect x="10" y="10" width="244" height="622" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/ovals/dagre/sketch.exp.svg b/e2etests/testdata/stable/ovals/dagre/sketch.exp.svg
index aedba18c5..9053c43dc 100644
--- a/e2etests/testdata/stable/ovals/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/ovals/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2742" height="260" viewBox="-2 -2 2742 260"><rect x="-2.000000" y="-2.000000" width="2742.000000" height="260.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2742 260"><svg id="d2-svg" width="2742" height="260" viewBox="-2 -2 2742 260"><rect x="-2.000000" y="-2.000000" width="2742.000000" height="260.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><ellipse rx="17.500000" ry="45.000000" cx="1081.500000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1081.500000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><ellipse rx="26.500000" ry="42.500000" cx="1185.500000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1185.500000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><ellipse rx="38.500000" ry="38.500000" cx="1310.500000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1310.500000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><ellipse rx="59.000000" ry="32.000000" cx="1468.000000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1468.000000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><ellipse rx="91.000000" ry="30.500000" cx="1678.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1678.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><ellipse rx="152.000000" ry="50.500000" cx="1981.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1981.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><ellipse rx="272.500000" ry="91.000000" cx="2465.500000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2465.500000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><ellipse rx="14.000000" ry="42.000000" cx="14.000000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="14.000000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><ellipse rx="32.000000" ry="41.500000" cx="120.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="120.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><ellipse rx="64.000000" ry="41.500000" cx="276.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="276.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><ellipse rx="256.000000" ry="85.500000" cx="656.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="656.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><ellipse rx="16.000000" ry="128.000000" cx="988.000000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="988.000000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="3837141257" maskUnits="userSpaceOnUse" x="-2" y="-2" width="2742" height="260">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><ellipse rx="17.500000" ry="45.000000" cx="1081.500000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1081.500000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><ellipse rx="26.500000" ry="42.500000" cx="1185.500000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1185.500000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><ellipse rx="38.500000" ry="38.500000" cx="1310.500000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1310.500000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><ellipse rx="59.000000" ry="32.000000" cx="1468.000000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1468.000000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><ellipse rx="91.000000" ry="30.500000" cx="1678.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1678.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><ellipse rx="152.000000" ry="50.500000" cx="1981.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1981.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><ellipse rx="272.500000" ry="91.000000" cx="2465.500000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2465.500000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><ellipse rx="14.000000" ry="42.000000" cx="14.000000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="14.000000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><ellipse rx="32.000000" ry="41.500000" cx="120.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="120.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><ellipse rx="64.000000" ry="41.500000" cx="276.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="276.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><ellipse rx="256.000000" ry="85.500000" cx="656.000000" cy="128.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="656.000000" y="134.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><ellipse rx="16.000000" ry="128.000000" cx="988.000000" cy="128.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="988.000000" y="133.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="3837141257" maskUnits="userSpaceOnUse" x="-2" y="-2" width="2742" height="260">
 <rect x="-2" y="-2" width="2742" height="260" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/ovals/elk/sketch.exp.svg b/e2etests/testdata/stable/ovals/elk/sketch.exp.svg
index e05fbc5f9..0271c84dc 100644
--- a/e2etests/testdata/stable/ovals/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/ovals/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2302" height="260" viewBox="10 10 2302 260"><rect x="10.000000" y="10.000000" width="2302.000000" height="260.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2302 260"><svg id="d2-svg" width="2302" height="260" viewBox="10 10 2302 260"><rect x="10.000000" y="10.000000" width="2302.000000" height="260.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><ellipse rx="17.500000" ry="45.000000" cx="29.500000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="29.500000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><ellipse rx="26.500000" ry="42.500000" cx="93.500000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="93.500000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><ellipse rx="38.500000" ry="38.500000" cx="178.500000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="178.500000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><ellipse rx="59.000000" ry="32.000000" cx="296.000000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="296.000000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><ellipse rx="91.000000" ry="30.500000" cx="466.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="466.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><ellipse rx="152.000000" ry="50.500000" cx="729.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="729.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><ellipse rx="272.500000" ry="91.000000" cx="1173.500000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1173.500000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><ellipse rx="14.000000" ry="42.000000" cx="1480.000000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1480.000000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><ellipse rx="32.000000" ry="41.500000" cx="1546.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1546.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><ellipse rx="64.000000" ry="41.500000" cx="1662.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1662.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><ellipse rx="256.000000" ry="85.500000" cx="2002.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2002.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><ellipse rx="16.000000" ry="128.000000" cx="2294.000000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2294.000000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="1777832286" maskUnits="userSpaceOnUse" x="10" y="10" width="2302" height="260">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><ellipse rx="17.500000" ry="45.000000" cx="29.500000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="29.500000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><ellipse rx="26.500000" ry="42.500000" cx="93.500000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="93.500000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><ellipse rx="38.500000" ry="38.500000" cx="178.500000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="178.500000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><ellipse rx="59.000000" ry="32.000000" cx="296.000000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="296.000000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><ellipse rx="91.000000" ry="30.500000" cx="466.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="466.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><ellipse rx="152.000000" ry="50.500000" cx="729.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="729.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><ellipse rx="272.500000" ry="91.000000" cx="1173.500000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1173.500000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><ellipse rx="14.000000" ry="42.000000" cx="1480.000000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1480.000000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><ellipse rx="32.000000" ry="41.500000" cx="1546.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1546.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><ellipse rx="64.000000" ry="41.500000" cx="1662.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1662.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><ellipse rx="256.000000" ry="85.500000" cx="2002.000000" cy="139.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2002.000000" y="145.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><ellipse rx="16.000000" ry="128.000000" cx="2294.000000" cy="140.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2294.000000" y="145.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="1777832286" maskUnits="userSpaceOnUse" x="10" y="10" width="2302" height="260">
 <rect x="10" y="10" width="2302" height="260" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg b/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg
index 2d9d50075..ac8083798 100644
--- a/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="936" height="1262" viewBox="-2 -2 936 1262"><rect x="-2.000000" y="-2.000000" width="936.000000" height="1262.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 936 1262"><svg id="d2-svg" width="936" height="1262" viewBox="-2 -2 936 1262"><rect x="-2.000000" y="-2.000000" width="936.000000" height="1262.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="402.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="466.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container"><g class="shape" ><rect x="0.000000" y="295.000000" width="932.000000" height="963.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="466.000000" y="282.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="402.000000" y="324.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="466.000000" y="473.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2"><g class="shape" ><rect x="20.000000" y="635.000000" width="436.000000" height="593.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="238.000000" y="623.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">left2</text></g><g id="container.right"><g class="shape" ><rect x="476.000000" y="635.000000" width="436.000000" height="593.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="694.000000" y="623.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">right</text></g><g id="container.left2.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="174.000000" y="667.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="238.000000" y="816.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2.inner"><g class="shape" ><rect x="40.000000" y="973.000000" width="396.000000" height="223.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="238.000000" y="962.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="630.000000" y="667.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="694.000000" y="816.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="496.000000" y="973.000000" width="396.000000" height="223.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="694.000000" y="962.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.left2.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="80.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="144.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.left2.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="268.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="332.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="container.right.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="536.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="600.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="724.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="788.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 466.000000 156.000000 C 466.000000 194.000000 466.000000 268.100000 466.000000 320.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /></g><g id="container.left2.(root -&gt; inner.left2)[0]"><path d="M 184.231278 823.151056 C 152.272000 869.900000 144.000000 955.600000 144.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="148.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.left2.(root -&gt; inner.right)[0]"><path d="M 291.768722 823.151056 C 323.728000 869.900000 332.000000 955.600000 332.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="328.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.right.(root -&gt; inner.left2)[0]"><path d="M 640.231278 823.151056 C 608.272000 869.900000 600.000000 955.600000 600.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="604.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 747.768722 823.151056 C 779.728000 869.900000 788.000000 955.600000 788.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="784.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.(root -&gt; left2.root)[0]"><path d="M 400.287338 441.129346 C 270.800000 519.219298 238.000000 613.100000 238.000000 663.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="270.500000" y="525.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to left2 container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 531.712662 441.129346 C 661.200000 519.219298 694.000000 613.100000 694.000000 663.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="661.000000" y="525.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to right container root</text></g><mask id="3641463008" maskUnits="userSpaceOnUse" x="-2" y="-2" width="936" height="1262">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="402.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="466.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container"><g class="shape" ><rect x="0.000000" y="295.000000" width="932.000000" height="963.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="466.000000" y="282.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="402.000000" y="324.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="466.000000" y="473.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2"><g class="shape" ><rect x="20.000000" y="635.000000" width="436.000000" height="593.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="238.000000" y="623.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">left2</text></g><g id="container.right"><g class="shape" ><rect x="476.000000" y="635.000000" width="436.000000" height="593.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="694.000000" y="623.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">right</text></g><g id="container.left2.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="174.000000" y="667.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="238.000000" y="816.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2.inner"><g class="shape" ><rect x="40.000000" y="973.000000" width="396.000000" height="223.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="238.000000" y="962.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="630.000000" y="667.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="694.000000" y="816.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="496.000000" y="973.000000" width="396.000000" height="223.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="694.000000" y="962.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.left2.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="80.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="144.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.left2.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="268.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="332.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="container.right.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="536.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="600.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="724.000000" y="1008.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="788.000000" y="1157.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 466.000000 156.000000 C 466.000000 194.000000 466.000000 268.100000 466.000000 320.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /></g><g id="container.left2.(root -&gt; inner.left2)[0]"><path d="M 184.231278 823.151056 C 152.272000 869.900000 144.000000 955.600000 144.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="148.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.left2.(root -&gt; inner.right)[0]"><path d="M 291.768722 823.151056 C 323.728000 869.900000 332.000000 955.600000 332.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="328.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.right.(root -&gt; inner.left2)[0]"><path d="M 640.231278 823.151056 C 608.272000 869.900000 600.000000 955.600000 600.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="604.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 747.768722 823.151056 C 779.728000 869.900000 788.000000 955.600000 788.000000 1004.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="784.000000" y="915.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.(root -&gt; left2.root)[0]"><path d="M 400.287338 441.129346 C 270.800000 519.219298 238.000000 613.100000 238.000000 663.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="270.500000" y="525.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to left2 container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 531.712662 441.129346 C 661.200000 519.219298 694.000000 613.100000 694.000000 663.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3641463008)" /><text x="661.000000" y="525.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to right container root</text></g><mask id="3641463008" maskUnits="userSpaceOnUse" x="-2" y="-2" width="936" height="1262">
 <rect x="-2" y="-2" width="936" height="1262" fill="white"></rect>
 <rect x="106.000000" y="899.000000" width="84" height="21" fill="black"></rect>
 <rect x="285.000000" y="899.000000" width="86" height="21" fill="black"></rect>
@@ -59,4 +39,4 @@
 <rect x="741.000000" y="899.000000" width="86" height="21" fill="black"></rect>
 <rect x="199.000000" y="509.000000" width="143" height="21" fill="black"></rect>
 <rect x="588.000000" y="509.000000" width="146" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg b/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg
index 5e4de85c2..999803c45 100644
--- a/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1076" height="1357" viewBox="10 10 1076 1357"><rect x="10.000000" y="10.000000" width="1076.000000" height="1357.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1076 1357"><svg id="d2-svg" width="1076" height="1357" viewBox="10 10 1076 1357"><rect x="10.000000" y="10.000000" width="1076.000000" height="1357.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="204.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="268.000000" y="161.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container"><g class="shape" ><rect x="12.000000" y="241.000000" width="1072.000000" height="1124.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="548.000000" y="274.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="204.000000" y="291.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="268.000000" y="440.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2"><g class="shape" ><rect x="62.000000" y="621.000000" width="476.000000" height="694.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="300.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">left2</text></g><g id="container.right"><g class="shape" ><rect x="558.000000" y="621.000000" width="476.000000" height="694.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="796.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">right</text></g><g id="container.left2.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="183.000000" y="671.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="247.000000" y="820.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2.inner"><g class="shape" ><rect x="112.000000" y="1011.000000" width="376.000000" height="254.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="300.000000" y="1036.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="679.000000" y="671.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="743.000000" y="820.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="608.000000" y="1011.000000" width="376.000000" height="254.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="796.000000" y="1036.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.left2.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="162.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="226.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.left2.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="310.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="374.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="container.right.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="658.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="722.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="806.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="870.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 268.666667 168.000000 L 268.666667 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /></g><g id="container.left2.(root -&gt; inner.left2)[0]"><path d="M 226.000000 827.000000 L 226.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="226.000000" y="949.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.left2.(root -&gt; inner.right)[0]"><path d="M 268.666667 827.000000 L 268.666667 855.000000 S 268.666667 865.000000 278.666667 865.000000 L 312.000000 865.000000 S 322.000000 865.000000 322.000000 875.000000 L 322.000000 956.000000 S 322.000000 966.000000 332.000000 966.000000 L 364.000000 966.000000 S 374.000000 966.000000 374.000000 976.000000 L 374.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="322.000000" y="948.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.right.(root -&gt; inner.left2)[0]"><path d="M 722.000000 827.000000 L 722.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="722.000000" y="949.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 764.666667 827.000000 L 764.666667 855.000000 S 764.666667 865.000000 774.666667 865.000000 L 808.000000 865.000000 S 818.000000 865.000000 818.000000 875.000000 L 818.000000 956.000000 S 818.000000 966.000000 828.000000 966.000000 L 860.000000 966.000000 S 870.000000 966.000000 870.000000 976.000000 L 870.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="818.000000" y="948.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.(root -&gt; left2.root)[0]"><path d="M 247.333333 447.000000 L 247.333333 667.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="247.500000" y="564.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to left2 container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 290.000000 447.000000 L 290.000000 475.000000 S 290.000000 485.000000 300.000000 485.000000 L 733.333333 485.000000 S 743.333333 485.000000 743.333333 495.000000 L 743.333333 667.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="590.000000" y="491.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to right container root</text></g><mask id="2668219750" maskUnits="userSpaceOnUse" x="10" y="10" width="1076" height="1357">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="204.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="268.000000" y="161.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container"><g class="shape" ><rect x="12.000000" y="241.000000" width="1072.000000" height="1124.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="548.000000" y="274.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="204.000000" y="291.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="268.000000" y="440.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2"><g class="shape" ><rect x="62.000000" y="621.000000" width="476.000000" height="694.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="300.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">left2</text></g><g id="container.right"><g class="shape" ><rect x="558.000000" y="621.000000" width="476.000000" height="694.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="796.000000" y="650.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">right</text></g><g id="container.left2.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="183.000000" y="671.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="247.000000" y="820.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.left2.inner"><g class="shape" ><rect x="112.000000" y="1011.000000" width="376.000000" height="254.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="300.000000" y="1036.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="679.000000" y="671.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="743.000000" y="820.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="608.000000" y="1011.000000" width="376.000000" height="254.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="796.000000" y="1036.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">inner</text></g><g id="container.left2.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="162.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="226.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.left2.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="310.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="374.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="container.right.inner.left2"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="658.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="722.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">left2</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="806.000000" y="1061.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="870.000000" y="1210.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 268.666667 168.000000 L 268.666667 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /></g><g id="container.left2.(root -&gt; inner.left2)[0]"><path d="M 226.000000 827.000000 L 226.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="226.000000" y="949.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.left2.(root -&gt; inner.right)[0]"><path d="M 268.666667 827.000000 L 268.666667 855.000000 S 268.666667 865.000000 278.666667 865.000000 L 312.000000 865.000000 S 322.000000 865.000000 322.000000 875.000000 L 322.000000 956.000000 S 322.000000 966.000000 332.000000 966.000000 L 364.000000 966.000000 S 374.000000 966.000000 374.000000 976.000000 L 374.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="322.000000" y="948.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.right.(root -&gt; inner.left2)[0]"><path d="M 722.000000 827.000000 L 722.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="722.000000" y="949.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner left2</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 764.666667 827.000000 L 764.666667 855.000000 S 764.666667 865.000000 774.666667 865.000000 L 808.000000 865.000000 S 818.000000 865.000000 818.000000 875.000000 L 818.000000 956.000000 S 818.000000 966.000000 828.000000 966.000000 L 860.000000 966.000000 S 870.000000 966.000000 870.000000 976.000000 L 870.000000 1057.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="818.000000" y="948.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to inner right</text></g><g id="container.(root -&gt; left2.root)[0]"><path d="M 247.333333 447.000000 L 247.333333 667.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="247.500000" y="564.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to left2 container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 290.000000 447.000000 L 290.000000 475.000000 S 290.000000 485.000000 300.000000 485.000000 L 733.333333 485.000000 S 743.333333 485.000000 743.333333 495.000000 L 743.333333 667.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2668219750)" /><text x="590.000000" y="491.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to right container root</text></g><mask id="2668219750" maskUnits="userSpaceOnUse" x="10" y="10" width="1076" height="1357">
 <rect x="10" y="10" width="1076" height="1357" fill="white"></rect>
 <rect x="184.000000" y="933.000000" width="84" height="21" fill="black"></rect>
 <rect x="279.000000" y="932.000000" width="86" height="21" fill="black"></rect>
@@ -59,4 +39,4 @@
 <rect x="775.000000" y="932.000000" width="86" height="21" fill="black"></rect>
 <rect x="176.000000" y="548.000000" width="143" height="21" fill="black"></rect>
 <rect x="517.000000" y="475.000000" width="146" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/p/dagre/sketch.exp.svg b/e2etests/testdata/stable/p/dagre/sketch.exp.svg
index 3609dbb28..b51cdf56d 100644
--- a/e2etests/testdata/stable/p/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1861" height="360" viewBox="-2 -2 1861 360"><rect x="-2.000000" y="-2.000000" width="1861.000000" height="360.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1861 360"><svg id="d2-svg" width="1861" height="360" viewBox="-2 -2 1861 360"><rect x="-2.000000" y="-2.000000" width="1861.000000" height="360.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -793,4 +773,4 @@ blank.) Normal paragraphs should not be indented with spaces or tabs.</p>
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="902.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="928.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="902.000000" y="290.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="928.500000" y="328.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 928.500000 68.000000 C 928.500000 106.000000 928.500000 126.000000 928.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3972082368)" /></g><g id="(md -&gt; b)[0]"><path d="M 928.500000 192.000000 C 928.500000 230.000000 928.500000 250.000000 928.500000 286.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3972082368)" /></g><mask id="3972082368" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1861" height="360">
 <rect x="-2" y="-2" width="1861" height="360" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/p/elk/sketch.exp.svg b/e2etests/testdata/stable/p/elk/sketch.exp.svg
index 5dcc6a66d..17c761fe9 100644
--- a/e2etests/testdata/stable/p/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1861" height="300" viewBox="10 10 1861 300"><rect x="10.000000" y="10.000000" width="1861.000000" height="300.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1861 300"><svg id="d2-svg" width="1861" height="300" viewBox="10 10 1861 300"><rect x="10.000000" y="10.000000" width="1861.000000" height="300.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -793,4 +773,4 @@ blank.) Normal paragraphs should not be indented with spaces or tabs.</p>
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="914.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="940.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="914.000000" y="242.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="940.500000" y="280.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 940.500000 80.000000 L 940.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567837245)" /></g><g id="(md -&gt; b)[0]"><path d="M 940.500000 174.000000 L 940.500000 238.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3567837245)" /></g><mask id="3567837245" maskUnits="userSpaceOnUse" x="10" y="10" width="1861" height="300">
 <rect x="10" y="10" width="1861" height="300" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/people/dagre/sketch.exp.svg b/e2etests/testdata/stable/people/dagre/sketch.exp.svg
index 79609b237..68618b293 100644
--- a/e2etests/testdata/stable/people/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/people/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3353" height="584" viewBox="-2 -2 3353 584"><rect x="-2.000000" y="-2.000000" width="3353.000000" height="584.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3353 584"><svg id="d2-svg" width="3353" height="584" viewBox="-2 -2 3353 584"><rect x="-2.000000" y="-2.000000" width="3353.000000" height="584.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><path d="M 1126 323 H 1077 V 322 C 1077 311 1082 301 1091 296 C 1086 292 1083 285 1083 278 C 1083 267 1091 257 1101 257 C 1111 257 1119 267 1119 278 C 1119 285 1116 291 1112 295 C 1120 300 1126 310 1126 321 V 322 H 1126 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1101.500000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><path d="M 1250 323 H 1186 V 322 C 1186 311 1193 301 1204 296 C 1198 292 1194 285 1194 278 C 1194 267 1205 257 1218 257 C 1231 257 1242 267 1242 278 C 1242 285 1238 291 1232 295 C 1243 300 1250 310 1250 321 V 322 H 1250 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1218.000000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><path d="M 1399 323 H 1310 V 322 C 1310 311 1320 301 1335 296 C 1327 292 1322 285 1322 278 C 1322 267 1336 257 1354 257 C 1372 257 1387 267 1387 278 C 1387 285 1382 291 1373 295 C 1388 300 1398 310 1398 321 V 322 H 1399 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1354.500000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><path d="M 1601 338 H 1459 V 337 C 1459 321 1475 306 1499 299 C 1486 293 1478 284 1478 274 C 1478 257 1501 243 1530 243 C 1559 243 1582 257 1582 274 C 1582 284 1574 293 1560 299 C 1585 306 1600 321 1600 337 V 338 H 1601 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1530.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><path d="M 1906 372 H 1661 V 370 C 1661 342 1688 317 1730 305 C 1707 295 1693 279 1693 262 C 1693 233 1733 209 1783 209 C 1833 209 1873 233 1873 262 C 1873 279 1859 295 1836 305 C 1878 317 1905 342 1905 370 V 372 H 1906 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1783.500000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><path d="M 2419 441 H 1966 V 437 C 1966 385 2016 339 2094 317 C 2051 299 2025 269 2025 237 C 2025 183 2100 139 2192 139 C 2284 139 2359 183 2359 237 C 2359 269 2334 298 2290 317 C 2368 339 2418 386 2418 437 V 441 H 2419 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2192.500000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><path d="M 3349 580 H 2479 V 572 C 2479 473 2575 384 2725 341 C 2642 306 2592 250 2592 189 C 2592 85 2736 0 2913 0 C 3090 0 3234 85 3234 189 C 3234 250 3186 306 3102 342 C 3252 385 3348 474 3348 573 V 580 H 3349 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2914.000000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><path d="M 41 321 H 0 V 320 C 0 310 5 300 12 296 C 8 292 5 286 5 280 C 5 269 12 260 20 260 C 28 260 35 269 35 280 C 35 286 33 292 29 296 C 36 300 41 310 41 320 V 321 H 41 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="20.500000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><path d="M 165 321 H 101 V 320 C 101 310 108 300 119 296 C 113 292 109 286 109 280 C 109 269 120 260 133 260 C 146 260 157 269 157 280 C 157 286 153 292 147 296 C 158 300 165 310 165 320 V 321 H 165 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="133.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><path d="M 353 333 H 225 V 332 C 225 318 239 304 261 298 C 249 293 242 285 242 276 C 242 260 263 248 289 248 C 315 248 336 260 336 276 C 336 285 329 293 317 298 C 339 304 353 317 353 332 V 333 H 353 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="289.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><path d="M 925 461 H 413 V 456 C 413 398 469 345 558 320 C 509 300 480 267 480 231 C 480 170 564 120 669 120 C 773 120 858 170 858 231 C 858 267 830 300 780 321 C 868 346 925 399 925 457 V 461 H 925 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="669.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><path d="M 1017 418 H 985 V 414 C 985 370 989 331 994 312 C 991 297 989 272 989 245 C 989 199 994 162 1001 162 C 1008 162 1013 199 1013 245 C 1013 272 1011 297 1008 312 C 1014 331 1017 370 1017 414 V 417 H 1017 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1001.000000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="3491011304" maskUnits="userSpaceOnUse" x="-2" y="-2" width="3353" height="584">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><path d="M 1126 323 H 1077 V 322 C 1077 311 1082 301 1091 296 C 1086 292 1083 285 1083 278 C 1083 267 1091 257 1101 257 C 1111 257 1119 267 1119 278 C 1119 285 1116 291 1112 295 C 1120 300 1126 310 1126 321 V 322 H 1126 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1101.500000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><path d="M 1250 323 H 1186 V 322 C 1186 311 1193 301 1204 296 C 1198 292 1194 285 1194 278 C 1194 267 1205 257 1218 257 C 1231 257 1242 267 1242 278 C 1242 285 1238 291 1232 295 C 1243 300 1250 310 1250 321 V 322 H 1250 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1218.000000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><path d="M 1399 323 H 1310 V 322 C 1310 311 1320 301 1335 296 C 1327 292 1322 285 1322 278 C 1322 267 1336 257 1354 257 C 1372 257 1387 267 1387 278 C 1387 285 1382 291 1373 295 C 1388 300 1398 310 1398 321 V 322 H 1399 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1354.500000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><path d="M 1601 338 H 1459 V 337 C 1459 321 1475 306 1499 299 C 1486 293 1478 284 1478 274 C 1478 257 1501 243 1530 243 C 1559 243 1582 257 1582 274 C 1582 284 1574 293 1560 299 C 1585 306 1600 321 1600 337 V 338 H 1601 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1530.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><path d="M 1906 372 H 1661 V 370 C 1661 342 1688 317 1730 305 C 1707 295 1693 279 1693 262 C 1693 233 1733 209 1783 209 C 1833 209 1873 233 1873 262 C 1873 279 1859 295 1836 305 C 1878 317 1905 342 1905 370 V 372 H 1906 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1783.500000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><path d="M 2419 441 H 1966 V 437 C 1966 385 2016 339 2094 317 C 2051 299 2025 269 2025 237 C 2025 183 2100 139 2192 139 C 2284 139 2359 183 2359 237 C 2359 269 2334 298 2290 317 C 2368 339 2418 386 2418 437 V 441 H 2419 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2192.500000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><path d="M 3349 580 H 2479 V 572 C 2479 473 2575 384 2725 341 C 2642 306 2592 250 2592 189 C 2592 85 2736 0 2913 0 C 3090 0 3234 85 3234 189 C 3234 250 3186 306 3102 342 C 3252 385 3348 474 3348 573 V 580 H 3349 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2914.000000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><path d="M 41 321 H 0 V 320 C 0 310 5 300 12 296 C 8 292 5 286 5 280 C 5 269 12 260 20 260 C 28 260 35 269 35 280 C 35 286 33 292 29 296 C 36 300 41 310 41 320 V 321 H 41 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="20.500000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><path d="M 165 321 H 101 V 320 C 101 310 108 300 119 296 C 113 292 109 286 109 280 C 109 269 120 260 133 260 C 146 260 157 269 157 280 C 157 286 153 292 147 296 C 158 300 165 310 165 320 V 321 H 165 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="133.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><path d="M 353 333 H 225 V 332 C 225 318 239 304 261 298 C 249 293 242 285 242 276 C 242 260 263 248 289 248 C 315 248 336 260 336 276 C 336 285 329 293 317 298 C 339 304 353 317 353 332 V 333 H 353 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="289.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><path d="M 925 461 H 413 V 456 C 413 398 469 345 558 320 C 509 300 480 267 480 231 C 480 170 564 120 669 120 C 773 120 858 170 858 231 C 858 267 830 300 780 321 C 868 346 925 399 925 457 V 461 H 925 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="669.000000" y="296.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><path d="M 1017 418 H 985 V 414 C 985 370 989 331 994 312 C 991 297 989 272 989 245 C 989 199 994 162 1001 162 C 1008 162 1013 199 1013 245 C 1013 272 1011 297 1008 312 C 1014 331 1017 370 1017 414 V 417 H 1017 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1001.000000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="3491011304" maskUnits="userSpaceOnUse" x="-2" y="-2" width="3353" height="584">
 <rect x="-2" y="-2" width="3353" height="584" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/people/elk/sketch.exp.svg b/e2etests/testdata/stable/people/elk/sketch.exp.svg
index 1b809057d..13f759143 100644
--- a/e2etests/testdata/stable/people/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/people/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2913" height="584" viewBox="10 10 2913 584"><rect x="10.000000" y="10.000000" width="2913.000000" height="584.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2913 584"><svg id="d2-svg" width="2913" height="584" viewBox="10 10 2913 584"><rect x="10.000000" y="10.000000" width="2913.000000" height="584.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><path d="M 61 335 H 12 V 334 C 12 323 17 313 26 308 C 21 304 18 297 18 290 C 18 279 26 269 36 269 C 46 269 54 279 54 290 C 54 297 51 303 47 307 C 55 312 61 322 61 333 V 334 H 61 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="36.500000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><path d="M 145 335 H 81 V 334 C 81 323 88 313 99 308 C 93 304 89 297 89 290 C 89 279 100 269 113 269 C 126 269 137 279 137 290 C 137 297 133 303 127 307 C 138 312 145 322 145 333 V 334 H 145 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="113.000000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><path d="M 254 335 H 165 V 334 C 165 323 175 313 190 308 C 182 304 177 297 177 290 C 177 279 191 269 209 269 C 227 269 242 279 242 290 C 242 297 237 303 228 307 C 243 312 253 322 253 333 V 334 H 254 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="209.500000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><path d="M 416 349 H 274 V 348 C 274 332 290 317 314 310 C 301 304 293 295 293 285 C 293 268 316 254 345 254 C 374 254 397 268 397 285 C 397 295 389 304 375 310 C 400 317 415 332 415 348 V 349 H 416 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="345.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><path d="M 681 383 H 436 V 381 C 436 353 463 328 505 316 C 482 306 468 290 468 273 C 468 244 508 220 558 220 C 608 220 648 244 648 273 C 648 290 634 306 611 316 C 653 328 680 353 680 381 V 383 H 681 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="558.500000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><path d="M 1154 453 H 701 V 449 C 701 397 751 351 829 329 C 786 311 760 281 760 249 C 760 195 835 151 927 151 C 1019 151 1094 195 1094 249 C 1094 281 1069 310 1025 329 C 1103 351 1153 398 1153 449 V 453 H 1154 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="927.500000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><path d="M 2044 592 H 1174 V 584 C 1174 485 1270 396 1420 353 C 1337 318 1287 262 1287 201 C 1287 97 1431 12 1608 12 C 1785 12 1929 97 1929 201 C 1929 262 1881 318 1797 354 C 1947 397 2043 486 2043 585 V 592 H 2044 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1609.000000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><path d="M 2105 332 H 2064 V 331 C 2064 321 2069 311 2076 307 C 2072 303 2069 297 2069 291 C 2069 280 2076 271 2084 271 C 2092 271 2099 280 2099 291 C 2099 297 2097 303 2093 307 C 2100 311 2105 321 2105 331 V 332 H 2105 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2084.500000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><path d="M 2189 332 H 2125 V 331 C 2125 321 2132 311 2143 307 C 2137 303 2133 297 2133 291 C 2133 280 2144 271 2157 271 C 2170 271 2181 280 2181 291 C 2181 297 2177 303 2171 307 C 2182 311 2189 321 2189 331 V 332 H 2189 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2157.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><path d="M 2337 344 H 2209 V 343 C 2209 329 2223 315 2245 309 C 2233 304 2226 296 2226 287 C 2226 271 2247 259 2273 259 C 2299 259 2320 271 2320 287 C 2320 296 2313 304 2301 309 C 2323 315 2337 328 2337 343 V 344 H 2337 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2273.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><path d="M 2869 472 H 2357 V 467 C 2357 409 2413 356 2502 331 C 2453 311 2424 278 2424 242 C 2424 181 2508 131 2613 131 C 2717 131 2802 181 2802 242 C 2802 278 2774 311 2724 332 C 2812 357 2869 410 2869 468 V 472 H 2869 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2613.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><path d="M 2921 430 H 2889 V 426 C 2889 382 2893 343 2898 324 C 2895 309 2893 284 2893 257 C 2893 211 2898 174 2905 174 C 2912 174 2917 211 2917 257 C 2917 284 2915 309 2912 324 C 2918 343 2921 382 2921 426 V 429 H 2921 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2905.000000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="2059047770" maskUnits="userSpaceOnUse" x="10" y="10" width="2913" height="584">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><path d="M 61 335 H 12 V 334 C 12 323 17 313 26 308 C 21 304 18 297 18 290 C 18 279 26 269 36 269 C 46 269 54 279 54 290 C 54 297 51 303 47 307 C 55 312 61 322 61 333 V 334 H 61 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="36.500000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">-</text></g><g id="b"><g class="shape" ><path d="M 145 335 H 81 V 334 C 81 323 88 313 99 308 C 93 304 89 297 89 290 C 89 279 100 269 113 269 C 126 269 137 279 137 290 C 137 297 133 303 127 307 C 138 312 145 322 145 333 V 334 H 145 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="113.000000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--</text></g><g id="c"><g class="shape" ><path d="M 254 335 H 165 V 334 C 165 323 175 313 190 308 C 182 304 177 297 177 290 C 177 279 191 269 209 269 C 227 269 242 279 242 290 C 242 297 237 303 228 307 C 243 312 253 322 253 333 V 334 H 254 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="209.500000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----</text></g><g id="d"><g class="shape" ><path d="M 416 349 H 274 V 348 C 274 332 290 317 314 310 C 301 304 293 295 293 285 C 293 268 316 254 345 254 C 374 254 397 268 397 285 C 397 295 389 304 375 310 C 400 317 415 332 415 348 V 349 H 416 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="345.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------</text></g><g id="e"><g class="shape" ><path d="M 681 383 H 436 V 381 C 436 353 463 328 505 316 C 482 306 468 290 468 273 C 468 244 508 220 558 220 C 608 220 648 244 648 273 C 648 290 634 306 611 316 C 653 328 680 353 680 381 V 383 H 681 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="558.500000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------</text></g><g id="f"><g class="shape" ><path d="M 1154 453 H 701 V 449 C 701 397 751 351 829 329 C 786 311 760 281 760 249 C 760 195 835 151 927 151 C 1019 151 1094 195 1094 249 C 1094 281 1069 310 1025 329 C 1103 351 1153 398 1153 449 V 453 H 1154 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="927.500000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">--------------------------------</text></g><g id="g"><g class="shape" ><path d="M 2044 592 H 1174 V 584 C 1174 485 1270 396 1420 353 C 1337 318 1287 262 1287 201 C 1287 97 1431 12 1608 12 C 1785 12 1929 97 1929 201 C 1929 262 1881 318 1797 354 C 1947 397 2043 486 2043 585 V 592 H 2044 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="1609.000000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">----------------------------------------------------------------</text></g><g id="1"><g class="shape" ><path d="M 2105 332 H 2064 V 331 C 2064 321 2069 311 2076 307 C 2072 303 2069 297 2069 291 C 2069 280 2076 271 2084 271 C 2092 271 2099 280 2099 291 C 2099 297 2097 303 2093 307 C 2100 311 2105 321 2105 331 V 332 H 2105 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2084.500000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">1</text></g><g id="2"><g class="shape" ><path d="M 2189 332 H 2125 V 331 C 2125 321 2132 311 2143 307 C 2137 303 2133 297 2133 291 C 2133 280 2144 271 2157 271 C 2170 271 2181 280 2181 291 C 2181 297 2177 303 2171 307 C 2182 311 2189 321 2189 331 V 332 H 2189 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2157.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">2</text></g><g id="3"><g class="shape" ><path d="M 2337 344 H 2209 V 343 C 2209 329 2223 315 2245 309 C 2233 304 2226 296 2226 287 C 2226 271 2247 259 2273 259 C 2299 259 2320 271 2320 287 C 2320 296 2313 304 2301 309 C 2323 315 2337 328 2337 343 V 344 H 2337 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2273.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">3</text></g><g id="4"><g class="shape" ><path d="M 2869 472 H 2357 V 467 C 2357 409 2413 356 2502 331 C 2453 311 2424 278 2424 242 C 2424 181 2508 131 2613 131 C 2717 131 2802 181 2802 242 C 2802 278 2774 311 2724 332 C 2812 357 2869 410 2869 468 V 472 H 2869 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2613.000000" y="307.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">4</text></g><g id="5"><g class="shape" ><path d="M 2921 430 H 2889 V 426 C 2889 382 2893 343 2898 324 C 2895 309 2893 284 2893 257 C 2893 211 2898 174 2905 174 C 2912 174 2917 211 2917 257 C 2917 284 2915 309 2912 324 C 2918 343 2921 382 2921 426 V 429 H 2921 Z" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="2905.000000" y="307.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">5</text></g><mask id="2059047770" maskUnits="userSpaceOnUse" x="10" y="10" width="2913" height="584">
 <rect x="10" y="10" width="2913" height="584" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/pre/dagre/sketch.exp.svg b/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
index 263e6437b..7db75ae25 100644
--- a/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="606" height="506" viewBox="-2 -2 606 506"><rect x="-2.000000" y="-2.000000" width="606.000000" height="506.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 606 506"><svg id="d2-svg" width="606" height="506" viewBox="-2 -2 606 506"><rect x="-2.000000" y="-2.000000" width="606.000000" height="506.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -803,4 +783,4 @@ end tell
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="275.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="301.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="275.000000" y="436.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="301.500000" y="474.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 301.000000 68.000000 C 301.000000 106.000000 301.000000 126.000000 301.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2035020258)" /></g><g id="(md -&gt; b)[0]"><path d="M 301.000000 338.000000 C 301.000000 376.000000 301.000000 396.000000 301.000000 432.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2035020258)" /></g><mask id="2035020258" maskUnits="userSpaceOnUse" x="-2" y="-2" width="606" height="506">
 <rect x="-2" y="-2" width="606" height="506" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/pre/elk/sketch.exp.svg b/e2etests/testdata/stable/pre/elk/sketch.exp.svg
index 0684ffb4f..a655c3122 100644
--- a/e2etests/testdata/stable/pre/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="606" height="446" viewBox="10 10 606 446"><rect x="10.000000" y="10.000000" width="606.000000" height="446.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 606 446"><svg id="d2-svg" width="606" height="446" viewBox="10 10 606 446"><rect x="10.000000" y="10.000000" width="606.000000" height="446.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -803,4 +783,4 @@ end tell
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="286.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="312.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="286.000000" y="388.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="312.500000" y="426.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 313.000000 80.000000 L 313.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#758350027)" /></g><g id="(md -&gt; b)[0]"><path d="M 313.000000 320.000000 L 313.000000 384.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#758350027)" /></g><mask id="758350027" maskUnits="userSpaceOnUse" x="10" y="10" width="606" height="446">
 <rect x="10" y="10" width="606" height="446" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg b/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
index 9cf1a6360..c1314b79e 100644
--- a/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="278" height="236" viewBox="-2 -2 278 236"><rect x="-2.000000" y="-2.000000" width="278.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 278 236"><svg id="d2-svg" width="278" height="236" viewBox="-2 -2 278 236"><rect x="-2.000000" y="-2.000000" width="278.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="76.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="103.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="153.000000" y="0.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 54.699280 15.496998 C 74.333333 3.310345 81.000000 0.000000 83.000000 0.000000 C 85.000000 0.000000 87.666667 6.600000 89.666667 16.500000 C 91.666667 26.400000 91.666667 39.600000 89.666667 49.500000 C 87.666667 59.400000 74.333333 62.689655 56.398561 51.557727" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(x -&gt; x)[1]"><path d="M 54.791540 18.960589 C 85.000000 3.969925 95.000000 0.000000 98.000000 0.000000 C 101.000000 0.000000 105.000000 6.600000 108.000000 16.500000 C 111.000000 26.400000 111.000000 39.600000 108.000000 49.500000 C 105.000000 59.400000 85.000000 62.030075 56.583081 47.928446" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(x -&gt; y)[0]"><path d="M 26.500000 68.000000 C 26.500000 106.000000 36.350000 126.721967 73.043889 166.664168" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(z -&gt; y)[0]"><path d="M 179.000000 68.000000 C 179.000000 106.000000 169.200000 126.600000 132.715421 166.062912" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(z -&gt; z)[0]"><path d="M 206.775650 18.603197 C 235.133333 3.904712 244.550000 0.000000 247.375000 0.000000 C 250.200000 0.000000 253.966667 6.600000 256.791667 16.500000 C 259.616667 26.400000 259.616667 39.600000 256.791667 49.500000 C 253.966667 59.400000 235.133333 62.095288 208.551299 48.317166" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /><text x="259.500000" y="36.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="1750644853" maskUnits="userSpaceOnUse" x="-2" y="-2" width="278" height="236">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="76.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="103.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="153.000000" y="0.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="179.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 54.699280 15.496998 C 74.333333 3.310345 81.000000 0.000000 83.000000 0.000000 C 85.000000 0.000000 87.666667 6.600000 89.666667 16.500000 C 91.666667 26.400000 91.666667 39.600000 89.666667 49.500000 C 87.666667 59.400000 74.333333 62.689655 56.398561 51.557727" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(x -&gt; x)[1]"><path d="M 54.791540 18.960589 C 85.000000 3.969925 95.000000 0.000000 98.000000 0.000000 C 101.000000 0.000000 105.000000 6.600000 108.000000 16.500000 C 111.000000 26.400000 111.000000 39.600000 108.000000 49.500000 C 105.000000 59.400000 85.000000 62.030075 56.583081 47.928446" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(x -&gt; y)[0]"><path d="M 26.500000 68.000000 C 26.500000 106.000000 36.350000 126.721967 73.043889 166.664168" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(z -&gt; y)[0]"><path d="M 179.000000 68.000000 C 179.000000 106.000000 169.200000 126.600000 132.715421 166.062912" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /></g><g id="(z -&gt; z)[0]"><path d="M 206.775650 18.603197 C 235.133333 3.904712 244.550000 0.000000 247.375000 0.000000 C 250.200000 0.000000 253.966667 6.600000 256.791667 16.500000 C 259.616667 26.400000 259.616667 39.600000 256.791667 49.500000 C 253.966667 59.400000 235.133333 62.095288 208.551299 48.317166" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1750644853)" /><text x="259.500000" y="36.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="1750644853" maskUnits="userSpaceOnUse" x="-2" y="-2" width="278" height="236">
 <rect x="-2" y="-2" width="278" height="236" fill="white"></rect>
 <rect x="243.000000" y="20.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg b/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
index 12c7c5c5d..f7c9add21 100644
--- a/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="272" height="216" viewBox="12 10 272 216"><rect x="12.000000" y="10.000000" width="272.000000" height="216.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 272 216"><svg id="d2-svg" width="272" height="216" viewBox="12 10 272 216"><rect x="12.000000" y="10.000000" width="272.000000" height="216.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="72.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="98.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="80.000000" y="158.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="107.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="230.000000" y="12.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="256.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 38.400000 L 28.600000 38.400000 C 15.400000 38.400000 15.400000 51.600000 28.600000 51.600000 L 68.000000 51.600000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(x -&gt; x)[1]"><path d="M 70.000000 25.200000 L 22.000000 25.200000 S 12.000000 25.200000 12.000000 35.200000 L 12.000000 54.800000 S 12.000000 64.800000 22.000000 64.800000 L 68.000000 64.800000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(x -&gt; y)[0]"><path d="M 98.500000 80.000000 L 98.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(z -&gt; y)[0]"><path d="M 256.000000 80.000000 L 256.000000 108.000000 S 256.000000 118.000000 246.000000 118.000000 L 126.500000 118.000000 S 116.500000 118.000000 116.500000 128.000000 L 116.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(z -&gt; z)[0]"><path d="M 228.000000 34.000000 L 190.000000 34.000000 S 180.000000 34.000000 180.000000 44.000000 L 180.000000 46.000000 S 180.000000 56.000000 190.000000 56.000000 L 226.000000 56.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /><text x="180.500000" y="51.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="874627929" maskUnits="userSpaceOnUse" x="12" y="10" width="272" height="216">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="72.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="98.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="80.000000" y="158.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="107.000000" y="196.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="230.000000" y="12.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="256.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 38.400000 L 28.600000 38.400000 C 15.400000 38.400000 15.400000 51.600000 28.600000 51.600000 L 68.000000 51.600000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(x -&gt; x)[1]"><path d="M 70.000000 25.200000 L 22.000000 25.200000 S 12.000000 25.200000 12.000000 35.200000 L 12.000000 54.800000 S 12.000000 64.800000 22.000000 64.800000 L 68.000000 64.800000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(x -&gt; y)[0]"><path d="M 98.500000 80.000000 L 98.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(z -&gt; y)[0]"><path d="M 256.000000 80.000000 L 256.000000 108.000000 S 256.000000 118.000000 246.000000 118.000000 L 126.500000 118.000000 S 116.500000 118.000000 116.500000 128.000000 L 116.500000 154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /></g><g id="(z -&gt; z)[0]"><path d="M 228.000000 34.000000 L 190.000000 34.000000 S 180.000000 34.000000 180.000000 44.000000 L 180.000000 46.000000 S 180.000000 56.000000 190.000000 56.000000 L 226.000000 56.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#874627929)" /><text x="180.500000" y="51.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="874627929" maskUnits="userSpaceOnUse" x="12" y="10" width="272" height="216">
 <rect x="12" y="10" width="272" height="216" fill="white"></rect>
 <rect x="164.000000" y="35.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence-inter-span-self/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence-inter-span-self/dagre/sketch.exp.svg
index a3b20de6a..2f14ea83e 100644
--- a/e2etests/testdata/stable/sequence-inter-span-self/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence-inter-span-self/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="348" viewBox="10 50 254 348"><rect x="10.000000" y="50.000000" width="254.000000" height="348.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 254 348"><svg id="d2-svg" width="254" height="348" viewBox="10 50 254 348"><rect x="10.000000" y="50.000000" width="254.000000" height="348.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,29 +24,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="a.sp1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.sp2"><g class="shape" ><rect x="56.000000" y="293.000000" width="12.000000" height="45.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="(a.sp1 -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">foo</text></g><g id="a.(sp1 -&gt; sp2)[0]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="142.000000" y="286.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">redirect</text></g><g id="(a.sp2 -&gt; b)[0]"><path d="M 70.000000 328.000000 L 208.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">bar</text></g><mask id="3457748074" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="348">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="a.sp1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.sp2"><g class="shape" ><rect x="56.000000" y="293.000000" width="12.000000" height="45.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="(a.sp1 -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">foo</text></g><g id="a.(sp1 -&gt; sp2)[0]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="142.000000" y="286.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">redirect</text></g><g id="(a.sp2 -&gt; b)[0]"><path d="M 70.000000 328.000000 L 208.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">bar</text></g><mask id="3457748074" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="348">
 <rect x="10" y="50" width="254" height="348" fill="white"></rect>
 <rect x="130.000000" y="178.000000" width="21" height="21" fill="black"></rect>
 <rect x="116.000000" y="270.000000" width="52" height="21" fill="black"></rect>
 <rect x="128.000000" y="318.000000" width="25" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence-inter-span-self/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence-inter-span-self/elk/sketch.exp.svg
index a3b20de6a..2f14ea83e 100644
--- a/e2etests/testdata/stable/sequence-inter-span-self/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence-inter-span-self/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="254" height="348" viewBox="10 50 254 348"><rect x="10.000000" y="50.000000" width="254.000000" height="348.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 254 348"><svg id="d2-svg" width="254" height="348" viewBox="10 50 254 348"><rect x="10.000000" y="50.000000" width="254.000000" height="348.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,29 +24,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="a.sp1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.sp2"><g class="shape" ><rect x="56.000000" y="293.000000" width="12.000000" height="45.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="(a.sp1 -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">foo</text></g><g id="a.(sp1 -&gt; sp2)[0]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="142.000000" y="286.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">redirect</text></g><g id="(a.sp2 -&gt; b)[0]"><path d="M 70.000000 328.000000 L 208.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">bar</text></g><mask id="3457748074" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="348">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">A</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">B</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 397.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3457748074)" /></g><g id="a.sp1"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.sp2"><g class="shape" ><rect x="56.000000" y="293.000000" width="12.000000" height="45.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="(a.sp1 -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">foo</text></g><g id="a.(sp1 -&gt; sp2)[0]"><path d="M 70.000000 258.000000 L 132.000000 258.000000 S 142.000000 258.000000 142.000000 268.000000 L 142.000000 293.000000 S 142.000000 303.000000 132.000000 303.000000 L 72.000000 303.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="142.000000" y="286.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">redirect</text></g><g id="(a.sp2 -&gt; b)[0]"><path d="M 70.000000 328.000000 L 208.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3457748074)" /><text x="140.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">bar</text></g><mask id="3457748074" maskUnits="userSpaceOnUse" x="10" y="50" width="254" height="348">
 <rect x="10" y="50" width="254" height="348" fill="white"></rect>
 <rect x="130.000000" y="178.000000" width="21" height="21" fill="black"></rect>
 <rect x="116.000000" y="270.000000" width="52" height="21" fill="black"></rect>
 <rect x="128.000000" y="318.000000" width="25" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg
index e64848e93..dada8b28a 100644
--- a/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2238" height="718" viewBox="10 50 2238 718"><rect x="10.000000" y="50.000000" width="2238.000000" height="718.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2238 718"><svg id="d2-svg" width="2238" height="718" viewBox="10 50 2238 718"><rect x="10.000000" y="50.000000" width="2238.000000" height="718.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,31 +24,11 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="212.000000" width="427.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="580.000000" y="52.000000" width="117.000000" height="226.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="638.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="638.500000" dy="0.000000">an</tspan><tspan x="638.500000" dy="16.454545">actor</tspan><tspan x="638.500000" dy="16.454545">with</tspan><tspan x="638.500000" dy="16.454545">a</tspan><tspan x="638.500000" dy="16.454545">really</tspan><tspan x="638.500000" dy="16.454545">long</tspan><tspan x="638.500000" dy="16.454545">label</tspan><tspan x="638.500000" dy="16.454545">that</tspan><tspan x="638.500000" dy="16.454545">will</tspan><tspan x="638.500000" dy="16.454545">break</tspan><tspan x="638.500000" dy="16.454545">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1001.000000" y="212.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1051.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">simple</text></g><g id="e"><g class="shape" ><rect x="1442.000000" y="212.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1502.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a short one</text></g><g id="b"><g class="shape" ><rect x="1602.000000" y="212.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1653.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">far away</text></g><g id="f"><g class="shape" ><rect x="1745.000000" y="212.000000" width="501.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1995.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 225.500000 280.000000 L 225.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(c -- )[0]"><path d="M 638.500000 280.000000 L 638.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(d -- )[0]"><path d="M 1051.000000 280.000000 L 1051.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(e -- )[0]"><path d="M 1502.000000 280.000000 L 1502.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(b -- )[0]"><path d="M 1653.500000 280.000000 L 1653.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(f -- )[0]"><path d="M 1995.500000 280.000000 L 1995.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 227.500000 348.000000 L 1649.500000 348.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="940.000000" y="354.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; b)[1]"><path d="M 227.500000 418.000000 L 1649.500000 418.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="939.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 640.500000 488.000000 L 1047.000000 488.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="845.000000" y="494.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; d)[0]"><path d="M 227.500000 558.000000 L 1047.000000 558.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="638.500000" y="564.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">this should span many actors lifelines so we know how it will look like when redering a long label over many actors</text></g><g id="(d -&gt; e)[0]"><path d="M 1053.000000 628.000000 L 1498.000000 628.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="1276.500000" y="634.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 227.500000 698.000000 L 1991.500000 698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /></g><mask id="3196550992" maskUnits="userSpaceOnUse" x="10" y="50" width="2238" height="718">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="212.000000" width="427.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="580.000000" y="52.000000" width="117.000000" height="226.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="638.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="638.500000" dy="0.000000">an</tspan><tspan x="638.500000" dy="16.454545">actor</tspan><tspan x="638.500000" dy="16.454545">with</tspan><tspan x="638.500000" dy="16.454545">a</tspan><tspan x="638.500000" dy="16.454545">really</tspan><tspan x="638.500000" dy="16.454545">long</tspan><tspan x="638.500000" dy="16.454545">label</tspan><tspan x="638.500000" dy="16.454545">that</tspan><tspan x="638.500000" dy="16.454545">will</tspan><tspan x="638.500000" dy="16.454545">break</tspan><tspan x="638.500000" dy="16.454545">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1001.000000" y="212.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1051.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">simple</text></g><g id="e"><g class="shape" ><rect x="1442.000000" y="212.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1502.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a short one</text></g><g id="b"><g class="shape" ><rect x="1602.000000" y="212.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1653.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">far away</text></g><g id="f"><g class="shape" ><rect x="1745.000000" y="212.000000" width="501.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1995.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 225.500000 280.000000 L 225.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(c -- )[0]"><path d="M 638.500000 280.000000 L 638.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(d -- )[0]"><path d="M 1051.000000 280.000000 L 1051.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(e -- )[0]"><path d="M 1502.000000 280.000000 L 1502.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(b -- )[0]"><path d="M 1653.500000 280.000000 L 1653.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(f -- )[0]"><path d="M 1995.500000 280.000000 L 1995.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 227.500000 348.000000 L 1649.500000 348.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="940.000000" y="354.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; b)[1]"><path d="M 227.500000 418.000000 L 1649.500000 418.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="939.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 640.500000 488.000000 L 1047.000000 488.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="845.000000" y="494.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; d)[0]"><path d="M 227.500000 558.000000 L 1047.000000 558.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="638.500000" y="564.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">this should span many actors lifelines so we know how it will look like when redering a long label over many actors</text></g><g id="(d -&gt; e)[0]"><path d="M 1053.000000 628.000000 L 1498.000000 628.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="1276.500000" y="634.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 227.500000 698.000000 L 1991.500000 698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /></g><mask id="3196550992" maskUnits="userSpaceOnUse" x="10" y="50" width="2238" height="718">
 <rect x="10" y="50" width="2238" height="718" fill="white"></rect>
 <rect x="922.000000" y="338.000000" width="36" height="21" fill="black"></rect>
 <rect x="734.000000" y="408.000000" width="411" height="21" fill="black"></rect>
 <rect x="827.000000" y="478.000000" width="36" height="21" fill="black"></rect>
 <rect x="266.000000" y="548.000000" width="745" height="21" fill="black"></rect>
 <rect x="1071.000000" y="618.000000" width="411" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg
index e64848e93..dada8b28a 100644
--- a/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2238" height="718" viewBox="10 50 2238 718"><rect x="10.000000" y="50.000000" width="2238.000000" height="718.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2238 718"><svg id="d2-svg" width="2238" height="718" viewBox="10 50 2238 718"><rect x="10.000000" y="50.000000" width="2238.000000" height="718.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,31 +24,11 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="212.000000" width="427.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="580.000000" y="52.000000" width="117.000000" height="226.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="638.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="638.500000" dy="0.000000">an</tspan><tspan x="638.500000" dy="16.454545">actor</tspan><tspan x="638.500000" dy="16.454545">with</tspan><tspan x="638.500000" dy="16.454545">a</tspan><tspan x="638.500000" dy="16.454545">really</tspan><tspan x="638.500000" dy="16.454545">long</tspan><tspan x="638.500000" dy="16.454545">label</tspan><tspan x="638.500000" dy="16.454545">that</tspan><tspan x="638.500000" dy="16.454545">will</tspan><tspan x="638.500000" dy="16.454545">break</tspan><tspan x="638.500000" dy="16.454545">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1001.000000" y="212.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1051.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">simple</text></g><g id="e"><g class="shape" ><rect x="1442.000000" y="212.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1502.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a short one</text></g><g id="b"><g class="shape" ><rect x="1602.000000" y="212.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1653.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">far away</text></g><g id="f"><g class="shape" ><rect x="1745.000000" y="212.000000" width="501.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1995.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 225.500000 280.000000 L 225.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(c -- )[0]"><path d="M 638.500000 280.000000 L 638.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(d -- )[0]"><path d="M 1051.000000 280.000000 L 1051.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(e -- )[0]"><path d="M 1502.000000 280.000000 L 1502.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(b -- )[0]"><path d="M 1653.500000 280.000000 L 1653.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(f -- )[0]"><path d="M 1995.500000 280.000000 L 1995.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 227.500000 348.000000 L 1649.500000 348.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="940.000000" y="354.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; b)[1]"><path d="M 227.500000 418.000000 L 1649.500000 418.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="939.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 640.500000 488.000000 L 1047.000000 488.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="845.000000" y="494.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; d)[0]"><path d="M 227.500000 558.000000 L 1047.000000 558.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="638.500000" y="564.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">this should span many actors lifelines so we know how it will look like when redering a long label over many actors</text></g><g id="(d -&gt; e)[0]"><path d="M 1053.000000 628.000000 L 1498.000000 628.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="1276.500000" y="634.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 227.500000 698.000000 L 1991.500000 698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /></g><mask id="3196550992" maskUnits="userSpaceOnUse" x="10" y="50" width="2238" height="718">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="212.000000" width="427.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="225.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="580.000000" y="52.000000" width="117.000000" height="226.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="638.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="638.500000" dy="0.000000">an</tspan><tspan x="638.500000" dy="16.454545">actor</tspan><tspan x="638.500000" dy="16.454545">with</tspan><tspan x="638.500000" dy="16.454545">a</tspan><tspan x="638.500000" dy="16.454545">really</tspan><tspan x="638.500000" dy="16.454545">long</tspan><tspan x="638.500000" dy="16.454545">label</tspan><tspan x="638.500000" dy="16.454545">that</tspan><tspan x="638.500000" dy="16.454545">will</tspan><tspan x="638.500000" dy="16.454545">break</tspan><tspan x="638.500000" dy="16.454545">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1001.000000" y="212.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1051.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">simple</text></g><g id="e"><g class="shape" ><rect x="1442.000000" y="212.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1502.000000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a short one</text></g><g id="b"><g class="shape" ><rect x="1602.000000" y="212.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1653.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">far away</text></g><g id="f"><g class="shape" ><rect x="1745.000000" y="212.000000" width="501.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1995.500000" y="250.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 225.500000 280.000000 L 225.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(c -- )[0]"><path d="M 638.500000 280.000000 L 638.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(d -- )[0]"><path d="M 1051.000000 280.000000 L 1051.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(e -- )[0]"><path d="M 1502.000000 280.000000 L 1502.000000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(b -- )[0]"><path d="M 1653.500000 280.000000 L 1653.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(f -- )[0]"><path d="M 1995.500000 280.000000 L 1995.500000 767.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3196550992)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 227.500000 348.000000 L 1649.500000 348.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="940.000000" y="354.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; b)[1]"><path d="M 227.500000 418.000000 L 1649.500000 418.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="939.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 640.500000 488.000000 L 1047.000000 488.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="845.000000" y="494.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">short</text></g><g id="(a -&gt; d)[0]"><path d="M 227.500000 558.000000 L 1047.000000 558.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="638.500000" y="564.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">this should span many actors lifelines so we know how it will look like when redering a long label over many actors</text></g><g id="(d -&gt; e)[0]"><path d="M 1053.000000 628.000000 L 1498.000000 628.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /><text x="1276.500000" y="634.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 227.500000 698.000000 L 1991.500000 698.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3196550992)" /></g><mask id="3196550992" maskUnits="userSpaceOnUse" x="10" y="50" width="2238" height="718">
 <rect x="10" y="50" width="2238" height="718" fill="white"></rect>
 <rect x="922.000000" y="338.000000" width="36" height="21" fill="black"></rect>
 <rect x="734.000000" y="408.000000" width="411" height="21" fill="black"></rect>
 <rect x="827.000000" y="478.000000" width="36" height="21" fill="black"></rect>
 <rect x="266.000000" y="548.000000" width="745" height="21" fill="black"></rect>
 <rect x="1071.000000" y="618.000000" width="411" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
index 090313fe6..e7c3b1897 100644
--- a/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3629" height="1586" viewBox="10 50 3629 1586"><rect x="10.000000" y="50.000000" width="3629.000000" height="1586.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3629 1586"><svg id="d2-svg" width="3629" height="1586" viewBox="10 50 3629 1586"><rect x="10.000000" y="50.000000" width="3629.000000" height="1586.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -45,30 +45,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><path d="M 12 145 V 191 H 62 V 236 L 92 191 H 112 V 145 H 12 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="173.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a label</text></g><g id="b"><g class="shape" ><ellipse rx="50.500000" ry="50.500000" cx="309.500000" cy="185.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="309.500000" y="183.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="309.500000" dy="0.000000">b</tspan><tspan x="309.500000" dy="18.500000">labels</tspan></text></g><g id="c"><g class="shape" ><rect x="400.000000" y="52.000000" width="302.000000" height="184.000000" class=" stroke-B5 fill-N7" style="stroke-width:2;" /><rect x="400.000000" y="52.000000" width="302.000000" height="92.000000" class="class_header fill-B5" /><text x="551.000000" y="105.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">a class</text><line x1="400.000000" x2="702.000000" y1="144.000000" y2="144.000000" class=" stroke-B5" style="stroke-width:1" /><text x="410.000000" y="172.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="430.000000" y="172.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">public() bool</text><text x="682.000000" y="172.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text><text x="410.000000" y="218.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="430.000000" y="218.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">private() int</text><text x="682.000000" y="218.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="d"><g class="shape" ><path d="M 765 181 C 765 182 764 183 763 183 C 751 184 742 195 742 209 C 742 224 752 236 766 236 H 856 C 870 236 882 223 882 208 C 882 193 871 181 858 180 C 857 180 856 179 856 178 C 853 163 839 152 823 152 C 812 152 803 157 797 164 C 796 165 795 165 794 165 C 792 164 789 164 786 164 C 775 164 766 171 765 181 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="811.330000" y="215.516000" class="text fill-N1" style="text-anchor:middle;font-size:16px">cloudyyyy</text></g><g id="e"><g class="shape" ></g><g transform="translate(922.000000 166.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><path d="M 12 145 V 191 H 62 V 236 L 92 191 H 112 V 145 H 12 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="173.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a label</text></g><g id="b"><g class="shape" ><ellipse rx="50.500000" ry="50.500000" cx="309.500000" cy="185.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="309.500000" y="183.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="309.500000" dy="0.000000">b</tspan><tspan x="309.500000" dy="18.500000">labels</tspan></text></g><g id="c"><g class="shape" ><rect x="400.000000" y="52.000000" width="302.000000" height="184.000000" class=" stroke-B5 fill-N7" style="stroke-width:2;" /><rect x="400.000000" y="52.000000" width="302.000000" height="92.000000" class="class_header fill-B5" /><text x="551.000000" y="105.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">a class</text><line x1="400.000000" x2="702.000000" y1="144.000000" y2="144.000000" class=" stroke-B5" style="stroke-width:1" /><text x="410.000000" y="172.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="430.000000" y="172.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">public() bool</text><text x="682.000000" y="172.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text><text x="410.000000" y="218.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="430.000000" y="218.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">private() int</text><text x="682.000000" y="218.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="d"><g class="shape" ><path d="M 765 181 C 765 182 764 183 763 183 C 751 184 742 195 742 209 C 742 224 752 236 766 236 H 856 C 870 236 882 223 882 208 C 882 193 871 181 858 180 C 857 180 856 179 856 178 C 853 163 839 152 823 152 C 812 152 803 157 797 164 C 796 165 795 165 794 165 C 792 164 789 164 786 164 C 775 164 766 171 765 181 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="811.330000" y="215.516000" class="text fill-N1" style="text-anchor:middle;font-size:16px">cloudyyyy</text></g><g id="e"><g class="shape" ></g><g transform="translate(922.000000 166.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="f"><g class="shape" ><path d="M 1140 142 C 1140 118 1185 118 1190 118 C 1195 118 1240 118 1240 142 V 212 C 1240 236 1195 236 1190 236 C 1185 236 1140 236 1140 212 V 142 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 1140 142 C 1140 166 1185 166 1190 166 C 1195 166 1240 166 1240 142" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1190.000000" y="194.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">cyl</text></g><g id="g"><g class="shape" ><path d="M 1340 236 C 1340 236 1339 236 1339 236 L 1290 191 C 1289 191 1289 190 1290 189 L 1339 144 C 1340 144 1340 144 1341 144 L 1390 189 C 1391 189 1391 190 1390 191 L 1341 236 C 1341 236 1340 236 1340 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1340.000000" y="195.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">dia</text></g><g id="h"><g class="shape" ><path d="M 1440 225 L 1440 160 L 1540 160 L 1540 225 C 1523 211 1507 211 1490 225 C 1473 240 1457 240 1440 225 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1490.000000" y="193.610964" class="text fill-N1" style="text-anchor:middle;font-size:16px">docs</text></g><g id="i"><g class="shape" ><path d="M 1617 167 L 1580 201 L 1617 236 L 1690 236 L 1726 201 L 1690 167 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1653.000000" y="207.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">six corners</text></g><g id="j"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="1766.000000" y="87.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1830.000000" y="236.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a random icon</text></g><g id="k"><g class="shape" ><ellipse rx="50.000000" ry="36.000000" cx="1982.000000" cy="199.000000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1982.000000" y="204.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">over</text></g><g id="l"><g class="shape" ><path d="M 2082 163 L 2132 163 L 2132 178 L 2182 178 L 2182 236 L 2082 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2132.000000" y="212.300000" class="text fill-N1" style="text-anchor:middle;font-size:16px">pack</text></g><g id="m"><g class="shape" ><path d="M 2227 149 H 2318 C 2319 149 2320 149 2321 150 L 2338 166 C 2339 167 2339 168 2339 169 V 236 C 2339 236 2339 236 2339 236 H 2227 C 2226 236 2226 236 2226 236 V 150 C 2226 149 2226 149 2227 149 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 2338 236 H 2227 C 2226 236 2226 236 2226 235 V 150 C 2226 149 2226 149 2227 149 H 2317 C 2318 149 2318 149 2318 150 V 167 C 2318 168 2319 169 2320 169 H 2338 C 2339 169 2339 169 2339 170 V 235 C 2338 236 2339 236 2338 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2282.500000" y="198.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">docs page</text></g><g id="n"><g class="shape" ><path d="M 2405 154 L 2548 154 L 2522 236 L 2379 236 L 2379 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2463.500000" y="192.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="2463.500000" dy="0.000000">too</tspan><tspan x="2463.500000" dy="18.500000">hard&#x9;o say</tspan></text></g><g id="o"><g class="shape" ><path d="M 2738 199 H 2588 V 198 C 2588 181 2604 166 2630 158 C 2616 152 2608 142 2608 132 C 2608 114 2632 99 2663 99 C 2694 99 2718 114 2718 132 C 2718 143 2710 152 2695 158 C 2721 165 2737 181 2737 198 V 199 H 2738 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2663.000000" y="220.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="2663.000000" dy="0.000000">single</tspan><tspan x="2663.000000" dy="18.500000">person</tspan></text></g><g id="p"><g class="shape" ><path d="M 2802 170 H 2905 C 2929 170 2929 200 2929 203 C 2929 206 2929 236 2905 236 H 2802 C 2778 236 2778 206 2778 203 C 2778 200 2778 170 2802 170 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 2905 170 C 2881 170 2881 200 2881 203 C 2881 206 2881 236 2905 236" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2841.500000" y="208.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a queue</text></g><g id="q"><g class="shape" ><rect x="2969.000000" y="133.000000" width="103.000000" height="103.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="3020.500000" y="190.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a square</text></g><g id="r"><g class="shape" ><path d="M 3112 135 L 3264 135 L 3299 186 L 3264 236 L 3112 236 L 3147 186 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="3205.500000" y="191.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a step at a time</text></g><g id="s"><g class="shape" ><path d="M 3351 170 H 3436 C 3432 170 3421 188 3421 203 C 3421 218 3432 236 3436 236 H 3351 C 3347 236 3336 218 3336 203 C 3336 188 3347 170 3351 170 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="3386.000000" y="208.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">data</text></g><g id="t"><g class="shape" ><rect x="3476.000000" y="128.000000" width="161.000000" height="108.000000" class="shape stroke-B5 fill-N7" style="stroke-width:2;" /><rect x="3476.000000" y="128.000000" width="161.000000" height="36.000000" class="class_header fill-B5" /><text x="3486.000000" y="153.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="3486.000000" y="187.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="3553.000000" y="187.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="3617.000000" y="187.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="3476.000000" x2="3637.000000" y1="200.000000" y2="200.000000" class=" stroke-B5" style="stroke-width:2" /><text x="3486.000000" y="223.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="3553.000000" y="223.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">varchar</text><text x="3617.000000" y="223.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="3476.000000" x2="3637.000000" y1="236.000000" y2="236.000000" class=" stroke-B5" style="stroke-width:2" /></g></g><g id="(a -- )[0]"><path d="M 62.000000 238.000000 L 62.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(b -- )[0]"><path d="M 309.500000 238.000000 L 309.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(c -- )[0]"><path d="M 551.000000 238.000000 L 551.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(d -- )[0]"><path d="M 812.000000 238.000000 L 812.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(e -- )[0]"><path d="M 1020.000000 238.000000 L 1020.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(f -- )[0]"><path d="M 1190.000000 238.000000 L 1190.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(g -- )[0]"><path d="M 1340.000000 238.000000 L 1340.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(h -- )[0]"><path d="M 1490.000000 238.000000 L 1490.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(i -- )[0]"><path d="M 1653.000000 238.000000 L 1653.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(j -- )[0]"><path d="M 1830.000000 243.000000 L 1830.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(k -- )[0]"><path d="M 1982.000000 238.000000 L 1982.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(l -- )[0]"><path d="M 2132.000000 238.000000 L 2132.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(m -- )[0]"><path d="M 2282.500000 238.000000 L 2282.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(n -- )[0]"><path d="M 2463.500000 238.000000 L 2463.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(o -- )[0]"><path d="M 2663.000000 243.000000 L 2663.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(p -- )[0]"><path d="M 2853.500000 238.000000 L 2853.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(q -- )[0]"><path d="M 3020.500000 238.000000 L 3020.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(r -- )[0]"><path d="M 3205.500000 238.000000 L 3205.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(s -- )[0]"><path d="M 3386.000000 238.000000 L 3386.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(t -- )[0]"><path d="M 3556.500000 238.000000 L 3556.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 306.000000 L 305.500000 306.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /><text x="185.500000" y="312.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">result := callThisFunction(obj, 5)</text></g><g id="(b &lt;-&gt; c)[0]"><marker id="mk-2527347617" markerWidth="24.200000" markerHeight="18.000000" refX="3.950000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="2.750000,9.000000 13.200000,2.250000 24.200000,9.000000 13.200000,15.750000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 313.500000 376.000000 L 547.000000 376.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2527347617)" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /><text x="430.000000" y="382.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">mid</text><text x="326.000000" y="370.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">this side</text><text x="535.000000" y="370.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">other side</text></g><g id="(c -&gt; d)[0]"><path d="M 553.000000 446.000000 L 808.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(d -&gt; e)[0]"><path d="M 814.000000 516.000000 L 1016.000000 516.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(e -&gt; f)[0]"><path d="M 1022.000000 586.000000 L 1186.000000 586.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(f -&gt; g)[0]"><path d="M 1192.000000 656.000000 L 1336.000000 656.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(g -&gt; h)[0]"><path d="M 1342.000000 726.000000 L 1486.000000 726.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(h -&gt; i)[0]"><path d="M 1492.000000 796.000000 L 1649.000000 796.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(i -&gt; j)[0]"><path d="M 1655.000000 866.000000 L 1826.000000 866.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(j -&gt; k)[0]"><path d="M 1832.000000 936.000000 L 1978.000000 936.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(k -&gt; l)[0]"><path d="M 1984.000000 1006.000000 L 2128.000000 1006.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(l -&gt; m)[0]"><path d="M 2134.000000 1076.000000 L 2278.500000 1076.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(m -&gt; n)[0]"><path d="M 2284.500000 1146.000000 L 2459.500000 1146.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(n -&gt; o)[0]"><path d="M 2465.500000 1216.000000 L 2659.000000 1216.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(o -&gt; p)[0]"><path d="M 2665.000000 1286.000000 L 2849.500000 1286.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(p -&gt; q)[0]"><path d="M 2855.500000 1356.000000 L 3016.500000 1356.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(q -&gt; r)[0]"><path d="M 3022.500000 1426.000000 L 3201.500000 1426.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(r -&gt; s)[0]"><path d="M 3207.500000 1496.000000 L 3382.000000 1496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(s -&gt; t)[0]"><path d="M 3388.000000 1566.000000 L 3552.500000 1566.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><mask id="4195770843" maskUnits="userSpaceOnUse" x="10" y="50" width="3629" height="1586">
 <rect x="10" y="50" width="3629" height="1586" fill="white"></rect>
 <rect x="82.000000" y="296.000000" width="207" height="21" fill="black"></rect>
 <rect x="417.000000" y="366.000000" width="26" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
index 090313fe6..e7c3b1897 100644
--- a/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3629" height="1586" viewBox="10 50 3629 1586"><rect x="10.000000" y="50.000000" width="3629.000000" height="1586.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3629 1586"><svg id="d2-svg" width="3629" height="1586" viewBox="10 50 3629 1586"><rect x="10.000000" y="50.000000" width="3629.000000" height="1586.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -45,30 +45,10 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><path d="M 12 145 V 191 H 62 V 236 L 92 191 H 112 V 145 H 12 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="173.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a label</text></g><g id="b"><g class="shape" ><ellipse rx="50.500000" ry="50.500000" cx="309.500000" cy="185.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="309.500000" y="183.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="309.500000" dy="0.000000">b</tspan><tspan x="309.500000" dy="18.500000">labels</tspan></text></g><g id="c"><g class="shape" ><rect x="400.000000" y="52.000000" width="302.000000" height="184.000000" class=" stroke-B5 fill-N7" style="stroke-width:2;" /><rect x="400.000000" y="52.000000" width="302.000000" height="92.000000" class="class_header fill-B5" /><text x="551.000000" y="105.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">a class</text><line x1="400.000000" x2="702.000000" y1="144.000000" y2="144.000000" class=" stroke-B5" style="stroke-width:1" /><text x="410.000000" y="172.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="430.000000" y="172.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">public() bool</text><text x="682.000000" y="172.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text><text x="410.000000" y="218.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="430.000000" y="218.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">private() int</text><text x="682.000000" y="218.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="d"><g class="shape" ><path d="M 765 181 C 765 182 764 183 763 183 C 751 184 742 195 742 209 C 742 224 752 236 766 236 H 856 C 870 236 882 223 882 208 C 882 193 871 181 858 180 C 857 180 856 179 856 178 C 853 163 839 152 823 152 C 812 152 803 157 797 164 C 796 165 795 165 794 165 C 792 164 789 164 786 164 C 775 164 766 171 765 181 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="811.330000" y="215.516000" class="text fill-N1" style="text-anchor:middle;font-size:16px">cloudyyyy</text></g><g id="e"><g class="shape" ></g><g transform="translate(922.000000 166.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><path d="M 12 145 V 191 H 62 V 236 L 92 191 H 112 V 145 H 12 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="173.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a label</text></g><g id="b"><g class="shape" ><ellipse rx="50.500000" ry="50.500000" cx="309.500000" cy="185.500000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="309.500000" y="183.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="309.500000" dy="0.000000">b</tspan><tspan x="309.500000" dy="18.500000">labels</tspan></text></g><g id="c"><g class="shape" ><rect x="400.000000" y="52.000000" width="302.000000" height="184.000000" class=" stroke-B5 fill-N7" style="stroke-width:2;" /><rect x="400.000000" y="52.000000" width="302.000000" height="92.000000" class="class_header fill-B5" /><text x="551.000000" y="105.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">a class</text><line x1="400.000000" x2="702.000000" y1="144.000000" y2="144.000000" class=" stroke-B5" style="stroke-width:1" /><text x="410.000000" y="172.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="430.000000" y="172.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">public() bool</text><text x="682.000000" y="172.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text><text x="410.000000" y="218.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="430.000000" y="218.000000" class="text-mono fill-B5" style="text-anchor:start;font-size:20px">private() int</text><text x="682.000000" y="218.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="d"><g class="shape" ><path d="M 765 181 C 765 182 764 183 763 183 C 751 184 742 195 742 209 C 742 224 752 236 766 236 H 856 C 870 236 882 223 882 208 C 882 193 871 181 858 180 C 857 180 856 179 856 178 C 853 163 839 152 823 152 C 812 152 803 157 797 164 C 796 165 795 165 794 165 C 792 164 789 164 786 164 C 775 164 766 171 765 181 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="811.330000" y="215.516000" class="text fill-N1" style="text-anchor:middle;font-size:16px">cloudyyyy</text></g><g id="e"><g class="shape" ></g><g transform="translate(922.000000 166.000000)"><rect width="196.000000" height="70.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="f"><g class="shape" ><path d="M 1140 142 C 1140 118 1185 118 1190 118 C 1195 118 1240 118 1240 142 V 212 C 1240 236 1195 236 1190 236 C 1185 236 1140 236 1140 212 V 142 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 1140 142 C 1140 166 1185 166 1190 166 C 1195 166 1240 166 1240 142" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1190.000000" y="194.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">cyl</text></g><g id="g"><g class="shape" ><path d="M 1340 236 C 1340 236 1339 236 1339 236 L 1290 191 C 1289 191 1289 190 1290 189 L 1339 144 C 1340 144 1340 144 1341 144 L 1390 189 C 1391 189 1391 190 1390 191 L 1341 236 C 1341 236 1340 236 1340 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1340.000000" y="195.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">dia</text></g><g id="h"><g class="shape" ><path d="M 1440 225 L 1440 160 L 1540 160 L 1540 225 C 1523 211 1507 211 1490 225 C 1473 240 1457 240 1440 225 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1490.000000" y="193.610964" class="text fill-N1" style="text-anchor:middle;font-size:16px">docs</text></g><g id="i"><g class="shape" ><path d="M 1617 167 L 1580 201 L 1617 236 L 1690 236 L 1726 201 L 1690 167 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1653.000000" y="207.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">six corners</text></g><g id="j"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="1766.000000" y="87.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1830.000000" y="236.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a random icon</text></g><g id="k"><g class="shape" ><ellipse rx="50.000000" ry="36.000000" cx="1982.000000" cy="199.000000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1982.000000" y="204.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">over</text></g><g id="l"><g class="shape" ><path d="M 2082 163 L 2132 163 L 2132 178 L 2182 178 L 2182 236 L 2082 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2132.000000" y="212.300000" class="text fill-N1" style="text-anchor:middle;font-size:16px">pack</text></g><g id="m"><g class="shape" ><path d="M 2227 149 H 2318 C 2319 149 2320 149 2321 150 L 2338 166 C 2339 167 2339 168 2339 169 V 236 C 2339 236 2339 236 2339 236 H 2227 C 2226 236 2226 236 2226 236 V 150 C 2226 149 2226 149 2227 149 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 2338 236 H 2227 C 2226 236 2226 236 2226 235 V 150 C 2226 149 2226 149 2227 149 H 2317 C 2318 149 2318 149 2318 150 V 167 C 2318 168 2319 169 2320 169 H 2338 C 2339 169 2339 169 2339 170 V 235 C 2338 236 2339 236 2338 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2282.500000" y="198.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">docs page</text></g><g id="n"><g class="shape" ><path d="M 2405 154 L 2548 154 L 2522 236 L 2379 236 L 2379 236 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2463.500000" y="192.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="2463.500000" dy="0.000000">too</tspan><tspan x="2463.500000" dy="18.500000">hard&#x9;o say</tspan></text></g><g id="o"><g class="shape" ><path d="M 2738 199 H 2588 V 198 C 2588 181 2604 166 2630 158 C 2616 152 2608 142 2608 132 C 2608 114 2632 99 2663 99 C 2694 99 2718 114 2718 132 C 2718 143 2710 152 2695 158 C 2721 165 2737 181 2737 198 V 199 H 2738 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2663.000000" y="220.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="2663.000000" dy="0.000000">single</tspan><tspan x="2663.000000" dy="18.500000">person</tspan></text></g><g id="p"><g class="shape" ><path d="M 2802 170 H 2905 C 2929 170 2929 200 2929 203 C 2929 206 2929 236 2905 236 H 2802 C 2778 236 2778 206 2778 203 C 2778 200 2778 170 2802 170 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 2905 170 C 2881 170 2881 200 2881 203 C 2881 206 2881 236 2905 236" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2841.500000" y="208.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a queue</text></g><g id="q"><g class="shape" ><rect x="2969.000000" y="133.000000" width="103.000000" height="103.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="3020.500000" y="190.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a square</text></g><g id="r"><g class="shape" ><path d="M 3112 135 L 3264 135 L 3299 186 L 3264 236 L 3112 236 L 3147 186 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="3205.500000" y="191.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a step at a time</text></g><g id="s"><g class="shape" ><path d="M 3351 170 H 3436 C 3432 170 3421 188 3421 203 C 3421 218 3432 236 3436 236 H 3351 C 3347 236 3336 218 3336 203 C 3336 188 3347 170 3351 170 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="3386.000000" y="208.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">data</text></g><g id="t"><g class="shape" ><rect x="3476.000000" y="128.000000" width="161.000000" height="108.000000" class="shape stroke-B5 fill-N7" style="stroke-width:2;" /><rect x="3476.000000" y="128.000000" width="161.000000" height="36.000000" class="class_header fill-B5" /><text x="3486.000000" y="153.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="3486.000000" y="187.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="3553.000000" y="187.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="3617.000000" y="187.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="3476.000000" x2="3637.000000" y1="200.000000" y2="200.000000" class=" stroke-B5" style="stroke-width:2" /><text x="3486.000000" y="223.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="3553.000000" y="223.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">varchar</text><text x="3617.000000" y="223.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="3476.000000" x2="3637.000000" y1="236.000000" y2="236.000000" class=" stroke-B5" style="stroke-width:2" /></g></g><g id="(a -- )[0]"><path d="M 62.000000 238.000000 L 62.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(b -- )[0]"><path d="M 309.500000 238.000000 L 309.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(c -- )[0]"><path d="M 551.000000 238.000000 L 551.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(d -- )[0]"><path d="M 812.000000 238.000000 L 812.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(e -- )[0]"><path d="M 1020.000000 238.000000 L 1020.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(f -- )[0]"><path d="M 1190.000000 238.000000 L 1190.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(g -- )[0]"><path d="M 1340.000000 238.000000 L 1340.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(h -- )[0]"><path d="M 1490.000000 238.000000 L 1490.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(i -- )[0]"><path d="M 1653.000000 238.000000 L 1653.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(j -- )[0]"><path d="M 1830.000000 243.000000 L 1830.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(k -- )[0]"><path d="M 1982.000000 238.000000 L 1982.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(l -- )[0]"><path d="M 2132.000000 238.000000 L 2132.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(m -- )[0]"><path d="M 2282.500000 238.000000 L 2282.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(n -- )[0]"><path d="M 2463.500000 238.000000 L 2463.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(o -- )[0]"><path d="M 2663.000000 243.000000 L 2663.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(p -- )[0]"><path d="M 2853.500000 238.000000 L 2853.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(q -- )[0]"><path d="M 3020.500000 238.000000 L 3020.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(r -- )[0]"><path d="M 3205.500000 238.000000 L 3205.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(s -- )[0]"><path d="M 3386.000000 238.000000 L 3386.000000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(t -- )[0]"><path d="M 3556.500000 238.000000 L 3556.500000 1635.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4195770843)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 306.000000 L 305.500000 306.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /><text x="185.500000" y="312.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">result := callThisFunction(obj, 5)</text></g><g id="(b &lt;-&gt; c)[0]"><marker id="mk-2527347617" markerWidth="24.200000" markerHeight="18.000000" refX="3.950000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="2.750000,9.000000 13.200000,2.250000 24.200000,9.000000 13.200000,15.750000" class="connection stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 313.500000 376.000000 L 547.000000 376.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2527347617)" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /><text x="430.000000" y="382.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">mid</text><text x="326.000000" y="370.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">this side</text><text x="535.000000" y="370.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">other side</text></g><g id="(c -&gt; d)[0]"><path d="M 553.000000 446.000000 L 808.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(d -&gt; e)[0]"><path d="M 814.000000 516.000000 L 1016.000000 516.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(e -&gt; f)[0]"><path d="M 1022.000000 586.000000 L 1186.000000 586.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(f -&gt; g)[0]"><path d="M 1192.000000 656.000000 L 1336.000000 656.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(g -&gt; h)[0]"><path d="M 1342.000000 726.000000 L 1486.000000 726.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(h -&gt; i)[0]"><path d="M 1492.000000 796.000000 L 1649.000000 796.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(i -&gt; j)[0]"><path d="M 1655.000000 866.000000 L 1826.000000 866.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(j -&gt; k)[0]"><path d="M 1832.000000 936.000000 L 1978.000000 936.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(k -&gt; l)[0]"><path d="M 1984.000000 1006.000000 L 2128.000000 1006.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(l -&gt; m)[0]"><path d="M 2134.000000 1076.000000 L 2278.500000 1076.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(m -&gt; n)[0]"><path d="M 2284.500000 1146.000000 L 2459.500000 1146.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(n -&gt; o)[0]"><path d="M 2465.500000 1216.000000 L 2659.000000 1216.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(o -&gt; p)[0]"><path d="M 2665.000000 1286.000000 L 2849.500000 1286.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(p -&gt; q)[0]"><path d="M 2855.500000 1356.000000 L 3016.500000 1356.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(q -&gt; r)[0]"><path d="M 3022.500000 1426.000000 L 3201.500000 1426.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(r -&gt; s)[0]"><path d="M 3207.500000 1496.000000 L 3382.000000 1496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><g id="(s -&gt; t)[0]"><path d="M 3388.000000 1566.000000 L 3552.500000 1566.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4195770843)" /></g><mask id="4195770843" maskUnits="userSpaceOnUse" x="10" y="50" width="3629" height="1586">
 <rect x="10" y="50" width="3629" height="1586" fill="white"></rect>
 <rect x="82.000000" y="296.000000" width="207" height="21" fill="black"></rect>
 <rect x="417.000000" y="366.000000" width="26" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
index 5ef119ee4..239baf31f 100644
--- a/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="496" height="278" viewBox="10 50 496 278"><rect x="10.000000" y="50.000000" width="496.000000" height="278.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 496 278"><svg id="d2-svg" width="496" height="278" viewBox="10 50 496 278"><rect x="10.000000" y="50.000000" width="496.000000" height="278.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,28 +24,8 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="alice"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g id="bob"><g class="shape" ><rect x="404.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="454.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g id="(alice -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(bob -- )[0]"><path d="M 454.000000 120.000000 L 454.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 450.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 452.000000 258.000000 L 66.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">The ability to play bridge or golf as if they were games</text></g><mask id="81730432" maskUnits="userSpaceOnUse" x="10" y="50" width="496" height="278">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="alice"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g id="bob"><g class="shape" ><rect x="404.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="454.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g id="(alice -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(bob -- )[0]"><path d="M 454.000000 120.000000 L 454.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 450.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 452.000000 258.000000 L 66.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">The ability to play bridge or golf as if they were games</text></g><mask id="81730432" maskUnits="userSpaceOnUse" x="10" y="50" width="496" height="278">
 <rect x="10" y="50" width="496" height="278" fill="white"></rect>
 <rect x="134.000000" y="178.000000" width="249" height="21" fill="black"></rect>
 <rect x="82.000000" y="248.000000" width="352" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
index 5ef119ee4..239baf31f 100644
--- a/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="496" height="278" viewBox="10 50 496 278"><rect x="10.000000" y="50.000000" width="496.000000" height="278.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 496 278"><svg id="d2-svg" width="496" height="278" viewBox="10 50 496 278"><rect x="10.000000" y="50.000000" width="496.000000" height="278.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,28 +24,8 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="alice"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g id="bob"><g class="shape" ><rect x="404.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="454.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g id="(alice -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(bob -- )[0]"><path d="M 454.000000 120.000000 L 454.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 450.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 452.000000 258.000000 L 66.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">The ability to play bridge or golf as if they were games</text></g><mask id="81730432" maskUnits="userSpaceOnUse" x="10" y="50" width="496" height="278">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="alice"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g id="bob"><g class="shape" ><rect x="404.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="454.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g id="(alice -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(bob -- )[0]"><path d="M 454.000000 120.000000 L 454.000000 327.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#81730432)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 450.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.500000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 452.000000 258.000000 L 66.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#81730432)" /><text x="258.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">The ability to play bridge or golf as if they were games</text></g><mask id="81730432" maskUnits="userSpaceOnUse" x="10" y="50" width="496" height="278">
 <rect x="10" y="50" width="496" height="278" fill="white"></rect>
 <rect x="134.000000" y="178.000000" width="249" height="21" fill="black"></rect>
 <rect x="82.000000" y="248.000000" width="352" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
index 8d6666ebd..5cf98f92b 100644
--- a/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="594" height="1255" viewBox="10 50 594 1255"><rect x="10.000000" y="50.000000" width="594.000000" height="1255.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 594 1255"><svg id="d2-svg" width="594" height="1255" viewBox="10 50 594 1255"><rect x="10.000000" y="50.000000" width="594.000000" height="1255.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="462.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="512.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(d -- )[0]"><path d="M 512.000000 120.000000 L 512.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="b.t1"><g class="shape" ><rect x="206.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="356.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="202.000000" y="685.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="22.000000" y="243.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="248.000000" width="25.000000" height="21.000000" class=" fill-N5" /><text x="39.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="160.000000" y="342.000000" width="254.000000" height="438.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="165.000000" y="347.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="191.000000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="172.000000" y="820.000000" width="328.000000" height="265.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="825.000000" width="53.000000" height="21.000000" class=" fill-N5" /><text x="203.500000" y="841.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group b</text></g><g id="choo"><g class="shape blend" ><rect x="420.000000" y="1125.000000" width="184.000000" height="125.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="425.000000" y="1130.000000" width="33.000000" height="21.000000" class=" fill-N5" /><text x="441.500000" y="1146.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="172.000000" y="511.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="516.000000" width="73.000000" height="21.000000" class=" fill-N5" /><text x="213.500000" y="532.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">nested guy</text></g><g id="(a -&gt; b)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 287.000000 L 208.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="137.000000" y="293.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 386.000000 L 358.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[1]"><path d="M 360.000000 456.000000 L 216.000000 456.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.000000" y="462.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">ey</text></g><g id="(c -&gt; b)[0]"><path d="M 360.000000 555.000000 L 216.000000 555.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="561.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 220.000000 625.000000 L 352.000000 625.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 224.000000 695.000000 L 352.000000 695.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 354.000000 765.000000 L 222.000000 765.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 864.000000 L 358.000000 864.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[2]"><path d="M 360.000000 1070.000000 L 216.000000 1070.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="1076.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 264 934 H 439 C 440 934 441 934 442 935 L 459 951 C 460 952 460 953 460 954 V 1000 C 460 1000 460 1000 460 1000 H 264 C 263 1000 263 1000 263 1000 V 935 C 263 934 263 934 264 934 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 459 1000 H 264 C 263 1000 263 1000 263 999 V 935 C 263 934 263 934 264 934 H 438 C 439 934 439 934 439 935 V 952 C 439 953 440 954 441 954 H 459 C 460 954 460 954 460 955 V 999 C 459 1000 460 1000 459 1000 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="361.500000" y="972.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 461 1169 H 543 C 544 1169 545 1169 546 1170 L 563 1186 C 564 1187 564 1188 564 1189 V 1235 C 564 1235 564 1235 564 1235 H 461 C 460 1235 460 1235 460 1235 V 1170 C 460 1169 460 1169 461 1169 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 563 1235 H 461 C 460 1235 460 1235 460 1234 V 1170 C 460 1169 460 1169 461 1169 H 542 C 543 1169 543 1169 543 1170 V 1187 C 543 1188 544 1189 545 1189 H 563 C 564 1189 564 1189 564 1190 V 1234 C 563 1235 564 1235 563 1235 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="512.000000" y="1207.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this note</text></g><mask id="2858629162" maskUnits="userSpaceOnUse" x="10" y="50" width="594" height="1255">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="462.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="512.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(d -- )[0]"><path d="M 512.000000 120.000000 L 512.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="b.t1"><g class="shape" ><rect x="206.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="356.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="202.000000" y="685.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="22.000000" y="243.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="248.000000" width="25.000000" height="21.000000" class=" fill-N5" /><text x="39.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="160.000000" y="342.000000" width="254.000000" height="438.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="165.000000" y="347.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="191.000000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="172.000000" y="820.000000" width="328.000000" height="265.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="825.000000" width="53.000000" height="21.000000" class=" fill-N5" /><text x="203.500000" y="841.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group b</text></g><g id="choo"><g class="shape blend" ><rect x="420.000000" y="1125.000000" width="184.000000" height="125.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="425.000000" y="1130.000000" width="33.000000" height="21.000000" class=" fill-N5" /><text x="441.500000" y="1146.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="172.000000" y="511.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="516.000000" width="73.000000" height="21.000000" class=" fill-N5" /><text x="213.500000" y="532.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">nested guy</text></g><g id="(a -&gt; b)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 287.000000 L 208.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="137.000000" y="293.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 386.000000 L 358.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[1]"><path d="M 360.000000 456.000000 L 216.000000 456.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.000000" y="462.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">ey</text></g><g id="(c -&gt; b)[0]"><path d="M 360.000000 555.000000 L 216.000000 555.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="561.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 220.000000 625.000000 L 352.000000 625.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 224.000000 695.000000 L 352.000000 695.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 354.000000 765.000000 L 222.000000 765.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 864.000000 L 358.000000 864.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[2]"><path d="M 360.000000 1070.000000 L 216.000000 1070.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="1076.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 264 934 H 439 C 440 934 441 934 442 935 L 459 951 C 460 952 460 953 460 954 V 1000 C 460 1000 460 1000 460 1000 H 264 C 263 1000 263 1000 263 1000 V 935 C 263 934 263 934 264 934 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 459 1000 H 264 C 263 1000 263 1000 263 999 V 935 C 263 934 263 934 264 934 H 438 C 439 934 439 934 439 935 V 952 C 439 953 440 954 441 954 H 459 C 460 954 460 954 460 955 V 999 C 459 1000 460 1000 459 1000 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="361.500000" y="972.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 461 1169 H 543 C 544 1169 545 1169 546 1170 L 563 1186 C 564 1187 564 1188 564 1189 V 1235 C 564 1235 564 1235 564 1235 H 461 C 460 1235 460 1235 460 1235 V 1170 C 460 1169 460 1169 461 1169 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 563 1235 H 461 C 460 1235 460 1235 460 1234 V 1170 C 460 1169 460 1169 461 1169 H 542 C 543 1169 543 1169 543 1170 V 1187 C 543 1188 544 1189 545 1189 H 563 C 564 1189 564 1189 564 1190 V 1234 C 563 1235 564 1235 563 1235 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="512.000000" y="1207.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this note</text></g><mask id="2858629162" maskUnits="userSpaceOnUse" x="10" y="50" width="594" height="1255">
 <rect x="10" y="50" width="594" height="1255" fill="white"></rect>
 <rect x="27.000000" y="248.000000" width="25" height="16" fill="black"></rect>
 <rect x="165.000000" y="347.000000" width="52" height="16" fill="black"></rect>
@@ -55,4 +35,4 @@
 <rect x="279.000000" y="446.000000" width="16" height="21" fill="black"></rect>
 <rect x="271.000000" y="545.000000" width="33" height="21" fill="black"></rect>
 <rect x="271.000000" y="1060.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
index 8d6666ebd..5cf98f92b 100644
--- a/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="594" height="1255" viewBox="10 50 594 1255"><rect x="10.000000" y="50.000000" width="594.000000" height="1255.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 594 1255"><svg id="d2-svg" width="594" height="1255" viewBox="10 50 594 1255"><rect x="10.000000" y="50.000000" width="594.000000" height="1255.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="462.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="512.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(d -- )[0]"><path d="M 512.000000 120.000000 L 512.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="b.t1"><g class="shape" ><rect x="206.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="356.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="202.000000" y="685.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="22.000000" y="243.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="248.000000" width="25.000000" height="21.000000" class=" fill-N5" /><text x="39.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="160.000000" y="342.000000" width="254.000000" height="438.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="165.000000" y="347.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="191.000000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="172.000000" y="820.000000" width="328.000000" height="265.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="825.000000" width="53.000000" height="21.000000" class=" fill-N5" /><text x="203.500000" y="841.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group b</text></g><g id="choo"><g class="shape blend" ><rect x="420.000000" y="1125.000000" width="184.000000" height="125.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="425.000000" y="1130.000000" width="33.000000" height="21.000000" class=" fill-N5" /><text x="441.500000" y="1146.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="172.000000" y="511.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="516.000000" width="73.000000" height="21.000000" class=" fill-N5" /><text x="213.500000" y="532.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">nested guy</text></g><g id="(a -&gt; b)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 287.000000 L 208.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="137.000000" y="293.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 386.000000 L 358.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[1]"><path d="M 360.000000 456.000000 L 216.000000 456.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.000000" y="462.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">ey</text></g><g id="(c -&gt; b)[0]"><path d="M 360.000000 555.000000 L 216.000000 555.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="561.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 220.000000 625.000000 L 352.000000 625.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 224.000000 695.000000 L 352.000000 695.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 354.000000 765.000000 L 222.000000 765.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 864.000000 L 358.000000 864.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[2]"><path d="M 360.000000 1070.000000 L 216.000000 1070.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="1076.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 264 934 H 439 C 440 934 441 934 442 935 L 459 951 C 460 952 460 953 460 954 V 1000 C 460 1000 460 1000 460 1000 H 264 C 263 1000 263 1000 263 1000 V 935 C 263 934 263 934 264 934 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 459 1000 H 264 C 263 1000 263 1000 263 999 V 935 C 263 934 263 934 264 934 H 438 C 439 934 439 934 439 935 V 952 C 439 953 440 954 441 954 H 459 C 460 954 460 954 460 955 V 999 C 459 1000 460 1000 459 1000 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="361.500000" y="972.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 461 1169 H 543 C 544 1169 545 1169 546 1170 L 563 1186 C 564 1187 564 1188 564 1189 V 1235 C 564 1235 564 1235 564 1235 H 461 C 460 1235 460 1235 460 1235 V 1170 C 460 1169 460 1169 461 1169 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 563 1235 H 461 C 460 1235 460 1235 460 1234 V 1170 C 460 1169 460 1169 461 1169 H 542 C 543 1169 543 1169 543 1170 V 1187 C 543 1188 544 1189 545 1189 H 563 C 564 1189 564 1189 564 1190 V 1234 C 563 1235 564 1235 563 1235 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="512.000000" y="1207.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this note</text></g><mask id="2858629162" maskUnits="userSpaceOnUse" x="10" y="50" width="594" height="1255">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="462.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="512.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="(d -- )[0]"><path d="M 512.000000 120.000000 L 512.000000 1304.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2858629162)" /></g><g id="b.t1"><g class="shape" ><rect x="206.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="356.000000" y="615.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="202.000000" y="685.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="22.000000" y="243.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="248.000000" width="25.000000" height="21.000000" class=" fill-N5" /><text x="39.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="160.000000" y="342.000000" width="254.000000" height="438.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="165.000000" y="347.000000" width="52.000000" height="21.000000" class=" fill-N5" /><text x="191.000000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="172.000000" y="820.000000" width="328.000000" height="265.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="825.000000" width="53.000000" height="21.000000" class=" fill-N5" /><text x="203.500000" y="841.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">group b</text></g><g id="choo"><g class="shape blend" ><rect x="420.000000" y="1125.000000" width="184.000000" height="125.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="425.000000" y="1130.000000" width="33.000000" height="21.000000" class=" fill-N5" /><text x="441.500000" y="1146.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="172.000000" y="511.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="177.000000" y="516.000000" width="73.000000" height="21.000000" class=" fill-N5" /><text x="213.500000" y="532.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">nested guy</text></g><g id="(a -&gt; b)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 287.000000 L 208.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="137.000000" y="293.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 214.000000 386.000000 L 358.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[1]"><path d="M 360.000000 456.000000 L 216.000000 456.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.000000" y="462.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">ey</text></g><g id="(c -&gt; b)[0]"><path d="M 360.000000 555.000000 L 216.000000 555.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="561.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 220.000000 625.000000 L 352.000000 625.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 224.000000 695.000000 L 352.000000 695.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 354.000000 765.000000 L 222.000000 765.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(b -&gt; c)[1]"><path d="M 214.000000 864.000000 L 358.000000 864.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /></g><g id="(c -&gt; b)[2]"><path d="M 360.000000 1070.000000 L 216.000000 1070.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2858629162)" /><text x="287.500000" y="1076.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 264 934 H 439 C 440 934 441 934 442 935 L 459 951 C 460 952 460 953 460 954 V 1000 C 460 1000 460 1000 460 1000 H 264 C 263 1000 263 1000 263 1000 V 935 C 263 934 263 934 264 934 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 459 1000 H 264 C 263 1000 263 1000 263 999 V 935 C 263 934 263 934 264 934 H 438 C 439 934 439 934 439 935 V 952 C 439 953 440 954 441 954 H 459 C 460 954 460 954 460 955 V 999 C 459 1000 460 1000 459 1000 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="361.500000" y="972.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 461 1169 H 543 C 544 1169 545 1169 546 1170 L 563 1186 C 564 1187 564 1188 564 1189 V 1235 C 564 1235 564 1235 564 1235 H 461 C 460 1235 460 1235 460 1235 V 1170 C 460 1169 460 1169 461 1169 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 563 1235 H 461 C 460 1235 460 1235 460 1234 V 1170 C 460 1169 460 1169 461 1169 H 542 C 543 1169 543 1169 543 1170 V 1187 C 543 1188 544 1189 545 1189 H 563 C 564 1189 564 1189 564 1190 V 1234 C 563 1235 564 1235 563 1235 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="512.000000" y="1207.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this note</text></g><mask id="2858629162" maskUnits="userSpaceOnUse" x="10" y="50" width="594" height="1255">
 <rect x="10" y="50" width="594" height="1255" fill="white"></rect>
 <rect x="27.000000" y="248.000000" width="25" height="16" fill="black"></rect>
 <rect x="165.000000" y="347.000000" width="52" height="16" fill="black"></rect>
@@ -55,4 +35,4 @@
 <rect x="279.000000" y="446.000000" width="16" height="21" fill="black"></rect>
 <rect x="271.000000" y="545.000000" width="33" height="21" fill="black"></rect>
 <rect x="271.000000" y="1060.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg
index ea24c9dc6..b3962bef8 100644
--- a/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="469" height="544" viewBox="-22 50 469 544"><rect x="-22.000000" y="50.000000" width="469.000000" height="544.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 469 544"><svg id="d2-svg" width="469" height="544" viewBox="-22 50 469 544"><rect x="-22.000000" y="50.000000" width="469.000000" height="544.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3409733645)" /></g><g id="b.note"><g class="shape" ><path d="M -20 258 H 424 C 425 258 426 258 427 259 L 444 275 C 445 276 445 277 445 278 V 324 C 445 324 445 324 445 324 H -20 C -20 324 -20 324 -20 324 V 259 C -20 258 -20 258 -20 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 444 324 H -19 C -20 324 -20 324 -20 323 V 259 C -20 258 -20 258 -19 258 H 423 C 424 258 424 258 424 259 V 276 C 424 277 425 278 426 278 H 444 C 445 278 445 278 445 279 V 323 C 444 324 445 324 444 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.500000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 394 H 79 C 80 394 81 394 82 395 L 99 411 C 100 412 100 413 100 414 V 524 C 100 524 100 524 100 524 H 23 C 23 524 23 524 23 524 V 395 C 23 394 23 394 24 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 524 H 24 C 23 524 23 524 23 523 V 395 C 23 394 23 394 24 394 H 78 C 79 394 79 394 79 395 V 412 C 79 413 80 414 81 414 H 99 C 100 414 100 414 100 415 V 523 C 99 524 100 524 99 524 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3409733645" maskUnits="userSpaceOnUse" x="-22" y="50" width="469" height="544">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3409733645)" /></g><g id="b.note"><g class="shape" ><path d="M -20 258 H 424 C 425 258 426 258 427 259 L 444 275 C 445 276 445 277 445 278 V 324 C 445 324 445 324 445 324 H -20 C -20 324 -20 324 -20 324 V 259 C -20 258 -20 258 -20 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 444 324 H -19 C -20 324 -20 324 -20 323 V 259 C -20 258 -20 258 -19 258 H 423 C 424 258 424 258 424 259 V 276 C 424 277 425 278 426 278 H 444 C 445 278 445 278 445 279 V 323 C 444 324 445 324 444 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.500000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 394 H 79 C 80 394 81 394 82 395 L 99 411 C 100 412 100 413 100 414 V 524 C 100 524 100 524 100 524 H 23 C 23 524 23 524 23 524 V 395 C 23 394 23 394 24 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 524 H 24 C 23 524 23 524 23 523 V 395 C 23 394 23 394 24 394 H 78 C 79 394 79 394 79 395 V 412 C 79 413 80 414 81 414 H 99 C 100 414 100 414 100 415 V 523 C 99 524 100 524 99 524 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3409733645" maskUnits="userSpaceOnUse" x="-22" y="50" width="469" height="544">
 <rect x="-22" y="50" width="469" height="544" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg
index ea24c9dc6..b3962bef8 100644
--- a/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="469" height="544" viewBox="-22 50 469 544"><rect x="-22.000000" y="50.000000" width="469.000000" height="544.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 469 544"><svg id="d2-svg" width="469" height="544" viewBox="-22 50 469 544"><rect x="-22.000000" y="50.000000" width="469.000000" height="544.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3409733645)" /></g><g id="b.note"><g class="shape" ><path d="M -20 258 H 424 C 425 258 426 258 427 259 L 444 275 C 445 276 445 277 445 278 V 324 C 445 324 445 324 445 324 H -20 C -20 324 -20 324 -20 324 V 259 C -20 258 -20 258 -20 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 444 324 H -19 C -20 324 -20 324 -20 323 V 259 C -20 258 -20 258 -19 258 H 423 C 424 258 424 258 424 259 V 276 C 424 277 425 278 426 278 H 444 C 445 278 445 278 445 279 V 323 C 444 324 445 324 444 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.500000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 394 H 79 C 80 394 81 394 82 395 L 99 411 C 100 412 100 413 100 414 V 524 C 100 524 100 524 100 524 H 23 C 23 524 23 524 23 524 V 395 C 23 394 23 394 24 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 524 H 24 C 23 524 23 524 23 523 V 395 C 23 394 23 394 24 394 H 78 C 79 394 79 394 79 395 V 412 C 79 413 80 414 81 414 H 99 C 100 414 100 414 100 415 V 523 C 99 524 100 524 99 524 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3409733645" maskUnits="userSpaceOnUse" x="-22" y="50" width="469" height="544">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 593.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3409733645)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 208.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3409733645)" /></g><g id="b.note"><g class="shape" ><path d="M -20 258 H 424 C 425 258 426 258 427 259 L 444 275 C 445 276 445 277 445 278 V 324 C 445 324 445 324 445 324 H -20 C -20 324 -20 324 -20 324 V 259 C -20 258 -20 258 -20 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 444 324 H -19 C -20 324 -20 324 -20 323 V 259 C -20 258 -20 258 -19 258 H 423 C 424 258 424 258 424 259 V 276 C 424 277 425 278 426 278 H 444 C 445 278 445 278 445 279 V 323 C 444 324 445 324 444 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.500000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 394 H 79 C 80 394 81 394 82 395 L 99 411 C 100 412 100 413 100 414 V 524 C 100 524 100 524 100 524 H 23 C 23 524 23 524 23 524 V 395 C 23 394 23 394 24 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 524 H 24 C 23 524 23 524 23 523 V 395 C 23 394 23 394 24 394 H 78 C 79 394 79 394 79 395 V 412 C 79 413 80 414 81 414 H 99 C 100 414 100 414 100 415 V 523 C 99 524 100 524 99 524 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3409733645" maskUnits="userSpaceOnUse" x="-22" y="50" width="469" height="544">
 <rect x="-22" y="50" width="469" height="544" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
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 a4119a9e4..9799d1dc9 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
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="732" height="1530" viewBox="-58 50 732 1530"><rect x="-58.000000" y="50.000000" width="732.000000" height="1530.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 732 1530"><svg id="d2-svg" width="732" height="1530" viewBox="-58 50 732 1530"><rect x="-58.000000" y="50.000000" width="732.000000" height="1530.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="285.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="335.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="542.000000" y="52.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="607.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">just an actor</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(b -- )[0]"><path d="M 335.000000 120.000000 L 335.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(c -- )[0]"><path d="M 607.000000 120.000000 L 607.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-58.000000" y="173.000000" width="481.000000" height="697.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-53.000000" y="178.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="24.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="283.000000" y="792.000000" width="376.000000" height="409.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="288.000000" y="797.000000" width="19.000000" height="21.000000" class=" fill-N5" /><text x="297.500000" y="813.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-46.000000" y="272.000000" width="457.000000" height="557.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-41.000000" y="277.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="75.500000" y="293.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="295.000000" y="833.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="838.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="854.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="295.000000" y="932.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="937.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="953.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="295.000000" y="1031.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1036.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1052.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="295.000000" y="1130.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1135.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1151.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-34.000000" y="371.000000" width="433.000000" height="417.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-29.000000" y="376.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="55.000000" y="392.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-22.000000" y="470.000000" width="409.000000" height="306.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-17.000000" y="475.000000" width="72.000000" height="21.000000" class=" fill-N5" /><text x="19.000000" y="491.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="22.000000" y="705.000000" width="353.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="710.000000" width="36.000000" height="21.000000" class=" fill-N5" /><text x="45.000000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">whoa</text></g><g id="(a -&gt; b)[4]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 331.000000 217.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[3]"><path d="M 64.000000 316.000000 L 331.000000 316.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[2]"><path d="M 64.000000 415.000000 L 331.000000 415.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[1]"><path d="M 64.000000 650.000000 L 331.000000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 749.000000 L 331.000000 749.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[0]"><path d="M 337.000000 877.000000 L 603.000000 877.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[1]"><path d="M 337.000000 976.000000 L 603.000000 976.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[2]"><path d="M 337.000000 1075.000000 L 603.000000 1075.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[3]"><path d="M 337.000000 1174.000000 L 603.000000 1174.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="a.a note"><g class="shape" ><path d="M 19 514 H 85 C 86 514 87 514 88 515 L 105 531 C 106 532 106 533 106 534 V 580 C 106 580 106 580 106 580 H 18 C 18 580 18 580 18 580 V 515 C 18 514 18 514 19 514 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 105 580 H 19 C 18 580 18 580 18 579 V 515 C 18 514 18 514 19 514 H 84 C 85 514 85 514 85 515 V 532 C 85 533 86 534 87 534 H 105 C 106 534 106 534 106 535 V 579 C 105 580 106 580 105 580 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="552.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note</text></g><g id="b.note"><g class="shape" ><path d="M 103 1244 H 546 C 547 1244 548 1244 549 1245 L 566 1261 C 567 1262 567 1263 567 1264 V 1310 C 567 1310 567 1310 567 1310 H 103 C 102 1310 102 1310 102 1310 V 1245 C 102 1244 102 1244 103 1244 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 566 1310 H 103 C 102 1310 102 1310 102 1309 V 1245 C 102 1244 102 1244 103 1244 H 545 C 546 1244 546 1244 546 1245 V 1262 C 546 1263 547 1264 548 1264 H 566 C 567 1264 567 1264 567 1265 V 1309 C 566 1310 567 1310 566 1310 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="334.500000" y="1282.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 1380 H 79 C 80 1380 81 1380 82 1381 L 99 1397 C 100 1398 100 1399 100 1400 V 1510 C 100 1510 100 1510 100 1510 H 23 C 23 1510 23 1510 23 1510 V 1381 C 23 1380 23 1380 24 1380 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 1510 H 24 C 23 1510 23 1510 23 1509 V 1381 C 23 1380 23 1380 24 1380 H 78 C 79 1380 79 1380 79 1381 V 1398 C 79 1399 80 1400 81 1400 H 99 C 100 1400 100 1400 100 1401 V 1509 C 99 1510 100 1510 99 1510 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="1418.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3658784393" maskUnits="userSpaceOnUse" x="-58" y="50" width="732" height="1530">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="285.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="335.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="542.000000" y="52.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="607.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">just an actor</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(b -- )[0]"><path d="M 335.000000 120.000000 L 335.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(c -- )[0]"><path d="M 607.000000 120.000000 L 607.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-58.000000" y="173.000000" width="481.000000" height="697.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-53.000000" y="178.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="24.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="283.000000" y="792.000000" width="376.000000" height="409.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="288.000000" y="797.000000" width="19.000000" height="21.000000" class=" fill-N5" /><text x="297.500000" y="813.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-46.000000" y="272.000000" width="457.000000" height="557.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-41.000000" y="277.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="75.500000" y="293.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="295.000000" y="833.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="838.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="854.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="295.000000" y="932.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="937.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="953.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="295.000000" y="1031.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1036.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1052.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="295.000000" y="1130.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1135.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1151.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-34.000000" y="371.000000" width="433.000000" height="417.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-29.000000" y="376.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="55.000000" y="392.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-22.000000" y="470.000000" width="409.000000" height="306.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-17.000000" y="475.000000" width="72.000000" height="21.000000" class=" fill-N5" /><text x="19.000000" y="491.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="22.000000" y="705.000000" width="353.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="710.000000" width="36.000000" height="21.000000" class=" fill-N5" /><text x="45.000000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">whoa</text></g><g id="(a -&gt; b)[4]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 331.000000 217.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[3]"><path d="M 64.000000 316.000000 L 331.000000 316.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[2]"><path d="M 64.000000 415.000000 L 331.000000 415.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[1]"><path d="M 64.000000 650.000000 L 331.000000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 749.000000 L 331.000000 749.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[0]"><path d="M 337.000000 877.000000 L 603.000000 877.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[1]"><path d="M 337.000000 976.000000 L 603.000000 976.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[2]"><path d="M 337.000000 1075.000000 L 603.000000 1075.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[3]"><path d="M 337.000000 1174.000000 L 603.000000 1174.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="a.a note"><g class="shape" ><path d="M 19 514 H 85 C 86 514 87 514 88 515 L 105 531 C 106 532 106 533 106 534 V 580 C 106 580 106 580 106 580 H 18 C 18 580 18 580 18 580 V 515 C 18 514 18 514 19 514 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 105 580 H 19 C 18 580 18 580 18 579 V 515 C 18 514 18 514 19 514 H 84 C 85 514 85 514 85 515 V 532 C 85 533 86 534 87 534 H 105 C 106 534 106 534 106 535 V 579 C 105 580 106 580 105 580 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="552.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note</text></g><g id="b.note"><g class="shape" ><path d="M 103 1244 H 546 C 547 1244 548 1244 549 1245 L 566 1261 C 567 1262 567 1263 567 1264 V 1310 C 567 1310 567 1310 567 1310 H 103 C 102 1310 102 1310 102 1310 V 1245 C 102 1244 102 1244 103 1244 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 566 1310 H 103 C 102 1310 102 1310 102 1309 V 1245 C 102 1244 102 1244 103 1244 H 545 C 546 1244 546 1244 546 1245 V 1262 C 546 1263 547 1264 548 1264 H 566 C 567 1264 567 1264 567 1265 V 1309 C 566 1310 567 1310 566 1310 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="334.500000" y="1282.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 1380 H 79 C 80 1380 81 1380 82 1381 L 99 1397 C 100 1398 100 1399 100 1400 V 1510 C 100 1510 100 1510 100 1510 H 23 C 23 1510 23 1510 23 1510 V 1381 C 23 1380 23 1380 24 1380 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 1510 H 24 C 23 1510 23 1510 23 1509 V 1381 C 23 1380 23 1380 24 1380 H 78 C 79 1380 79 1380 79 1381 V 1398 C 79 1399 80 1400 81 1400 H 99 C 100 1400 100 1400 100 1401 V 1509 C 99 1510 100 1510 99 1510 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="1418.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3658784393" maskUnits="userSpaceOnUse" x="-58" y="50" width="732" height="1530">
 <rect x="-58" y="50" width="732" height="1530" fill="white"></rect>
 <rect x="-53.000000" y="178.000000" width="155" height="16" fill="black"></rect>
 <rect x="288.000000" y="797.000000" width="19" height="16" fill="black"></rect>
@@ -49,4 +29,4 @@
 <rect x="-29.000000" y="376.000000" width="168" height="16" fill="black"></rect>
 <rect x="-17.000000" y="475.000000" width="72" height="16" fill="black"></rect>
 <rect x="27.000000" y="710.000000" width="36" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
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 a4119a9e4..9799d1dc9 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
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="732" height="1530" viewBox="-58 50 732 1530"><rect x="-58.000000" y="50.000000" width="732.000000" height="1530.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 732 1530"><svg id="d2-svg" width="732" height="1530" viewBox="-58 50 732 1530"><rect x="-58.000000" y="50.000000" width="732.000000" height="1530.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="285.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="335.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="542.000000" y="52.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="607.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">just an actor</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(b -- )[0]"><path d="M 335.000000 120.000000 L 335.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(c -- )[0]"><path d="M 607.000000 120.000000 L 607.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-58.000000" y="173.000000" width="481.000000" height="697.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-53.000000" y="178.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="24.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="283.000000" y="792.000000" width="376.000000" height="409.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="288.000000" y="797.000000" width="19.000000" height="21.000000" class=" fill-N5" /><text x="297.500000" y="813.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-46.000000" y="272.000000" width="457.000000" height="557.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-41.000000" y="277.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="75.500000" y="293.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="295.000000" y="833.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="838.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="854.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="295.000000" y="932.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="937.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="953.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="295.000000" y="1031.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1036.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1052.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="295.000000" y="1130.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1135.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1151.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-34.000000" y="371.000000" width="433.000000" height="417.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-29.000000" y="376.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="55.000000" y="392.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-22.000000" y="470.000000" width="409.000000" height="306.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-17.000000" y="475.000000" width="72.000000" height="21.000000" class=" fill-N5" /><text x="19.000000" y="491.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="22.000000" y="705.000000" width="353.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="710.000000" width="36.000000" height="21.000000" class=" fill-N5" /><text x="45.000000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">whoa</text></g><g id="(a -&gt; b)[4]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 331.000000 217.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[3]"><path d="M 64.000000 316.000000 L 331.000000 316.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[2]"><path d="M 64.000000 415.000000 L 331.000000 415.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[1]"><path d="M 64.000000 650.000000 L 331.000000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 749.000000 L 331.000000 749.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[0]"><path d="M 337.000000 877.000000 L 603.000000 877.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[1]"><path d="M 337.000000 976.000000 L 603.000000 976.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[2]"><path d="M 337.000000 1075.000000 L 603.000000 1075.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[3]"><path d="M 337.000000 1174.000000 L 603.000000 1174.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="a.a note"><g class="shape" ><path d="M 19 514 H 85 C 86 514 87 514 88 515 L 105 531 C 106 532 106 533 106 534 V 580 C 106 580 106 580 106 580 H 18 C 18 580 18 580 18 580 V 515 C 18 514 18 514 19 514 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 105 580 H 19 C 18 580 18 580 18 579 V 515 C 18 514 18 514 19 514 H 84 C 85 514 85 514 85 515 V 532 C 85 533 86 534 87 534 H 105 C 106 534 106 534 106 535 V 579 C 105 580 106 580 105 580 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="552.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note</text></g><g id="b.note"><g class="shape" ><path d="M 103 1244 H 546 C 547 1244 548 1244 549 1245 L 566 1261 C 567 1262 567 1263 567 1264 V 1310 C 567 1310 567 1310 567 1310 H 103 C 102 1310 102 1310 102 1310 V 1245 C 102 1244 102 1244 103 1244 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 566 1310 H 103 C 102 1310 102 1310 102 1309 V 1245 C 102 1244 102 1244 103 1244 H 545 C 546 1244 546 1244 546 1245 V 1262 C 546 1263 547 1264 548 1264 H 566 C 567 1264 567 1264 567 1265 V 1309 C 566 1310 567 1310 566 1310 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="334.500000" y="1282.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 1380 H 79 C 80 1380 81 1380 82 1381 L 99 1397 C 100 1398 100 1399 100 1400 V 1510 C 100 1510 100 1510 100 1510 H 23 C 23 1510 23 1510 23 1510 V 1381 C 23 1380 23 1380 24 1380 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 1510 H 24 C 23 1510 23 1510 23 1509 V 1381 C 23 1380 23 1380 24 1380 H 78 C 79 1380 79 1380 79 1381 V 1398 C 79 1399 80 1400 81 1400 H 99 C 100 1400 100 1400 100 1401 V 1509 C 99 1510 100 1510 99 1510 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="1418.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3658784393" maskUnits="userSpaceOnUse" x="-58" y="50" width="732" height="1530">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="285.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="335.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="542.000000" y="52.000000" width="130.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="607.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">just an actor</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(b -- )[0]"><path d="M 335.000000 120.000000 L 335.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="(c -- )[0]"><path d="M 607.000000 120.000000 L 607.000000 1579.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3658784393)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-58.000000" y="173.000000" width="481.000000" height="697.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-53.000000" y="178.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="24.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="283.000000" y="792.000000" width="376.000000" height="409.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="288.000000" y="797.000000" width="19.000000" height="21.000000" class=" fill-N5" /><text x="297.500000" y="813.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-46.000000" y="272.000000" width="457.000000" height="557.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-41.000000" y="277.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="75.500000" y="293.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="295.000000" y="833.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="838.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="854.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="295.000000" y="932.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="937.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="953.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="295.000000" y="1031.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1036.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1052.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="295.000000" y="1130.000000" width="352.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="300.000000" y="1135.000000" width="42.000000" height="21.000000" class=" fill-N5" /><text x="321.000000" y="1151.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-34.000000" y="371.000000" width="433.000000" height="417.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-29.000000" y="376.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="55.000000" y="392.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="-22.000000" y="470.000000" width="409.000000" height="306.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-17.000000" y="475.000000" width="72.000000" height="21.000000" class=" fill-N5" /><text x="19.000000" y="491.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">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="22.000000" y="705.000000" width="353.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="710.000000" width="36.000000" height="21.000000" class=" fill-N5" /><text x="45.000000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">whoa</text></g><g id="(a -&gt; b)[4]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 217.000000 L 331.000000 217.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[3]"><path d="M 64.000000 316.000000 L 331.000000 316.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[2]"><path d="M 64.000000 415.000000 L 331.000000 415.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[1]"><path d="M 64.000000 650.000000 L 331.000000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 749.000000 L 331.000000 749.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[0]"><path d="M 337.000000 877.000000 L 603.000000 877.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[1]"><path d="M 337.000000 976.000000 L 603.000000 976.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[2]"><path d="M 337.000000 1075.000000 L 603.000000 1075.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="(b -&gt; c)[3]"><path d="M 337.000000 1174.000000 L 603.000000 1174.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3658784393)" /></g><g id="a.a note"><g class="shape" ><path d="M 19 514 H 85 C 86 514 87 514 88 515 L 105 531 C 106 532 106 533 106 534 V 580 C 106 580 106 580 106 580 H 18 C 18 580 18 580 18 580 V 515 C 18 514 18 514 19 514 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 105 580 H 19 C 18 580 18 580 18 579 V 515 C 18 514 18 514 19 514 H 84 C 85 514 85 514 85 515 V 532 C 85 533 86 534 87 534 H 105 C 106 534 106 534 106 535 V 579 C 105 580 106 580 105 580 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="552.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note</text></g><g id="b.note"><g class="shape" ><path d="M 103 1244 H 546 C 547 1244 548 1244 549 1245 L 566 1261 C 567 1262 567 1263 567 1264 V 1310 C 567 1310 567 1310 567 1310 H 103 C 102 1310 102 1310 102 1310 V 1245 C 102 1244 102 1244 103 1244 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 566 1310 H 103 C 102 1310 102 1310 102 1309 V 1245 C 102 1244 102 1244 103 1244 H 545 C 546 1244 546 1244 546 1245 V 1262 C 546 1263 547 1264 548 1264 H 566 C 567 1264 567 1264 567 1265 V 1309 C 566 1310 567 1310 566 1310 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="334.500000" y="1282.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 24 1380 H 79 C 80 1380 81 1380 82 1381 L 99 1397 C 100 1398 100 1399 100 1400 V 1510 C 100 1510 100 1510 100 1510 H 23 C 23 1510 23 1510 23 1510 V 1381 C 23 1380 23 1380 24 1380 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 99 1510 H 24 C 23 1510 23 1510 23 1509 V 1381 C 23 1380 23 1380 24 1380 H 78 C 79 1380 79 1380 79 1381 V 1398 C 79 1399 80 1400 81 1400 H 99 C 100 1400 100 1400 100 1401 V 1509 C 99 1510 100 1510 99 1510 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="61.500000" y="1418.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="61.500000" dy="0.000000">just</tspan><tspan x="61.500000" dy="17.000000">a</tspan><tspan x="61.500000" dy="17.000000">long</tspan><tspan x="61.500000" dy="17.000000">note</tspan><tspan x="61.500000" dy="17.000000">here</tspan></text></g><mask id="3658784393" maskUnits="userSpaceOnUse" x="-58" y="50" width="732" height="1530">
 <rect x="-58" y="50" width="732" height="1530" fill="white"></rect>
 <rect x="-53.000000" y="178.000000" width="155" height="16" fill="black"></rect>
 <rect x="288.000000" y="797.000000" width="19" height="16" fill="black"></rect>
@@ -49,4 +29,4 @@
 <rect x="-29.000000" y="376.000000" width="168" height="16" fill="black"></rect>
 <rect x="-17.000000" y="475.000000" width="72" height="16" fill="black"></rect>
 <rect x="27.000000" y="710.000000" width="36" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg
index 061a0a8a1..97859c507 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="771" viewBox="7 47 900 771"><rect x="7.000000" y="47.000000" width="900.000000" height="771.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 900 771"><svg id="d2-svg" width="900" height="771" viewBox="7 47 900 771"><rect x="7.000000" y="47.000000" width="900.000000" height="771.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="red" class=" fill-B5" style="stroke-width:5;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="628.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="678.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="768.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="836.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 121.500000 L 62.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(concept -- )[0]"><path d="M 678.000000 120.000000 L 678.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemOutcome -- )[0]"><path d="M 836.500000 120.000000 L 836.500000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="scorer.abc"><g class="shape" ><rect x="56.000000" y="598.000000" width="12.000000" height="30.000000" fill="yellow" class=" stroke-B1" style="stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="366.000000" y="238.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="519.000000" y="298.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="672.000000" y="358.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="830.000000" y="488.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="216.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="362.000000" y="248.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="515.000000" y="308.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="668.000000" y="368.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="826.000000" y="498.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="511.000000" y="318.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="664.000000" y="378.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="822.000000" y="508.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="660.000000" y="388.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="818.000000" y="518.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="814.000000" y="528.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1683532459" markerWidth="50.000000" markerHeight="60.000000" refX="35.000000" refY="30.000000" viewBox="0.000000 0.000000 50.000000 60.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" class="connection fill-B1" stroke-width="10" /> </marker><path d="M 69.500000 188.000000 L 200.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:10;" marker-end="url(#mk-1683532459)" mask="url(#4143183603)" /></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 230.000000 258.000000 L 358.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 384.000000 328.000000 L 507.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 541.000000 398.000000 L 656.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 380.000000 468.000000 L 511.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 698.000000 538.000000 L 810.500000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 72.500000 608.000000 L 362.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 812.500000 678.000000 L 67.500000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 65.500000 748.000000 L 212.000000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><mask id="4143183603" maskUnits="userSpaceOnUse" x="7" y="47" width="900" height="771">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="red" class=" fill-B5" style="stroke-width:5;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="628.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="678.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="768.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="836.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 121.500000 L 62.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(concept -- )[0]"><path d="M 678.000000 120.000000 L 678.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemOutcome -- )[0]"><path d="M 836.500000 120.000000 L 836.500000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="scorer.abc"><g class="shape" ><rect x="56.000000" y="598.000000" width="12.000000" height="30.000000" fill="yellow" class=" stroke-B1" style="stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="366.000000" y="238.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="519.000000" y="298.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="672.000000" y="358.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="830.000000" y="488.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="216.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="362.000000" y="248.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="515.000000" y="308.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="668.000000" y="368.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="826.000000" y="498.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="511.000000" y="318.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="664.000000" y="378.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="822.000000" y="508.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="660.000000" y="388.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="818.000000" y="518.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="814.000000" y="528.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1683532459" markerWidth="50.000000" markerHeight="60.000000" refX="35.000000" refY="30.000000" viewBox="0.000000 0.000000 50.000000 60.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" class="connection fill-B1" stroke-width="10" /> </marker><path d="M 69.500000 188.000000 L 200.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:10;" marker-end="url(#mk-1683532459)" mask="url(#4143183603)" /></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 230.000000 258.000000 L 358.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 384.000000 328.000000 L 507.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 541.000000 398.000000 L 656.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 380.000000 468.000000 L 511.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 698.000000 538.000000 L 810.500000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 72.500000 608.000000 L 362.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 812.500000 678.000000 L 67.500000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 65.500000 748.000000 L 212.000000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><mask id="4143183603" maskUnits="userSpaceOnUse" x="7" y="47" width="900" height="771">
 <rect x="7" y="47" width="900" height="771" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg
index 061a0a8a1..97859c507 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="771" viewBox="7 47 900 771"><rect x="7.000000" y="47.000000" width="900.000000" height="771.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 900 771"><svg id="d2-svg" width="900" height="771" viewBox="7 47 900 771"><rect x="7.000000" y="47.000000" width="900.000000" height="771.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="red" class=" fill-B5" style="stroke-width:5;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="628.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="678.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="768.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="836.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 121.500000 L 62.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(concept -- )[0]"><path d="M 678.000000 120.000000 L 678.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemOutcome -- )[0]"><path d="M 836.500000 120.000000 L 836.500000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="scorer.abc"><g class="shape" ><rect x="56.000000" y="598.000000" width="12.000000" height="30.000000" fill="yellow" class=" stroke-B1" style="stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="366.000000" y="238.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="519.000000" y="298.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="672.000000" y="358.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="830.000000" y="488.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="216.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="362.000000" y="248.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="515.000000" y="308.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="668.000000" y="368.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="826.000000" y="498.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="511.000000" y="318.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="664.000000" y="378.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="822.000000" y="508.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="660.000000" y="388.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="818.000000" y="518.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="814.000000" y="528.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1683532459" markerWidth="50.000000" markerHeight="60.000000" refX="35.000000" refY="30.000000" viewBox="0.000000 0.000000 50.000000 60.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" class="connection fill-B1" stroke-width="10" /> </marker><path d="M 69.500000 188.000000 L 200.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:10;" marker-end="url(#mk-1683532459)" mask="url(#4143183603)" /></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 230.000000 258.000000 L 358.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 384.000000 328.000000 L 507.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 541.000000 398.000000 L 656.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 380.000000 468.000000 L 511.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 698.000000 538.000000 L 810.500000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 72.500000 608.000000 L 362.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 812.500000 678.000000 L 67.500000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 65.500000 748.000000 L 212.000000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><mask id="4143183603" maskUnits="userSpaceOnUse" x="7" y="47" width="900" height="771">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="red" class=" fill-B5" style="stroke-width:5;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="628.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="678.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="768.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="836.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 121.500000 L 62.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(concept -- )[0]"><path d="M 678.000000 120.000000 L 678.000000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="(itemOutcome -- )[0]"><path d="M 836.500000 120.000000 L 836.500000 817.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#4143183603)" /></g><g id="scorer.abc"><g class="shape" ><rect x="56.000000" y="598.000000" width="12.000000" height="30.000000" fill="yellow" class=" stroke-B1" style="stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="366.000000" y="238.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="519.000000" y="298.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="672.000000" y="358.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="830.000000" y="488.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="216.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="362.000000" y="248.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="515.000000" y="308.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="668.000000" y="368.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="826.000000" y="498.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="511.000000" y="318.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="664.000000" y="378.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="822.000000" y="508.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="660.000000" y="388.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="818.000000" y="518.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="814.000000" y="528.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1683532459" markerWidth="50.000000" markerHeight="60.000000" refX="35.000000" refY="30.000000" viewBox="0.000000 0.000000 50.000000 60.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" class="connection fill-B1" stroke-width="10" /> </marker><path d="M 69.500000 188.000000 L 200.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:10;" marker-end="url(#mk-1683532459)" mask="url(#4143183603)" /></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 230.000000 258.000000 L 358.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 384.000000 328.000000 L 507.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 541.000000 398.000000 L 656.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 380.000000 468.000000 L 511.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 698.000000 538.000000 L 810.500000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 72.500000 608.000000 L 362.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 812.500000 678.000000 L 67.500000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 65.500000 748.000000 L 212.000000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4143183603)" /></g><mask id="4143183603" maskUnits="userSpaceOnUse" x="7" y="47" width="900" height="771">
 <rect x="7" y="47" width="900" height="771" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
index f7be32f14..82e9e98be 100644
--- a/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="870" height="908" viewBox="-30 50 870 908"><rect x="-30.000000" y="50.000000" width="870.000000" height="908.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 870 908"><svg id="d2-svg" width="870" height="908" viewBox="-30 50 870 908"><rect x="-30.000000" y="50.000000" width="870.000000" height="908.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="211.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="261.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="410.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="460.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="560.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="610.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(b -- )[0]"><path d="M 261.000000 120.000000 L 261.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(c -- )[0]"><path d="M 460.000000 120.000000 L 460.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(d -- )[0]"><path d="M 610.000000 120.000000 L 610.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 257.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(b -&gt; c)[0]"><path d="M 263.000000 530.000000 L 456.000000 530.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(c -&gt; b)[0]"><path d="M 458.000000 752.000000 L 265.000000 752.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /><text x="360.500000" y="758.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 1 258 H 103 C 104 258 105 258 106 259 L 123 275 C 124 276 124 277 124 278 V 324 C 124 324 124 324 124 324 H 0 C 0 324 0 324 0 324 V 259 C 0 258 0 258 1 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 123 324 H 1 C 0 324 -0 324 -0 323 V 259 C 0 258 0 258 1 258 H 102 C 103 258 103 258 103 259 V 276 C 103 277 104 278 105 278 H 123 C 124 278 124 278 124 279 V 323 C 123 324 124 324 123 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -28 394 H 132 C 133 394 134 394 135 395 L 152 411 C 153 412 153 413 153 414 V 460 C 153 460 153 460 153 460 H -28 C -28 460 -28 460 -28 460 V 395 C -28 394 -28 394 -28 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 152 460 H -27 C -28 460 -28 460 -28 459 V 395 C -28 394 -28 394 -27 394 H 131 C 132 394 132 394 132 395 V 412 C 132 413 133 414 134 414 H 152 C 153 414 153 414 153 415 V 459 C 152 460 153 460 152 460 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">another explanation</text></g><g id="b.&#34;Some one who believes imaginary things\n appear right before your i&#39;s.&#34;"><g class="shape" ><path d="M 103 600 H 399 C 400 600 401 600 402 601 L 419 617 C 420 618 420 619 420 620 V 682 C 420 682 420 682 420 682 H 103 C 102 682 102 682 102 682 V 601 C 102 600 102 600 103 600 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 419 682 H 103 C 102 682 102 682 102 681 V 601 C 102 600 102 600 103 600 H 398 C 399 600 399 600 399 601 V 618 C 399 619 400 620 401 620 H 419 C 420 620 420 620 420 621 V 681 C 419 682 420 682 419 682 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="261.000000" y="638.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="261.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="261.000000" dy="18.500000"> appear right before your i&#39;s.</tspan></text></g><g id="d.The earth is like a tiny grain of sand, only much, much heavier"><g class="shape" ><path d="M 383 822 H 817 C 818 822 819 822 820 823 L 837 839 C 838 840 838 841 838 842 V 888 C 838 888 838 888 838 888 H 383 C 382 888 382 888 382 888 V 823 C 382 822 382 822 383 822 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 837 888 H 383 C 382 888 382 888 382 887 V 823 C 382 822 382 822 383 822 H 816 C 817 822 817 822 817 823 V 840 C 817 841 818 842 819 842 H 837 C 838 842 838 842 838 843 V 887 C 837 888 838 888 837 888 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="610.000000" y="860.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="2491813795" maskUnits="userSpaceOnUse" x="-30" y="50" width="870" height="908">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="211.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="261.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="410.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="460.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="560.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="610.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(b -- )[0]"><path d="M 261.000000 120.000000 L 261.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(c -- )[0]"><path d="M 460.000000 120.000000 L 460.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(d -- )[0]"><path d="M 610.000000 120.000000 L 610.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 257.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(b -&gt; c)[0]"><path d="M 263.000000 530.000000 L 456.000000 530.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(c -&gt; b)[0]"><path d="M 458.000000 752.000000 L 265.000000 752.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /><text x="360.500000" y="758.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 1 258 H 103 C 104 258 105 258 106 259 L 123 275 C 124 276 124 277 124 278 V 324 C 124 324 124 324 124 324 H 0 C 0 324 0 324 0 324 V 259 C 0 258 0 258 1 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 123 324 H 1 C 0 324 -0 324 -0 323 V 259 C 0 258 0 258 1 258 H 102 C 103 258 103 258 103 259 V 276 C 103 277 104 278 105 278 H 123 C 124 278 124 278 124 279 V 323 C 123 324 124 324 123 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -28 394 H 132 C 133 394 134 394 135 395 L 152 411 C 153 412 153 413 153 414 V 460 C 153 460 153 460 153 460 H -28 C -28 460 -28 460 -28 460 V 395 C -28 394 -28 394 -28 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 152 460 H -27 C -28 460 -28 460 -28 459 V 395 C -28 394 -28 394 -27 394 H 131 C 132 394 132 394 132 395 V 412 C 132 413 133 414 134 414 H 152 C 153 414 153 414 153 415 V 459 C 152 460 153 460 152 460 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">another explanation</text></g><g id="b.&#34;Some one who believes imaginary things\n appear right before your i&#39;s.&#34;"><g class="shape" ><path d="M 103 600 H 399 C 400 600 401 600 402 601 L 419 617 C 420 618 420 619 420 620 V 682 C 420 682 420 682 420 682 H 103 C 102 682 102 682 102 682 V 601 C 102 600 102 600 103 600 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 419 682 H 103 C 102 682 102 682 102 681 V 601 C 102 600 102 600 103 600 H 398 C 399 600 399 600 399 601 V 618 C 399 619 400 620 401 620 H 419 C 420 620 420 620 420 621 V 681 C 419 682 420 682 419 682 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="261.000000" y="638.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="261.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="261.000000" dy="18.500000"> appear right before your i&#39;s.</tspan></text></g><g id="d.The earth is like a tiny grain of sand, only much, much heavier"><g class="shape" ><path d="M 383 822 H 817 C 818 822 819 822 820 823 L 837 839 C 838 840 838 841 838 842 V 888 C 838 888 838 888 838 888 H 383 C 382 888 382 888 382 888 V 823 C 382 822 382 822 383 822 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 837 888 H 383 C 382 888 382 888 382 887 V 823 C 382 822 382 822 383 822 H 816 C 817 822 817 822 817 823 V 840 C 817 841 818 842 819 842 H 837 C 838 842 838 842 838 843 V 887 C 837 888 838 888 837 888 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="610.000000" y="860.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="2491813795" maskUnits="userSpaceOnUse" x="-30" y="50" width="870" height="908">
 <rect x="-30" y="50" width="870" height="908" fill="white"></rect>
 <rect x="344.000000" y="742.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
index f7be32f14..82e9e98be 100644
--- a/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="870" height="908" viewBox="-30 50 870 908"><rect x="-30.000000" y="50.000000" width="870.000000" height="908.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 870 908"><svg id="d2-svg" width="870" height="908" viewBox="-30 50 870 908"><rect x="-30.000000" y="50.000000" width="870.000000" height="908.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="211.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="261.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="410.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="460.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="560.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="610.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(b -- )[0]"><path d="M 261.000000 120.000000 L 261.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(c -- )[0]"><path d="M 460.000000 120.000000 L 460.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(d -- )[0]"><path d="M 610.000000 120.000000 L 610.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 257.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(b -&gt; c)[0]"><path d="M 263.000000 530.000000 L 456.000000 530.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(c -&gt; b)[0]"><path d="M 458.000000 752.000000 L 265.000000 752.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /><text x="360.500000" y="758.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 1 258 H 103 C 104 258 105 258 106 259 L 123 275 C 124 276 124 277 124 278 V 324 C 124 324 124 324 124 324 H 0 C 0 324 0 324 0 324 V 259 C 0 258 0 258 1 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 123 324 H 1 C 0 324 -0 324 -0 323 V 259 C 0 258 0 258 1 258 H 102 C 103 258 103 258 103 259 V 276 C 103 277 104 278 105 278 H 123 C 124 278 124 278 124 279 V 323 C 123 324 124 324 123 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -28 394 H 132 C 133 394 134 394 135 395 L 152 411 C 153 412 153 413 153 414 V 460 C 153 460 153 460 153 460 H -28 C -28 460 -28 460 -28 460 V 395 C -28 394 -28 394 -28 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 152 460 H -27 C -28 460 -28 460 -28 459 V 395 C -28 394 -28 394 -27 394 H 131 C 132 394 132 394 132 395 V 412 C 132 413 133 414 134 414 H 152 C 153 414 153 414 153 415 V 459 C 152 460 153 460 152 460 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">another explanation</text></g><g id="b.&#34;Some one who believes imaginary things\n appear right before your i&#39;s.&#34;"><g class="shape" ><path d="M 103 600 H 399 C 400 600 401 600 402 601 L 419 617 C 420 618 420 619 420 620 V 682 C 420 682 420 682 420 682 H 103 C 102 682 102 682 102 682 V 601 C 102 600 102 600 103 600 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 419 682 H 103 C 102 682 102 682 102 681 V 601 C 102 600 102 600 103 600 H 398 C 399 600 399 600 399 601 V 618 C 399 619 400 620 401 620 H 419 C 420 620 420 620 420 621 V 681 C 419 682 420 682 419 682 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="261.000000" y="638.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="261.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="261.000000" dy="18.500000"> appear right before your i&#39;s.</tspan></text></g><g id="d.The earth is like a tiny grain of sand, only much, much heavier"><g class="shape" ><path d="M 383 822 H 817 C 818 822 819 822 820 823 L 837 839 C 838 840 838 841 838 842 V 888 C 838 888 838 888 838 888 H 383 C 382 888 382 888 382 888 V 823 C 382 822 382 822 383 822 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 837 888 H 383 C 382 888 382 888 382 887 V 823 C 382 822 382 822 383 822 H 816 C 817 822 817 822 817 823 V 840 C 817 841 818 842 819 842 H 837 C 838 842 838 842 838 843 V 887 C 837 888 838 888 837 888 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="610.000000" y="860.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="2491813795" maskUnits="userSpaceOnUse" x="-30" y="50" width="870" height="908">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="211.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="261.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="410.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="460.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="560.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="610.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(b -- )[0]"><path d="M 261.000000 120.000000 L 261.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(c -- )[0]"><path d="M 460.000000 120.000000 L 460.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(d -- )[0]"><path d="M 610.000000 120.000000 L 610.000000 957.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2491813795)" /></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 257.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(b -&gt; c)[0]"><path d="M 263.000000 530.000000 L 456.000000 530.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /></g><g id="(c -&gt; b)[0]"><path d="M 458.000000 752.000000 L 265.000000 752.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2491813795)" /><text x="360.500000" y="758.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 1 258 H 103 C 104 258 105 258 106 259 L 123 275 C 124 276 124 277 124 278 V 324 C 124 324 124 324 124 324 H 0 C 0 324 0 324 0 324 V 259 C 0 258 0 258 1 258 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 123 324 H 1 C 0 324 -0 324 -0 323 V 259 C 0 258 0 258 1 258 H 102 C 103 258 103 258 103 259 V 276 C 103 277 104 278 105 278 H 123 C 124 278 124 278 124 279 V 323 C 123 324 124 324 123 324 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="296.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -28 394 H 132 C 133 394 134 394 135 395 L 152 411 C 153 412 153 413 153 414 V 460 C 153 460 153 460 153 460 H -28 C -28 460 -28 460 -28 460 V 395 C -28 394 -28 394 -28 394 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 152 460 H -27 C -28 460 -28 460 -28 459 V 395 C -28 394 -28 394 -27 394 H 131 C 132 394 132 394 132 395 V 412 C 132 413 133 414 134 414 H 152 C 153 414 153 414 153 415 V 459 C 152 460 153 460 152 460 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.500000" y="432.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">another explanation</text></g><g id="b.&#34;Some one who believes imaginary things\n appear right before your i&#39;s.&#34;"><g class="shape" ><path d="M 103 600 H 399 C 400 600 401 600 402 601 L 419 617 C 420 618 420 619 420 620 V 682 C 420 682 420 682 420 682 H 103 C 102 682 102 682 102 682 V 601 C 102 600 102 600 103 600 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 419 682 H 103 C 102 682 102 682 102 681 V 601 C 102 600 102 600 103 600 H 398 C 399 600 399 600 399 601 V 618 C 399 619 400 620 401 620 H 419 C 420 620 420 620 420 621 V 681 C 419 682 420 682 419 682 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="261.000000" y="638.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="261.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="261.000000" dy="18.500000"> appear right before your i&#39;s.</tspan></text></g><g id="d.The earth is like a tiny grain of sand, only much, much heavier"><g class="shape" ><path d="M 383 822 H 817 C 818 822 819 822 820 823 L 837 839 C 838 840 838 841 838 842 V 888 C 838 888 838 888 838 888 H 383 C 382 888 382 888 382 888 V 823 C 382 822 382 822 383 822 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 837 888 H 383 C 382 888 382 888 382 887 V 823 C 382 822 382 822 383 822 H 816 C 817 822 817 822 817 823 V 840 C 817 841 818 842 819 842 H 837 C 838 842 838 842 838 843 V 887 C 837 888 838 888 837 888 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="610.000000" y="860.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="2491813795" maskUnits="userSpaceOnUse" x="-30" y="50" width="870" height="908">
 <rect x="-30" y="50" width="870" height="908" fill="white"></rect>
 <rect x="344.000000" y="742.000000" width="33" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
index 52164676b..964a02e24 100644
--- a/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1528" height="1311" viewBox="0 0 1528 1311"><rect x="0.000000" y="0.000000" width="1528.000000" height="1311.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1528 1311"><svg id="d2-svg" width="1528" height="1311" viewBox="0 0 1528 1311"><rect x="0.000000" y="0.000000" width="1528.000000" height="1311.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="How this is rendered"><g class="shape" ><rect x="0.000000" y="0.000000" width="1528.000000" height="1311.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="764.000000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="219.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="269.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="372.000000" y="88.000000" width="122.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="433.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="544.000000" y="88.000000" width="105.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="596.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="689.000000" y="88.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="749.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="849.000000" y="88.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="905.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1002.000000" y="88.000000" width="121.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1062.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1163.000000" y="88.000000" width="169.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1247.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="1372.000000" y="88.000000" width="144.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1444.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 269.000000 156.000000 L 269.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 433.000000 156.000000 L 433.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 596.500000 156.000000 L 596.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 749.000000 156.000000 L 749.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 905.500000 156.000000 L 905.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1062.500000 156.000000 L 1062.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1247.500000 156.000000 L 1247.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 1444.000000 156.000000 L 1444.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="590.000000" y="630.000000" width="12.000000" height="259.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="743.000000" y="1079.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="562.000000" y="765.000000" width="921.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="567.000000" y="770.000000" width="180.000000" height="21.000000" class=" fill-N5" /><text x="657.000000" y="786.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 224.000000 L 265.000000 224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="165.500000" y="230.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 267.000000 294.000000 L 66.000000 294.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="166.000000" y="300.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 64.000000 364.000000 L 429.000000 364.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="248.000000" y="370.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 431.000000 570.000000 L 66.000000 570.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="247.500000" y="576.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 64.000000 640.000000 L 586.500000 640.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="326.000000" y="646.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 604.500000 710.000000 L 1243.500000 710.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="925.500000" y="716.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 604.500000 809.000000 L 1440.000000 809.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="1023.500000" y="815.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 606.500000 879.000000 L 1245.500000 879.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#3396228945)" /><text x="925.000000" y="885.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 594.500000 949.000000 L 66.000000 949.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="329.500000" y="955.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 64.000000 1019.000000 L 745.000000 1019.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="406.000000" y="1025.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 757.000000 1089.000000 L 901.500000 1089.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="830.000000" y="1095.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 757.000000 1159.000000 L 1058.500000 1159.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="909.000000" y="1165.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 741.000000 1229.000000 L 66.000000 1229.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="403.000000" y="1235.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 310 434 H 535 C 536 434 537 434 538 435 L 555 451 C 556 452 556 453 556 454 V 500 C 556 500 556 500 556 500 H 310 C 309 500 309 500 309 500 V 435 C 309 434 309 434 310 434 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 555 500 H 310 C 309 500 309 500 309 499 V 435 C 309 434 309 434 310 434 H 534 C 535 434 535 434 535 435 V 452 C 535 453 536 454 537 454 H 555 C 556 454 556 454 556 455 V 499 C 555 500 556 500 555 500 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="432.500000" y="472.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">measurements also take place</text></g><mask id="3396228945" maskUnits="userSpaceOnUse" x="0" y="0" width="1528" height="1311">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="How this is rendered"><g class="shape" ><rect x="0.000000" y="0.000000" width="1528.000000" height="1311.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="764.000000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="219.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="269.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="372.000000" y="88.000000" width="122.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="433.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="544.000000" y="88.000000" width="105.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="596.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="689.000000" y="88.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="749.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="849.000000" y="88.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="905.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1002.000000" y="88.000000" width="121.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1062.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1163.000000" y="88.000000" width="169.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1247.500000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="1372.000000" y="88.000000" width="144.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1444.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 269.000000 156.000000 L 269.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 433.000000 156.000000 L 433.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 596.500000 156.000000 L 596.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 749.000000 156.000000 L 749.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 905.500000 156.000000 L 905.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1062.500000 156.000000 L 1062.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1247.500000 156.000000 L 1247.500000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 1444.000000 156.000000 L 1444.000000 1298.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3396228945)" /></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="590.000000" y="630.000000" width="12.000000" height="259.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="743.000000" y="1079.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="562.000000" y="765.000000" width="921.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="567.000000" y="770.000000" width="180.000000" height="21.000000" class=" fill-N5" /><text x="657.000000" y="786.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 224.000000 L 265.000000 224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="165.500000" y="230.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 267.000000 294.000000 L 66.000000 294.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="166.000000" y="300.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 64.000000 364.000000 L 429.000000 364.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="248.000000" y="370.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 431.000000 570.000000 L 66.000000 570.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="247.500000" y="576.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 64.000000 640.000000 L 586.500000 640.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="326.000000" y="646.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 604.500000 710.000000 L 1243.500000 710.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="925.500000" y="716.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 604.500000 809.000000 L 1440.000000 809.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="1023.500000" y="815.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 606.500000 879.000000 L 1245.500000 879.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#3396228945)" /><text x="925.000000" y="885.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 594.500000 949.000000 L 66.000000 949.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="329.500000" y="955.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 64.000000 1019.000000 L 745.000000 1019.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="406.000000" y="1025.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 757.000000 1089.000000 L 901.500000 1089.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="830.000000" y="1095.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 757.000000 1159.000000 L 1058.500000 1159.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="909.000000" y="1165.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 741.000000 1229.000000 L 66.000000 1229.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3396228945)" /><text x="403.000000" y="1235.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 310 434 H 535 C 536 434 537 434 538 435 L 555 451 C 556 452 556 453 556 454 V 500 C 556 500 556 500 556 500 H 310 C 309 500 309 500 309 500 V 435 C 309 434 309 434 310 434 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 555 500 H 310 C 309 500 309 500 309 499 V 435 C 309 434 309 434 310 434 H 534 C 535 434 535 434 535 435 V 452 C 535 453 536 454 537 454 H 555 C 556 454 556 454 556 455 V 499 C 555 500 556 500 555 500 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="432.500000" y="472.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">measurements also take place</text></g><mask id="3396228945" maskUnits="userSpaceOnUse" x="0" y="0" width="1528" height="1311">
 <rect x="0" y="0" width="1528" height="1311" fill="white"></rect>
 <rect x="567.000000" y="770.000000" width="180" height="16" fill="black"></rect>
 <rect x="82.000000" y="214.000000" width="167" height="21" fill="black"></rect>
@@ -60,4 +40,4 @@
 <rect x="776.000000" y="1079.000000" width="108" height="21" fill="black"></rect>
 <rect x="864.000000" y="1149.000000" width="90" height="21" fill="black"></rect>
 <rect x="359.000000" y="1219.000000" width="88" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
index 79428ddf1..bdf042724 100644
--- a/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1528" height="1311" viewBox="12 12 1528 1311"><rect x="12.000000" y="12.000000" width="1528.000000" height="1311.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1528 1311"><svg id="d2-svg" width="1528" height="1311" viewBox="12 12 1528 1311"><rect x="12.000000" y="12.000000" width="1528.000000" height="1311.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="How this is rendered"><g class="shape" ><rect x="12.000000" y="12.000000" width="1528.000000" height="1311.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="776.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="231.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="281.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="384.000000" y="100.000000" width="122.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="445.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="556.000000" y="100.000000" width="105.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="608.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="701.000000" y="100.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="761.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="861.000000" y="100.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="917.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1014.000000" y="100.000000" width="121.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1074.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1175.000000" y="100.000000" width="169.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1259.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="1384.000000" y="100.000000" width="144.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1456.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 281.000000 168.000000 L 281.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 445.000000 168.000000 L 445.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 608.500000 168.000000 L 608.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 761.000000 168.000000 L 761.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 917.500000 168.000000 L 917.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1074.500000 168.000000 L 1074.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1259.500000 168.000000 L 1259.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 1456.000000 168.000000 L 1456.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="602.000000" y="642.000000" width="12.000000" height="259.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="755.000000" y="1091.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="574.000000" y="777.000000" width="921.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="579.000000" y="782.000000" width="180.000000" height="21.000000" class=" fill-N5" /><text x="669.000000" y="798.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 236.000000 L 277.000000 236.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="177.500000" y="242.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 279.000000 306.000000 L 78.000000 306.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="178.000000" y="312.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 76.000000 376.000000 L 441.000000 376.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="260.000000" y="382.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 443.000000 582.000000 L 78.000000 582.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="259.500000" y="588.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 76.000000 652.000000 L 598.500000 652.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="338.000000" y="658.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 616.500000 722.000000 L 1255.500000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="937.500000" y="728.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 616.500000 821.000000 L 1452.000000 821.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="1035.500000" y="827.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 618.500000 891.000000 L 1257.500000 891.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#3988998137)" /><text x="937.000000" y="897.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 606.500000 961.000000 L 78.000000 961.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="341.500000" y="967.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 76.000000 1031.000000 L 757.000000 1031.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="418.000000" y="1037.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 769.000000 1101.000000 L 913.500000 1101.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="842.000000" y="1107.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 769.000000 1171.000000 L 1070.500000 1171.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="921.000000" y="1177.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 753.000000 1241.000000 L 78.000000 1241.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="415.000000" y="1247.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 322 446 H 547 C 548 446 549 446 550 447 L 567 463 C 568 464 568 465 568 466 V 512 C 568 512 568 512 568 512 H 322 C 321 512 321 512 321 512 V 447 C 321 446 321 446 322 446 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 567 512 H 322 C 321 512 321 512 321 511 V 447 C 321 446 321 446 322 446 H 546 C 547 446 547 446 547 447 V 464 C 547 465 548 466 549 466 H 567 C 568 466 568 466 568 467 V 511 C 567 512 568 512 567 512 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="444.500000" y="484.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">measurements also take place</text></g><mask id="3988998137" maskUnits="userSpaceOnUse" x="12" y="12" width="1528" height="1311">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="How this is rendered"><g class="shape" ><rect x="12.000000" y="12.000000" width="1528.000000" height="1311.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="776.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="231.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="281.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="384.000000" y="100.000000" width="122.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="445.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="556.000000" y="100.000000" width="105.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="608.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="701.000000" y="100.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="761.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="861.000000" y="100.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="917.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1014.000000" y="100.000000" width="121.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1074.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1175.000000" y="100.000000" width="169.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1259.500000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="1384.000000" y="100.000000" width="144.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1456.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 281.000000 168.000000 L 281.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 445.000000 168.000000 L 445.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 608.500000 168.000000 L 608.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 761.000000 168.000000 L 761.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 917.500000 168.000000 L 917.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1074.500000 168.000000 L 1074.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1259.500000 168.000000 L 1259.500000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 1456.000000 168.000000 L 1456.000000 1310.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3988998137)" /></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="602.000000" y="642.000000" width="12.000000" height="259.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="755.000000" y="1091.000000" width="12.000000" height="160.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="574.000000" y="777.000000" width="921.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="579.000000" y="782.000000" width="180.000000" height="21.000000" class=" fill-N5" /><text x="669.000000" y="798.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 236.000000 L 277.000000 236.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="177.500000" y="242.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 279.000000 306.000000 L 78.000000 306.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="178.000000" y="312.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 76.000000 376.000000 L 441.000000 376.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="260.000000" y="382.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 443.000000 582.000000 L 78.000000 582.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="259.500000" y="588.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 76.000000 652.000000 L 598.500000 652.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="338.000000" y="658.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 616.500000 722.000000 L 1255.500000 722.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="937.500000" y="728.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 616.500000 821.000000 L 1452.000000 821.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="1035.500000" y="827.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 618.500000 891.000000 L 1257.500000 891.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#3988998137)" /><text x="937.000000" y="897.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 606.500000 961.000000 L 78.000000 961.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="341.500000" y="967.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 76.000000 1031.000000 L 757.000000 1031.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="418.000000" y="1037.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 769.000000 1101.000000 L 913.500000 1101.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="842.000000" y="1107.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 769.000000 1171.000000 L 1070.500000 1171.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="921.000000" y="1177.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 753.000000 1241.000000 L 78.000000 1241.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3988998137)" /><text x="415.000000" y="1247.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 322 446 H 547 C 548 446 549 446 550 447 L 567 463 C 568 464 568 465 568 466 V 512 C 568 512 568 512 568 512 H 322 C 321 512 321 512 321 512 V 447 C 321 446 321 446 322 446 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 567 512 H 322 C 321 512 321 512 321 511 V 447 C 321 446 321 446 322 446 H 546 C 547 446 547 446 547 447 V 464 C 547 465 548 466 549 466 H 567 C 568 466 568 466 568 467 V 511 C 567 512 568 512 567 512 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="444.500000" y="484.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">measurements also take place</text></g><mask id="3988998137" maskUnits="userSpaceOnUse" x="12" y="12" width="1528" height="1311">
 <rect x="12" y="12" width="1528" height="1311" fill="white"></rect>
 <rect x="579.000000" y="782.000000" width="180" height="16" fill="black"></rect>
 <rect x="94.000000" y="226.000000" width="167" height="21" fill="black"></rect>
@@ -60,4 +40,4 @@
 <rect x="788.000000" y="1091.000000" width="108" height="21" fill="black"></rect>
 <rect x="876.000000" y="1161.000000" width="90" height="21" fill="black"></rect>
 <rect x="371.000000" y="1231.000000" width="88" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
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 fb5ca3fe3..6509c155b 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
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="354" height="628" viewBox="10 50 354 628"><rect x="10.000000" y="50.000000" width="354.000000" height="628.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 354 628"><svg id="d2-svg" width="354" height="628" viewBox="10 50 354 628"><rect x="10.000000" y="50.000000" width="354.000000" height="628.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="b.1"><g class="shape" ><rect x="206.000000" y="363.000000" width="12.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="56.000000" y="518.000000" width="12.000000" height="100.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="206.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="202.000000" y="433.000000" width="20.000000" height="45.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="52.000000" y="528.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 66.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.500000" y="216.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 258.000000 L 208.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="137.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 214.000000 328.000000 L 282.000000 328.000000 S 292.000000 328.000000 292.000000 338.000000 L 292.000000 363.000000 S 292.000000 373.000000 282.000000 373.000000 L 222.000000 373.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="353.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 220.000000 398.000000 L 282.000000 398.000000 S 292.000000 398.000000 292.000000 408.000000 L 292.000000 433.000000 S 292.000000 443.000000 282.000000 443.000000 L 226.000000 443.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 224.000000 468.000000 L 282.000000 468.000000 S 292.000000 468.000000 292.000000 478.000000 L 292.000000 503.000000 S 292.000000 513.000000 282.000000 513.000000 L 216.000000 513.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="501.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 210.000000 538.000000 L 76.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.000000" y="544.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 70.000000 608.000000 L 202.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /></g><mask id="1934201299" maskUnits="userSpaceOnUse" x="10" y="50" width="354" height="628">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="b.1"><g class="shape" ><rect x="206.000000" y="363.000000" width="12.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="56.000000" y="518.000000" width="12.000000" height="100.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="206.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="202.000000" y="433.000000" width="20.000000" height="45.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="52.000000" y="528.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 66.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.500000" y="216.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 258.000000 L 208.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="137.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 214.000000 328.000000 L 282.000000 328.000000 S 292.000000 328.000000 292.000000 338.000000 L 292.000000 363.000000 S 292.000000 373.000000 282.000000 373.000000 L 222.000000 373.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="353.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 220.000000 398.000000 L 282.000000 398.000000 S 292.000000 398.000000 292.000000 408.000000 L 292.000000 433.000000 S 292.000000 443.000000 282.000000 443.000000 L 226.000000 443.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 224.000000 468.000000 L 282.000000 468.000000 S 292.000000 468.000000 292.000000 478.000000 L 292.000000 503.000000 S 292.000000 513.000000 282.000000 513.000000 L 216.000000 513.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="501.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 210.000000 538.000000 L 76.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.000000" y="544.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 70.000000 608.000000 L 202.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /></g><mask id="1934201299" maskUnits="userSpaceOnUse" x="10" y="50" width="354" height="628">
 <rect x="10" y="50" width="354" height="628" fill="white"></rect>
 <rect x="91.000000" y="200.000000" width="103" height="21" fill="black"></rect>
 <rect x="86.000000" y="248.000000" width="102" height="21" fill="black"></rect>
@@ -52,4 +32,4 @@
 <rect x="221.000000" y="408.000000" width="143" height="21" fill="black"></rect>
 <rect x="261.000000" y="485.000000" width="62" height="21" fill="black"></rect>
 <rect x="124.000000" y="528.000000" width="36" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
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 fb5ca3fe3..6509c155b 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
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="354" height="628" viewBox="10 50 354 628"><rect x="10.000000" y="50.000000" width="354.000000" height="628.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 354 628"><svg id="d2-svg" width="354" height="628" viewBox="10 50 354 628"><rect x="10.000000" y="50.000000" width="354.000000" height="628.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="b.1"><g class="shape" ><rect x="206.000000" y="363.000000" width="12.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="56.000000" y="518.000000" width="12.000000" height="100.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="206.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="202.000000" y="433.000000" width="20.000000" height="45.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="52.000000" y="528.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 66.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.500000" y="216.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 258.000000 L 208.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="137.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 214.000000 328.000000 L 282.000000 328.000000 S 292.000000 328.000000 292.000000 338.000000 L 292.000000 363.000000 S 292.000000 373.000000 282.000000 373.000000 L 222.000000 373.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="353.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 220.000000 398.000000 L 282.000000 398.000000 S 292.000000 398.000000 292.000000 408.000000 L 292.000000 433.000000 S 292.000000 443.000000 282.000000 443.000000 L 226.000000 443.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 224.000000 468.000000 L 282.000000 468.000000 S 292.000000 468.000000 292.000000 478.000000 L 292.000000 503.000000 S 292.000000 513.000000 282.000000 513.000000 L 216.000000 513.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="501.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 210.000000 538.000000 L 76.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.000000" y="544.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 70.000000 608.000000 L 202.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /></g><mask id="1934201299" maskUnits="userSpaceOnUse" x="10" y="50" width="354" height="628">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="(b -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 677.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1934201299)" /></g><g id="b.1"><g class="shape" ><rect x="206.000000" y="363.000000" width="12.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="56.000000" y="518.000000" width="12.000000" height="100.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="206.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="202.000000" y="433.000000" width="20.000000" height="45.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="52.000000" y="528.000000" width="20.000000" height="30.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 132.000000 188.000000 S 142.000000 188.000000 142.000000 198.000000 L 142.000000 223.000000 S 142.000000 233.000000 132.000000 233.000000 L 66.000000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.500000" y="216.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 64.000000 258.000000 L 208.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="137.000000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 214.000000 328.000000 L 282.000000 328.000000 S 292.000000 328.000000 292.000000 338.000000 L 292.000000 363.000000 S 292.000000 373.000000 282.000000 373.000000 L 222.000000 373.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="353.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 220.000000 398.000000 L 282.000000 398.000000 S 292.000000 398.000000 292.000000 408.000000 L 292.000000 433.000000 S 292.000000 443.000000 282.000000 443.000000 L 226.000000 443.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.500000" y="424.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 224.000000 468.000000 L 282.000000 468.000000 S 292.000000 468.000000 292.000000 478.000000 L 292.000000 503.000000 S 292.000000 513.000000 282.000000 513.000000 L 216.000000 513.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="292.000000" y="501.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 210.000000 538.000000 L 76.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /><text x="142.000000" y="544.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 70.000000 608.000000 L 202.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1934201299)" /></g><mask id="1934201299" maskUnits="userSpaceOnUse" x="10" y="50" width="354" height="628">
 <rect x="10" y="50" width="354" height="628" fill="white"></rect>
 <rect x="91.000000" y="200.000000" width="103" height="21" fill="black"></rect>
 <rect x="86.000000" y="248.000000" width="102" height="21" fill="black"></rect>
@@ -52,4 +32,4 @@
 <rect x="221.000000" y="408.000000" width="143" height="21" fill="black"></rect>
 <rect x="261.000000" y="485.000000" width="62" height="21" fill="black"></rect>
 <rect x="124.000000" y="528.000000" width="36" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
index 339e22cd1..5f73fad45 100644
--- a/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1336" height="950" viewBox="10 50 1336 950"><rect x="10.000000" y="50.000000" width="1336.000000" height="950.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1336 950"><svg id="d2-svg" width="1336" height="950" viewBox="10 50 1336 950"><rect x="10.000000" y="50.000000" width="1336.000000" height="950.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="alice"><g class="shape" ><path d="M 179 177 H 12 V 175 C 12 156 30 139 59 131 C 43 125 34 114 34 102 C 34 82 61 66 95 66 C 129 66 157 82 157 102 C 157 114 148 124 132 131 C 161 139 179 156 179 175 V 176 H 179 Z" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="95.500000" y="198.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="95.500000" dy="0.000000">Alice</tspan><tspan x="95.500000" dy="17.666667">line</tspan><tspan x="95.500000" dy="17.666667">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 406 209 H 303 V 208 C 303 196 314 186 332 181 C 322 176 316 170 316 162 C 316 150 333 140 354 140 C 375 140 392 150 392 162 C 392 169 386 176 376 180 C 394 185 405 196 405 207 V 208 H 406 Z" class=" stroke-B1 fill-B5" style="stroke-width:5;" /></g><text x="354.500000" y="230.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bob</text></g><g id="db"><g class="shape" ><path d="M 612 136 C 612 112 657 112 662 112 C 667 112 712 112 712 136 V 206 C 712 230 667 230 662 230 C 657 230 612 230 612 206 V 136 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 612 136 C 612 160 657 160 662 160 C 667 160 712 160 712 136" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="662.000000" y="188.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">db</text></g><g id="queue"><g class="shape" ><path d="M 923 164 H 1015 C 1039 164 1039 194 1039 197 C 1039 200 1039 230 1015 230 H 923 C 899 230 899 200 899 197 C 899 194 899 164 923 164 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 1015 164 C 991 164 991 194 991 197 C 991 200 991 230 1015 230" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="957.000000" y="202.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="service"><g class="shape" ><rect x="1207.000000" y="52.000000" width="137.000000" height="178.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1275.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="1275.500000" dy="0.000000">an</tspan><tspan x="1275.500000" dy="16.625000">odd</tspan><tspan x="1275.500000" dy="16.625000">service</tspan><tspan x="1275.500000" dy="16.625000">with</tspan><tspan x="1275.500000" dy="16.625000">a</tspan><tspan x="1275.500000" dy="16.625000">name</tspan><tspan x="1275.500000" dy="16.625000">in</tspan><tspan x="1275.500000" dy="16.625000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 95.500000 237.000000 L 95.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(bob -- )[0]"><path d="M 354.500000 238.500000 L 354.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(db -- )[0]"><path d="M 662.000000 232.000000 L 662.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(queue -- )[0]"><path d="M 969.000000 232.000000 L 969.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(service -- )[0]"><path d="M 1275.500000 232.000000 L 1275.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 97.500000 300.000000 L 349.000000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="306.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 358.000000 370.000000 L 1271.500000 370.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="815.500000" y="376.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">make request for something that is quite far away and requires a really long label to take all the space between the objects</text></g><g id="(service -&gt; db)[0]"><path d="M 1273.500000 440.000000 L 666.000000 440.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="968.500000" y="446.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">validate credentials</text></g><g id="(db -&gt; service)[0]"><marker id="mk-2177206569" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B2" stroke-width="2" /> </marker><path d="M 664.000000 510.000000 L 1271.500000 510.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(service -&gt; bob)[0]"><path d="M 1273.500000 580.000000 L 360.000000 580.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(bob -&gt; alice)[0]"><path d="M 351.000000 650.000000 L 99.500000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="656.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 97.500000 720.000000 L 349.000000 720.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="726.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 358.000000 790.000000 L 965.000000 790.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="661.500000" y="796.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">do it later</text></g><g id="(queue -&gt; bob)[0]"><marker id="mk-1225746125" markerWidth="25.000000" markerHeight="30.000000" refX="17.500000" refY="15.000000" viewBox="0.000000 0.000000 25.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" fill="green" class="connection" stroke-width="5" /> </marker><path d="M 965.500000 860.000000 L 364.500000 860.000000" stroke="green" fill="none" class="connection" style="stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#868989127)" /><text x="662.000000" y="866.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 351.000000 930.000000 L 99.500000 930.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="936.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Response</text></g><mask id="868989127" maskUnits="userSpaceOnUse" x="10" y="50" width="1336" height="950">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="alice"><g class="shape" ><path d="M 179 177 H 12 V 175 C 12 156 30 139 59 131 C 43 125 34 114 34 102 C 34 82 61 66 95 66 C 129 66 157 82 157 102 C 157 114 148 124 132 131 C 161 139 179 156 179 175 V 176 H 179 Z" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="95.500000" y="198.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="95.500000" dy="0.000000">Alice</tspan><tspan x="95.500000" dy="17.666667">line</tspan><tspan x="95.500000" dy="17.666667">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 406 209 H 303 V 208 C 303 196 314 186 332 181 C 322 176 316 170 316 162 C 316 150 333 140 354 140 C 375 140 392 150 392 162 C 392 169 386 176 376 180 C 394 185 405 196 405 207 V 208 H 406 Z" class=" stroke-B1 fill-B5" style="stroke-width:5;" /></g><text x="354.500000" y="230.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bob</text></g><g id="db"><g class="shape" ><path d="M 612 136 C 612 112 657 112 662 112 C 667 112 712 112 712 136 V 206 C 712 230 667 230 662 230 C 657 230 612 230 612 206 V 136 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 612 136 C 612 160 657 160 662 160 C 667 160 712 160 712 136" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="662.000000" y="188.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">db</text></g><g id="queue"><g class="shape" ><path d="M 923 164 H 1015 C 1039 164 1039 194 1039 197 C 1039 200 1039 230 1015 230 H 923 C 899 230 899 200 899 197 C 899 194 899 164 923 164 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 1015 164 C 991 164 991 194 991 197 C 991 200 991 230 1015 230" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="957.000000" y="202.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="service"><g class="shape" ><rect x="1207.000000" y="52.000000" width="137.000000" height="178.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1275.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="1275.500000" dy="0.000000">an</tspan><tspan x="1275.500000" dy="16.625000">odd</tspan><tspan x="1275.500000" dy="16.625000">service</tspan><tspan x="1275.500000" dy="16.625000">with</tspan><tspan x="1275.500000" dy="16.625000">a</tspan><tspan x="1275.500000" dy="16.625000">name</tspan><tspan x="1275.500000" dy="16.625000">in</tspan><tspan x="1275.500000" dy="16.625000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 95.500000 237.000000 L 95.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(bob -- )[0]"><path d="M 354.500000 238.500000 L 354.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(db -- )[0]"><path d="M 662.000000 232.000000 L 662.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(queue -- )[0]"><path d="M 969.000000 232.000000 L 969.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(service -- )[0]"><path d="M 1275.500000 232.000000 L 1275.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 97.500000 300.000000 L 349.000000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="306.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 358.000000 370.000000 L 1271.500000 370.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="815.500000" y="376.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">make request for something that is quite far away and requires a really long label to take all the space between the objects</text></g><g id="(service -&gt; db)[0]"><path d="M 1273.500000 440.000000 L 666.000000 440.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="968.500000" y="446.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">validate credentials</text></g><g id="(db -&gt; service)[0]"><marker id="mk-2177206569" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B2" stroke-width="2" /> </marker><path d="M 664.000000 510.000000 L 1271.500000 510.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(service -&gt; bob)[0]"><path d="M 1273.500000 580.000000 L 360.000000 580.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(bob -&gt; alice)[0]"><path d="M 351.000000 650.000000 L 99.500000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="656.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 97.500000 720.000000 L 349.000000 720.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="726.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 358.000000 790.000000 L 965.000000 790.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="661.500000" y="796.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">do it later</text></g><g id="(queue -&gt; bob)[0]"><marker id="mk-1225746125" markerWidth="25.000000" markerHeight="30.000000" refX="17.500000" refY="15.000000" viewBox="0.000000 0.000000 25.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" fill="green" class="connection" stroke-width="5" /> </marker><path d="M 965.500000 860.000000 L 364.500000 860.000000" stroke="green" fill="none" class="connection" style="stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#868989127)" /><text x="662.000000" y="866.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 351.000000 930.000000 L 99.500000 930.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="936.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Response</text></g><mask id="868989127" maskUnits="userSpaceOnUse" x="10" y="50" width="1336" height="950">
 <rect x="10" y="50" width="1336" height="950" fill="white"></rect>
 <rect x="148.000000" y="290.000000" width="155" height="21" fill="black"></rect>
 <rect x="415.000000" y="360.000000" width="801" height="21" fill="black"></rect>
@@ -54,4 +34,4 @@
 <rect x="629.000000" y="780.000000" width="65" height="21" fill="black"></rect>
 <rect x="640.000000" y="850.000000" width="44" height="21" fill="black"></rect>
 <rect x="116.000000" y="920.000000" width="219" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
index 339e22cd1..5f73fad45 100644
--- a/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1336" height="950" viewBox="10 50 1336 950"><rect x="10.000000" y="50.000000" width="1336.000000" height="950.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1336 950"><svg id="d2-svg" width="1336" height="950" viewBox="10 50 1336 950"><rect x="10.000000" y="50.000000" width="1336.000000" height="950.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="alice"><g class="shape" ><path d="M 179 177 H 12 V 175 C 12 156 30 139 59 131 C 43 125 34 114 34 102 C 34 82 61 66 95 66 C 129 66 157 82 157 102 C 157 114 148 124 132 131 C 161 139 179 156 179 175 V 176 H 179 Z" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="95.500000" y="198.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="95.500000" dy="0.000000">Alice</tspan><tspan x="95.500000" dy="17.666667">line</tspan><tspan x="95.500000" dy="17.666667">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 406 209 H 303 V 208 C 303 196 314 186 332 181 C 322 176 316 170 316 162 C 316 150 333 140 354 140 C 375 140 392 150 392 162 C 392 169 386 176 376 180 C 394 185 405 196 405 207 V 208 H 406 Z" class=" stroke-B1 fill-B5" style="stroke-width:5;" /></g><text x="354.500000" y="230.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bob</text></g><g id="db"><g class="shape" ><path d="M 612 136 C 612 112 657 112 662 112 C 667 112 712 112 712 136 V 206 C 712 230 667 230 662 230 C 657 230 612 230 612 206 V 136 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 612 136 C 612 160 657 160 662 160 C 667 160 712 160 712 136" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="662.000000" y="188.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">db</text></g><g id="queue"><g class="shape" ><path d="M 923 164 H 1015 C 1039 164 1039 194 1039 197 C 1039 200 1039 230 1015 230 H 923 C 899 230 899 200 899 197 C 899 194 899 164 923 164 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 1015 164 C 991 164 991 194 991 197 C 991 200 991 230 1015 230" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="957.000000" y="202.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="service"><g class="shape" ><rect x="1207.000000" y="52.000000" width="137.000000" height="178.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1275.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="1275.500000" dy="0.000000">an</tspan><tspan x="1275.500000" dy="16.625000">odd</tspan><tspan x="1275.500000" dy="16.625000">service</tspan><tspan x="1275.500000" dy="16.625000">with</tspan><tspan x="1275.500000" dy="16.625000">a</tspan><tspan x="1275.500000" dy="16.625000">name</tspan><tspan x="1275.500000" dy="16.625000">in</tspan><tspan x="1275.500000" dy="16.625000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 95.500000 237.000000 L 95.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(bob -- )[0]"><path d="M 354.500000 238.500000 L 354.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(db -- )[0]"><path d="M 662.000000 232.000000 L 662.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(queue -- )[0]"><path d="M 969.000000 232.000000 L 969.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(service -- )[0]"><path d="M 1275.500000 232.000000 L 1275.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 97.500000 300.000000 L 349.000000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="306.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 358.000000 370.000000 L 1271.500000 370.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="815.500000" y="376.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">make request for something that is quite far away and requires a really long label to take all the space between the objects</text></g><g id="(service -&gt; db)[0]"><path d="M 1273.500000 440.000000 L 666.000000 440.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="968.500000" y="446.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">validate credentials</text></g><g id="(db -&gt; service)[0]"><marker id="mk-2177206569" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B2" stroke-width="2" /> </marker><path d="M 664.000000 510.000000 L 1271.500000 510.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(service -&gt; bob)[0]"><path d="M 1273.500000 580.000000 L 360.000000 580.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(bob -&gt; alice)[0]"><path d="M 351.000000 650.000000 L 99.500000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="656.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 97.500000 720.000000 L 349.000000 720.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="726.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 358.000000 790.000000 L 965.000000 790.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="661.500000" y="796.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">do it later</text></g><g id="(queue -&gt; bob)[0]"><marker id="mk-1225746125" markerWidth="25.000000" markerHeight="30.000000" refX="17.500000" refY="15.000000" viewBox="0.000000 0.000000 25.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" fill="green" class="connection" stroke-width="5" /> </marker><path d="M 965.500000 860.000000 L 364.500000 860.000000" stroke="green" fill="none" class="connection" style="stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#868989127)" /><text x="662.000000" y="866.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 351.000000 930.000000 L 99.500000 930.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="936.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Response</text></g><mask id="868989127" maskUnits="userSpaceOnUse" x="10" y="50" width="1336" height="950">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="alice"><g class="shape" ><path d="M 179 177 H 12 V 175 C 12 156 30 139 59 131 C 43 125 34 114 34 102 C 34 82 61 66 95 66 C 129 66 157 82 157 102 C 157 114 148 124 132 131 C 161 139 179 156 179 175 V 176 H 179 Z" stroke="red" class=" fill-B5" style="stroke-width:2;" /></g><text x="95.500000" y="198.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="95.500000" dy="0.000000">Alice</tspan><tspan x="95.500000" dy="17.666667">line</tspan><tspan x="95.500000" dy="17.666667">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 406 209 H 303 V 208 C 303 196 314 186 332 181 C 322 176 316 170 316 162 C 316 150 333 140 354 140 C 375 140 392 150 392 162 C 392 169 386 176 376 180 C 394 185 405 196 405 207 V 208 H 406 Z" class=" stroke-B1 fill-B5" style="stroke-width:5;" /></g><text x="354.500000" y="230.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bob</text></g><g id="db"><g class="shape" ><path d="M 612 136 C 612 112 657 112 662 112 C 667 112 712 112 712 136 V 206 C 712 230 667 230 662 230 C 657 230 612 230 612 206 V 136 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 612 136 C 612 160 657 160 662 160 C 667 160 712 160 712 136" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="662.000000" y="188.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">db</text></g><g id="queue"><g class="shape" ><path d="M 923 164 H 1015 C 1039 164 1039 194 1039 197 C 1039 200 1039 230 1015 230 H 923 C 899 230 899 200 899 197 C 899 194 899 164 923 164 Z" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><path d="M 1015 164 C 991 164 991 194 991 197 C 991 200 991 230 1015 230" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="957.000000" y="202.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">queue</text></g><g id="service"><g class="shape" ><rect x="1207.000000" y="52.000000" width="137.000000" height="178.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1275.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="1275.500000" dy="0.000000">an</tspan><tspan x="1275.500000" dy="16.625000">odd</tspan><tspan x="1275.500000" dy="16.625000">service</tspan><tspan x="1275.500000" dy="16.625000">with</tspan><tspan x="1275.500000" dy="16.625000">a</tspan><tspan x="1275.500000" dy="16.625000">name</tspan><tspan x="1275.500000" dy="16.625000">in</tspan><tspan x="1275.500000" dy="16.625000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 95.500000 237.000000 L 95.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(bob -- )[0]"><path d="M 354.500000 238.500000 L 354.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(db -- )[0]"><path d="M 662.000000 232.000000 L 662.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(queue -- )[0]"><path d="M 969.000000 232.000000 L 969.000000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(service -- )[0]"><path d="M 1275.500000 232.000000 L 1275.500000 999.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#868989127)" /></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 97.500000 300.000000 L 349.000000 300.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="306.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 358.000000 370.000000 L 1271.500000 370.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="815.500000" y="376.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">make request for something that is quite far away and requires a really long label to take all the space between the objects</text></g><g id="(service -&gt; db)[0]"><path d="M 1273.500000 440.000000 L 666.000000 440.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="968.500000" y="446.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">validate credentials</text></g><g id="(db -&gt; service)[0]"><marker id="mk-2177206569" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B2" stroke-width="2" /> </marker><path d="M 664.000000 510.000000 L 1271.500000 510.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(service -&gt; bob)[0]"><path d="M 1273.500000 580.000000 L 360.000000 580.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-2177206569)" mask="url(#868989127)" /></g><g id="(bob -&gt; alice)[0]"><path d="M 351.000000 650.000000 L 99.500000 650.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="656.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 97.500000 720.000000 L 349.000000 720.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.000000" y="726.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 358.000000 790.000000 L 965.000000 790.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="661.500000" y="796.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">do it later</text></g><g id="(queue -&gt; bob)[0]"><marker id="mk-1225746125" markerWidth="25.000000" markerHeight="30.000000" refX="17.500000" refY="15.000000" viewBox="0.000000 0.000000 25.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" fill="green" class="connection" stroke-width="5" /> </marker><path d="M 965.500000 860.000000 L 364.500000 860.000000" stroke="green" fill="none" class="connection" style="stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#868989127)" /><text x="662.000000" y="866.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 351.000000 930.000000 L 99.500000 930.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#868989127)" /><text x="225.500000" y="936.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Another authentication Response</text></g><mask id="868989127" maskUnits="userSpaceOnUse" x="10" y="50" width="1336" height="950">
 <rect x="10" y="50" width="1336" height="950" fill="white"></rect>
 <rect x="148.000000" y="290.000000" width="155" height="21" fill="black"></rect>
 <rect x="415.000000" y="360.000000" width="801" height="21" fill="black"></rect>
@@ -54,4 +34,4 @@
 <rect x="629.000000" y="780.000000" width="65" height="21" fill="black"></rect>
 <rect x="640.000000" y="850.000000" width="44" height="21" fill="black"></rect>
 <rect x="116.000000" y="920.000000" width="219" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
index b3e06e912..9dddc6975 100644
--- a/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="934" height="1048" viewBox="10 50 934 1048"><rect x="10.000000" y="50.000000" width="934.000000" height="1048.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 934 1048"><svg id="d2-svg" width="934" height="1048" viewBox="10 50 934 1048"><rect x="10.000000" y="50.000000" width="934.000000" height="1048.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="665.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="715.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="805.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(concept -- )[0]"><path d="M 715.000000 120.000000 L 715.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemOutcome -- )[0]"><path d="M 873.500000 120.000000 L 873.500000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="scorer.t"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="366.000000" y="318.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="519.000000" y="458.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="709.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="867.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="366.000000" y="808.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="366.000000" y="878.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="867.000000" y="948.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="867.000000" y="1018.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="515.000000" y="528.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 212.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="142.000000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.000000 258.000000 L 214.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="142.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 70.000000 328.000000 L 362.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 72.000000 398.000000 L 364.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="217.500000" y="404.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 70.000000 468.000000 L 515.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="294.000000" y="474.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 224.000000 538.000000 L 511.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 537.000000 608.000000 L 705.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="622.000000" y="614.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 66.000000 678.000000 L 517.000000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="290.500000" y="684.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 70.000000 748.000000 L 863.500000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="754.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 70.000000 818.000000 L 362.000000 818.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="824.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 70.000000 888.000000 L 362.000000 888.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.000000" y="894.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 70.000000 958.000000 L 863.500000 958.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="964.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 70.000000 1028.000000 L 863.500000 1028.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="1034.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><mask id="1656293866" maskUnits="userSpaceOnUse" x="10" y="50" width="934" height="1048">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="665.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="715.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="805.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(concept -- )[0]"><path d="M 715.000000 120.000000 L 715.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemOutcome -- )[0]"><path d="M 873.500000 120.000000 L 873.500000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="scorer.t"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="366.000000" y="318.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="519.000000" y="458.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="709.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="867.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="366.000000" y="808.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="366.000000" y="878.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="867.000000" y="948.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="867.000000" y="1018.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="515.000000" y="528.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 212.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="142.000000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.000000 258.000000 L 214.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="142.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 70.000000 328.000000 L 362.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 72.000000 398.000000 L 364.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="217.500000" y="404.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 70.000000 468.000000 L 515.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="294.000000" y="474.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 224.000000 538.000000 L 511.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 537.000000 608.000000 L 705.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="622.000000" y="614.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 66.000000 678.000000 L 517.000000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="290.500000" y="684.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 70.000000 748.000000 L 863.500000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="754.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 70.000000 818.000000 L 362.000000 818.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="824.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 70.000000 888.000000 L 362.000000 888.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.000000" y="894.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 70.000000 958.000000 L 863.500000 958.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="964.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 70.000000 1028.000000 L 863.500000 1028.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="1034.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><mask id="1656293866" maskUnits="userSpaceOnUse" x="10" y="50" width="934" height="1048">
 <rect x="10" y="50" width="934" height="1048" fill="white"></rect>
 <rect x="112.000000" y="178.000000" width="60" height="21" fill="black"></rect>
 <rect x="128.000000" y="248.000000" width="29" height="21" fill="black"></rect>
@@ -58,4 +38,4 @@
 <rect x="145.000000" y="878.000000" width="144" height="21" fill="black"></rect>
 <rect x="417.000000" y="948.000000" width="101" height="21" fill="black"></rect>
 <rect x="366.000000" y="1018.000000" width="203" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
index b3e06e912..9dddc6975 100644
--- a/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="934" height="1048" viewBox="10 50 934 1048"><rect x="10.000000" y="50.000000" width="934.000000" height="1048.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 934 1048"><svg id="d2-svg" width="934" height="1048" viewBox="10 50 934 1048"><rect x="10.000000" y="50.000000" width="934.000000" height="1048.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="665.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="715.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="805.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(concept -- )[0]"><path d="M 715.000000 120.000000 L 715.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemOutcome -- )[0]"><path d="M 873.500000 120.000000 L 873.500000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="scorer.t"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="366.000000" y="318.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="519.000000" y="458.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="709.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="867.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="366.000000" y="808.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="366.000000" y="878.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="867.000000" y="948.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="867.000000" y="1018.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="515.000000" y="528.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 212.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="142.000000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.000000 258.000000 L 214.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="142.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 70.000000 328.000000 L 362.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 72.000000 398.000000 L 364.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="217.500000" y="404.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 70.000000 468.000000 L 515.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="294.000000" y="474.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 224.000000 538.000000 L 511.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 537.000000 608.000000 L 705.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="622.000000" y="614.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 66.000000 678.000000 L 517.000000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="290.500000" y="684.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 70.000000 748.000000 L 863.500000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="754.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 70.000000 818.000000 L 362.000000 818.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="824.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 70.000000 888.000000 L 362.000000 888.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.000000" y="894.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 70.000000 958.000000 L 863.500000 958.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="964.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 70.000000 1028.000000 L 863.500000 1028.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="1034.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><mask id="1656293866" maskUnits="userSpaceOnUse" x="10" y="50" width="934" height="1048">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="scorer"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="152.000000" y="52.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="item"><g class="shape" ><rect x="322.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="essayRubric"><g class="shape" ><rect x="462.000000" y="52.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="665.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="715.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="805.000000" y="52.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemResponse -- )[0]"><path d="M 222.000000 120.000000 L 222.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(item -- )[0]"><path d="M 372.000000 120.000000 L 372.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(essayRubric -- )[0]"><path d="M 525.000000 120.000000 L 525.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(concept -- )[0]"><path d="M 715.000000 120.000000 L 715.000000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="(itemOutcome -- )[0]"><path d="M 873.500000 120.000000 L 873.500000 1097.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1656293866)" /></g><g id="scorer.t"><g class="shape" ><rect x="56.000000" y="178.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="216.000000" y="178.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="366.000000" y="318.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="519.000000" y="458.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="709.000000" y="598.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="867.000000" y="738.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="366.000000" y="808.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="366.000000" y="878.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="867.000000" y="948.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="867.000000" y="1018.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="515.000000" y="528.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 70.000000 188.000000 L 212.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="142.000000" y="194.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.000000 258.000000 L 214.000000 258.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="142.500000" y="264.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 70.000000 328.000000 L 362.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 72.000000 398.000000 L 364.000000 398.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="217.500000" y="404.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 70.000000 468.000000 L 515.000000 468.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="294.000000" y="474.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 224.000000 538.000000 L 511.000000 538.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 537.000000 608.000000 L 705.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="622.000000" y="614.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 66.000000 678.000000 L 517.000000 678.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#1656293866)" /><text x="290.500000" y="684.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 70.000000 748.000000 L 863.500000 748.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="754.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 70.000000 818.000000 L 362.000000 818.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.500000" y="824.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 70.000000 888.000000 L 362.000000 888.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="217.000000" y="894.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 70.000000 958.000000 L 863.500000 958.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="964.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 70.000000 1028.000000 L 863.500000 1028.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1656293866)" /><text x="467.500000" y="1034.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><mask id="1656293866" maskUnits="userSpaceOnUse" x="10" y="50" width="934" height="1048">
 <rect x="10" y="50" width="934" height="1048" fill="white"></rect>
 <rect x="112.000000" y="178.000000" width="60" height="21" fill="black"></rect>
 <rect x="128.000000" y="248.000000" width="29" height="21" fill="black"></rect>
@@ -58,4 +38,4 @@
 <rect x="145.000000" y="878.000000" width="144" height="21" fill="black"></rect>
 <rect x="417.000000" y="948.000000" width="101" height="21" fill="black"></rect>
 <rect x="366.000000" y="1018.000000" width="203" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
index 78db31a05..51fd4918a 100644
--- a/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2314" height="2449" viewBox="0 -2 2314 2449"><rect x="0.000000" y="-2.000000" width="2314.000000" height="2449.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2314 2449"><svg id="d2-svg" width="2314" height="2449" viewBox="0 -2 2314 2449"><rect x="0.000000" y="-2.000000" width="2314.000000" height="2449.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a_shape"><g class="shape" ><ellipse rx="54.000000" ry="54.000000" cx="1511.000000" cy="54.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1511.000000" y="59.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="0.000000" y="258.000000" width="954.000000" height="1146.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="477.000000" y="291.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a_sequence</text></g><g id="another"><g class="shape" ><rect x="994.000000" y="249.000000" width="1034.000000" height="1205.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1511.000000" y="236.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">another</text></g><g id="sequence"><g class="shape" ><rect x="421.000000" y="1967.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="477.000000" y="2005.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sequence</text></g><g id="finally"><g class="shape" ><path d="M 1262 1595 H 2288 C 2312 1595 2312 1978 2312 2020 C 2312 2063 2312 2445 2288 2445 H 1262 C 1238 2445 1238 2063 1238 2020 C 1238 1978 1238 1595 1262 1595 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 2288 1595 C 2264 1595 2264 1978 2264 2020 C 2264 2063 2264 2445 2288 2445" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1775.000000" y="1582.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="12.000000" y="346.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="152.000000" y="346.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="322.000000" y="346.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="462.000000" y="346.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="665.000000" y="346.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="715.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="805.000000" y="346.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="another.sequence"><g class="shape" ><rect x="1034.000000" y="281.000000" width="954.000000" height="1141.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1511.000000" y="310.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="1313.000000" y="1624.000000" width="934.000000" height="791.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1780.000000" y="1653.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="1046.000000" y="364.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1096.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="1186.000000" y="364.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1256.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="1356.000000" y="364.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1406.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="1496.000000" y="364.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1559.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="1699.000000" y="364.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1749.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="1839.000000" y="364.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1907.500000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="1325.000000" y="1707.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1375.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="1475.000000" y="1707.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1525.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="1615.000000" y="1707.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1678.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="1778.000000" y="1707.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1828.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="1918.000000" y="1707.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1986.500000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="2095.000000" y="1707.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2165.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1455.010128 59.201018 C 673.000000 138.200000 477.000000 218.000000 477.000000 255.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 1511.000000 110.000000 C 1511.000000 148.000000 1511.000000 222.600000 1511.000000 278.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 477.000000 1405.000000 C 477.000000 1444.000000 477.000000 1464.000000 477.000000 1479.000000 C 477.000000 1494.000000 477.000000 1636.500000 477.000000 1962.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1511.000000 1426.000000 C 1511.000000 1447.800000 1511.000000 1464.000000 1511.000000 1479.000000 C 1511.000000 1494.000000 1517.000000 1568.100000 1539.825335 1621.739536" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(a_shape -- finally)[0]"><path d="M 1565.963315 64.381305 C 1951.200000 139.200000 2048.000000 168.000000 2048.000000 183.000000 C 2048.000000 198.000000 2048.000000 332.600000 2048.000000 519.500000 C 2048.000000 706.400000 2048.000000 955.600000 2048.000000 1142.500000 C 2048.000000 1329.400000 2048.000000 1522.200000 2048.000000 1593.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#786476898)" /></g><g id="(a_sequence.scorer -- )[0]"><path d="M 62.000000 414.000000 L 62.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 222.000000 414.000000 L 222.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.item -- )[0]"><path d="M 372.000000 414.000000 L 372.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 525.000000 414.000000 L 525.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.concept -- )[0]"><path d="M 715.000000 414.000000 L 715.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 873.500000 414.000000 L 873.500000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.scorer -- )[0]"><path d="M 1096.000000 432.500000 L 1096.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 1256.000000 432.500000 L 1256.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.item -- )[0]"><path d="M 1406.000000 432.500000 L 1406.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 1559.000000 432.500000 L 1559.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.concept -- )[0]"><path d="M 1749.000000 432.500000 L 1749.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 1907.500000 432.500000 L 1907.500000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 1375.000000 1775.500000 L 1375.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.concept -- )[0]"><path d="M 1525.000000 1775.500000 L 1525.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 1678.000000 1775.500000 L 1678.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.item -- )[0]"><path d="M 1828.000000 1775.500000 L 1828.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 1986.500000 1775.500000 L 1986.500000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 2165.000000 1775.500000 L 2165.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="56.000000" y="472.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="216.000000" y="472.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="366.000000" y="612.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="519.000000" y="752.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="709.000000" y="892.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="867.000000" y="1032.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="366.000000" y="1102.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="366.000000" y="1172.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="867.000000" y="1242.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="867.000000" y="1312.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="515.000000" y="822.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="1090.000000" y="490.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="1250.000000" y="490.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="1400.000000" y="630.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="1553.000000" y="770.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="1743.000000" y="910.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="1901.000000" y="1050.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="1400.000000" y="1120.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="1400.000000" y="1190.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="1901.000000" y="1260.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="1901.000000" y="1330.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="2159.000000" y="1833.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="1822.000000" y="1823.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="1672.000000" y="1883.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="1519.000000" y="1943.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="1980.000000" y="2073.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="1369.000000" y="2183.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="2159.000000" y="2323.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="1549.000000" y="840.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="1818.000000" y="1833.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="1668.000000" y="1893.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="1515.000000" y="1953.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="1976.000000" y="2083.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="1664.000000" y="1903.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="1511.000000" y="1963.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="1972.000000" y="2093.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="1507.000000" y="1973.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="1968.000000" y="2103.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1964.000000" y="2113.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 70.000000 482.000000 L 212.000000 482.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="142.000000" y="488.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 72.000000 552.000000 L 214.000000 552.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="142.500000" y="558.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 70.000000 622.000000 L 362.000000 622.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="217.500000" y="628.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 72.000000 692.000000 L 364.000000 692.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="217.500000" y="698.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 70.000000 762.000000 L 515.000000 762.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="294.000000" y="768.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 224.000000 832.000000 L 511.000000 832.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 537.000000 902.000000 L 705.000000 902.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="622.000000" y="908.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 66.000000 972.000000 L 517.000000 972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="290.500000" y="978.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 72.000000 1042.000000 L 863.500000 1042.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="467.500000" y="1048.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 72.000000 1112.000000 L 362.000000 1112.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="217.500000" y="1118.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 70.000000 1182.000000 L 362.000000 1182.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="217.000000" y="1188.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 70.000000 1252.000000 L 865.500000 1252.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#786476898)" /><text x="467.500000" y="1258.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 70.000000 1322.000000 L 865.500000 1322.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#786476898)" /><text x="467.500000" y="1328.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1104.000000 500.500000 L 1246.000000 500.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1176.000000" y="506.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1106.000000 570.500000 L 1248.000000 570.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="1176.500000" y="576.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1104.000000 640.500000 L 1396.000000 640.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1251.500000" y="646.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1106.000000 710.500000 L 1398.000000 710.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="1251.500000" y="716.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1104.000000 780.500000 L 1549.000000 780.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1328.000000" y="786.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 1258.000000 850.500000 L 1545.000000 850.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 1571.000000 920.500000 L 1739.000000 920.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1656.000000" y="926.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1100.000000 990.500000 L 1551.000000 990.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="1324.500000" y="996.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 1104.000000 1060.500000 L 1897.500000 1060.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1501.500000" y="1066.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1106.000000 1130.500000 L 1396.000000 1130.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1251.500000" y="1136.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1104.000000 1200.500000 L 1396.000000 1200.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1251.000000" y="1206.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 1104.000000 1270.500000 L 1897.500000 1270.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1501.500000" y="1276.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 1104.000000 1340.500000 L 1897.500000 1340.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1501.500000" y="1346.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 2157.000000 1843.500000 L 1842.000000 1843.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 1816.000000 1913.500000 L 1696.000000 1913.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 1662.000000 1983.500000 L 1547.000000 1983.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 1820.000000 2053.500000 L 1692.000000 2053.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1545.000000 2123.500000 L 1960.500000 2123.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 1383.000000 2193.500000 L 1818.000000 2193.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1962.500000 2263.500000 L 1379.000000 2263.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 1377.000000 2333.500000 L 2155.000000 2333.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><mask id="786476898" maskUnits="userSpaceOnUse" x="0" y="-2" width="2314" height="2449">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a_shape"><g class="shape" ><ellipse rx="54.000000" ry="54.000000" cx="1511.000000" cy="54.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1511.000000" y="59.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="0.000000" y="258.000000" width="954.000000" height="1146.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="477.000000" y="291.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a_sequence</text></g><g id="another"><g class="shape" ><rect x="994.000000" y="249.000000" width="1034.000000" height="1205.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1511.000000" y="236.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">another</text></g><g id="sequence"><g class="shape" ><rect x="421.000000" y="1967.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="477.000000" y="2005.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sequence</text></g><g id="finally"><g class="shape" ><path d="M 1262 1595 H 2288 C 2312 1595 2312 1978 2312 2020 C 2312 2063 2312 2445 2288 2445 H 1262 C 1238 2445 1238 2063 1238 2020 C 1238 1978 1238 1595 1262 1595 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 2288 1595 C 2264 1595 2264 1978 2264 2020 C 2264 2063 2264 2445 2288 2445" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1775.000000" y="1582.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="12.000000" y="346.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="152.000000" y="346.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="222.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="322.000000" y="346.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="372.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="462.000000" y="346.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="665.000000" y="346.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="715.000000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="805.000000" y="346.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="384.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="another.sequence"><g class="shape" ><rect x="1034.000000" y="281.000000" width="954.000000" height="1141.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1511.000000" y="310.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="1313.000000" y="1624.000000" width="934.000000" height="791.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1780.000000" y="1653.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="1046.000000" y="364.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1096.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="1186.000000" y="364.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1256.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="1356.000000" y="364.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1406.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="1496.000000" y="364.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1559.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="1699.000000" y="364.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1749.000000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="1839.000000" y="364.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1907.500000" y="402.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="1325.000000" y="1707.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1375.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="1475.000000" y="1707.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1525.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="1615.000000" y="1707.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1678.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="1778.000000" y="1707.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1828.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="1918.000000" y="1707.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1986.500000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="2095.000000" y="1707.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="2165.000000" y="1745.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1455.010128 59.201018 C 673.000000 138.200000 477.000000 218.000000 477.000000 255.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 1511.000000 110.000000 C 1511.000000 148.000000 1511.000000 222.600000 1511.000000 278.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 477.000000 1405.000000 C 477.000000 1444.000000 477.000000 1464.000000 477.000000 1479.000000 C 477.000000 1494.000000 477.000000 1636.500000 477.000000 1962.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1511.000000 1426.000000 C 1511.000000 1447.800000 1511.000000 1464.000000 1511.000000 1479.000000 C 1511.000000 1494.000000 1517.000000 1568.100000 1539.825335 1621.739536" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="(a_shape -- finally)[0]"><path d="M 1565.963315 64.381305 C 1951.200000 139.200000 2048.000000 168.000000 2048.000000 183.000000 C 2048.000000 198.000000 2048.000000 332.600000 2048.000000 519.500000 C 2048.000000 706.400000 2048.000000 955.600000 2048.000000 1142.500000 C 2048.000000 1329.400000 2048.000000 1522.200000 2048.000000 1593.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#786476898)" /></g><g id="(a_sequence.scorer -- )[0]"><path d="M 62.000000 414.000000 L 62.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 222.000000 414.000000 L 222.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.item -- )[0]"><path d="M 372.000000 414.000000 L 372.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 525.000000 414.000000 L 525.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.concept -- )[0]"><path d="M 715.000000 414.000000 L 715.000000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 873.500000 414.000000 L 873.500000 1391.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.scorer -- )[0]"><path d="M 1096.000000 432.500000 L 1096.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 1256.000000 432.500000 L 1256.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.item -- )[0]"><path d="M 1406.000000 432.500000 L 1406.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 1559.000000 432.500000 L 1559.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.concept -- )[0]"><path d="M 1749.000000 432.500000 L 1749.000000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 1907.500000 432.500000 L 1907.500000 1409.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 1375.000000 1775.500000 L 1375.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.concept -- )[0]"><path d="M 1525.000000 1775.500000 L 1525.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 1678.000000 1775.500000 L 1678.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.item -- )[0]"><path d="M 1828.000000 1775.500000 L 1828.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 1986.500000 1775.500000 L 1986.500000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 2165.000000 1775.500000 L 2165.000000 2402.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#786476898)" /></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="56.000000" y="472.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="216.000000" y="472.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="366.000000" y="612.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="519.000000" y="752.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="709.000000" y="892.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="867.000000" y="1032.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="366.000000" y="1102.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="366.000000" y="1172.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="867.000000" y="1242.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="867.000000" y="1312.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="515.000000" y="822.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="1090.000000" y="490.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="1250.000000" y="490.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="1400.000000" y="630.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="1553.000000" y="770.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="1743.000000" y="910.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="1901.000000" y="1050.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="1400.000000" y="1120.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="1400.000000" y="1190.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="1901.000000" y="1260.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="1901.000000" y="1330.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="2159.000000" y="1833.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="1822.000000" y="1823.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="1672.000000" y="1883.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="1519.000000" y="1943.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="1980.000000" y="2073.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="1369.000000" y="2183.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="2159.000000" y="2323.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="1549.000000" y="840.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="1818.000000" y="1833.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="1668.000000" y="1893.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="1515.000000" y="1953.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="1976.000000" y="2083.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="1664.000000" y="1903.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="1511.000000" y="1963.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="1972.000000" y="2093.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="1507.000000" y="1973.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="1968.000000" y="2103.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1964.000000" y="2113.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 70.000000 482.000000 L 212.000000 482.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="142.000000" y="488.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 72.000000 552.000000 L 214.000000 552.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="142.500000" y="558.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 70.000000 622.000000 L 362.000000 622.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="217.500000" y="628.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 72.000000 692.000000 L 364.000000 692.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="217.500000" y="698.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 70.000000 762.000000 L 515.000000 762.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="294.000000" y="768.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 224.000000 832.000000 L 511.000000 832.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 537.000000 902.000000 L 705.000000 902.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="622.000000" y="908.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 66.000000 972.000000 L 517.000000 972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="290.500000" y="978.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 72.000000 1042.000000 L 863.500000 1042.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="467.500000" y="1048.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 72.000000 1112.000000 L 362.000000 1112.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="217.500000" y="1118.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 70.000000 1182.000000 L 362.000000 1182.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="217.000000" y="1188.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 70.000000 1252.000000 L 865.500000 1252.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#786476898)" /><text x="467.500000" y="1258.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 70.000000 1322.000000 L 865.500000 1322.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#786476898)" /><text x="467.500000" y="1328.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1104.000000 500.500000 L 1246.000000 500.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1176.000000" y="506.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1106.000000 570.500000 L 1248.000000 570.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="1176.500000" y="576.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1104.000000 640.500000 L 1396.000000 640.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1251.500000" y="646.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1106.000000 710.500000 L 1398.000000 710.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="1251.500000" y="716.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1104.000000 780.500000 L 1549.000000 780.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1328.000000" y="786.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 1258.000000 850.500000 L 1545.000000 850.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 1571.000000 920.500000 L 1739.000000 920.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1656.000000" y="926.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1100.000000 990.500000 L 1551.000000 990.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#786476898)" /><text x="1324.500000" y="996.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 1104.000000 1060.500000 L 1897.500000 1060.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1501.500000" y="1066.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1106.000000 1130.500000 L 1396.000000 1130.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1251.500000" y="1136.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1104.000000 1200.500000 L 1396.000000 1200.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1251.000000" y="1206.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 1104.000000 1270.500000 L 1897.500000 1270.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1501.500000" y="1276.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 1104.000000 1340.500000 L 1897.500000 1340.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /><text x="1501.500000" y="1346.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 2157.000000 1843.500000 L 1842.000000 1843.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 1816.000000 1913.500000 L 1696.000000 1913.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 1662.000000 1983.500000 L 1547.000000 1983.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 1820.000000 2053.500000 L 1692.000000 2053.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1545.000000 2123.500000 L 1960.500000 2123.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 1383.000000 2193.500000 L 1818.000000 2193.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1962.500000 2263.500000 L 1379.000000 2263.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 1377.000000 2333.500000 L 2155.000000 2333.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#786476898)" /></g><mask id="786476898" maskUnits="userSpaceOnUse" x="0" y="-2" width="2314" height="2449">
 <rect x="0" y="-2" width="2314" height="2449" fill="white"></rect>
 <rect x="112.000000" y="472.000000" width="60" height="21" fill="black"></rect>
 <rect x="128.000000" y="542.000000" width="29" height="21" fill="black"></rect>
@@ -77,4 +57,4 @@
 <rect x="1179.000000" y="1190.000000" width="144" height="21" fill="black"></rect>
 <rect x="1451.000000" y="1260.000000" width="101" height="21" fill="black"></rect>
 <rect x="1400.000000" y="1330.000000" width="203" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
index 880935dc0..c5f7f30b0 100644
--- a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2038" height="2469" viewBox="12 10 2038 2469"><rect x="12.000000" y="10.000000" width="2038.000000" height="2469.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2038 2469"><svg id="d2-svg" width="2038" height="2469" viewBox="12 10 2038 2469"><rect x="12.000000" y="10.000000" width="2038.000000" height="2469.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a_shape"><g class="shape" ><ellipse rx="54.000000" ry="54.000000" cx="516.000000" cy="66.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="516.000000" y="71.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="12.000000" y="302.000000" width="954.000000" height="1146.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="489.000000" y="335.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a_sequence</text></g><g id="another"><g class="shape" ><rect x="986.000000" y="255.000000" width="1054.000000" height="1241.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1513.000000" y="288.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">another</text></g><g id="sequence"><g class="shape" ><rect x="433.000000" y="1586.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="489.000000" y="1624.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sequence</text></g><g id="finally"><g class="shape" ><path d="M 1020 1586 H 2006 C 2030 1586 2030 1987 2030 2032 C 2030 2076 2030 2477 2006 2477 H 1020 C 996 2477 996 2076 996 2032 C 996 1987 996 1586 1020 1586 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 2006 1586 C 1982 1586 1982 1987 1982 2032 C 1982 2076 1982 2477 2006 2477" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1501.000000" y="1619.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="24.000000" y="390.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="164.000000" y="390.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="234.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="334.000000" y="390.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="384.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="474.000000" y="390.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="537.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="677.000000" y="390.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="727.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="817.000000" y="390.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="885.500000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="another.sequence"><g class="shape" ><rect x="1036.000000" y="305.000000" width="954.000000" height="1141.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1513.000000" y="334.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="1046.000000" y="1636.000000" width="934.000000" height="791.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1513.000000" y="1665.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="1048.000000" y="388.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1098.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="1188.000000" y="388.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1258.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="1358.000000" y="388.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1408.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="1498.000000" y="388.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1561.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="1701.000000" y="388.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1751.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="1841.000000" y="388.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1909.500000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="1058.000000" y="1719.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1108.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="1208.000000" y="1719.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1258.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="1348.000000" y="1719.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1411.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="1511.000000" y="1719.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1561.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="1651.000000" y="1719.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1719.500000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="1828.000000" y="1719.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1898.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 489.000000 115.000000 L 489.000000 299.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 516.000000 122.000000 L 516.000000 200.000000 S 516.000000 210.000000 526.000000 210.000000 L 1503.000000 210.000000 S 1513.000000 210.000000 1513.000000 220.000000 L 1513.000000 302.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 489.000000 1449.500000 L 489.000000 1582.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1513.000000 1449.000000 L 1513.000000 1633.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(a_shape -- finally)[0]"><path d="M 543.000000 115.000000 L 543.000000 150.000000 S 543.000000 160.000000 553.000000 160.000000 L 2040.000000 160.000000 S 2050.000000 160.000000 2050.000000 170.000000 L 2050.000000 1531.000000 S 2050.000000 1541.000000 2040.000000 1541.000000 L 1533.000000 1541.000000 S 1523.000000 1541.000000 1523.000000 1551.000000 L 1523.000000 1584.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#644688464)" /></g><g id="(a_sequence.scorer -- )[0]"><path d="M 74.000000 458.500000 L 74.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 234.000000 458.500000 L 234.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.item -- )[0]"><path d="M 384.000000 458.500000 L 384.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 537.000000 458.500000 L 537.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.concept -- )[0]"><path d="M 727.000000 458.500000 L 727.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 885.500000 458.500000 L 885.500000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.scorer -- )[0]"><path d="M 1098.000000 456.000000 L 1098.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 1258.000000 456.000000 L 1258.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.item -- )[0]"><path d="M 1408.000000 456.000000 L 1408.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 1561.000000 456.000000 L 1561.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.concept -- )[0]"><path d="M 1751.000000 456.000000 L 1751.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 1909.500000 456.000000 L 1909.500000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 1108.000000 1787.000000 L 1108.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.concept -- )[0]"><path d="M 1258.000000 1787.000000 L 1258.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 1411.000000 1787.000000 L 1411.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.item -- )[0]"><path d="M 1561.000000 1787.000000 L 1561.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 1719.500000 1787.000000 L 1719.500000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 1898.000000 1787.000000 L 1898.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="68.000000" y="516.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="228.000000" y="516.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="378.000000" y="656.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="531.000000" y="796.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="721.000000" y="936.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="879.000000" y="1076.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="378.000000" y="1146.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="378.000000" y="1216.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="879.000000" y="1286.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="879.000000" y="1356.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="527.000000" y="866.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="1092.000000" y="514.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="1252.000000" y="514.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="1402.000000" y="654.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="1555.000000" y="794.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="1745.000000" y="934.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="1903.000000" y="1074.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="1402.000000" y="1144.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="1402.000000" y="1214.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="1903.000000" y="1284.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="1903.000000" y="1354.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="1892.000000" y="1845.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="1555.000000" y="1835.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="1405.000000" y="1895.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="1252.000000" y="1955.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="1713.000000" y="2085.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="1102.000000" y="2195.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="1892.000000" y="2335.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="1551.000000" y="864.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="1551.000000" y="1845.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="1401.000000" y="1905.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="1248.000000" y="1965.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="1709.000000" y="2095.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="1397.000000" y="1915.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="1244.000000" y="1975.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="1705.000000" y="2105.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="1240.000000" y="1985.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="1701.000000" y="2115.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1697.000000" y="2125.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 82.000000 526.500000 L 224.000000 526.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="154.000000" y="532.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 84.000000 596.500000 L 226.000000 596.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="154.500000" y="602.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 82.000000 666.500000 L 374.000000 666.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="229.500000" y="672.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 84.000000 736.500000 L 376.000000 736.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="229.500000" y="742.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 82.000000 806.500000 L 527.000000 806.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="306.000000" y="812.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 236.000000 876.500000 L 523.000000 876.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 549.000000 946.500000 L 717.000000 946.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="634.000000" y="952.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 78.000000 1016.500000 L 529.000000 1016.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="302.500000" y="1022.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 84.000000 1086.500000 L 875.500000 1086.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="479.500000" y="1092.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 84.000000 1156.500000 L 374.000000 1156.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="229.500000" y="1162.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 82.000000 1226.500000 L 374.000000 1226.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="229.000000" y="1232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 82.000000 1296.500000 L 877.500000 1296.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#644688464)" /><text x="479.500000" y="1302.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 82.000000 1366.500000 L 877.500000 1366.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#644688464)" /><text x="479.500000" y="1372.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1106.000000 524.000000 L 1248.000000 524.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1178.000000" y="530.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1108.000000 594.000000 L 1250.000000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="1178.500000" y="600.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1106.000000 664.000000 L 1398.000000 664.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1253.500000" y="670.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1108.000000 734.000000 L 1400.000000 734.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="1253.500000" y="740.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1106.000000 804.000000 L 1551.000000 804.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1330.000000" y="810.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 1260.000000 874.000000 L 1547.000000 874.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 1573.000000 944.000000 L 1741.000000 944.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1658.000000" y="950.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1102.000000 1014.000000 L 1553.000000 1014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="1326.500000" y="1020.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 1106.000000 1084.000000 L 1899.500000 1084.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1503.500000" y="1090.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1108.000000 1154.000000 L 1398.000000 1154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1253.500000" y="1160.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1106.000000 1224.000000 L 1398.000000 1224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1253.000000" y="1230.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 1106.000000 1294.000000 L 1899.500000 1294.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1503.500000" y="1300.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 1106.000000 1364.000000 L 1899.500000 1364.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1503.500000" y="1370.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 1890.000000 1855.000000 L 1575.000000 1855.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 1549.000000 1925.000000 L 1429.000000 1925.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 1395.000000 1995.000000 L 1280.000000 1995.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 1553.000000 2065.000000 L 1425.000000 2065.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1278.000000 2135.000000 L 1693.500000 2135.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 1116.000000 2205.000000 L 1551.000000 2205.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1695.500000 2275.000000 L 1112.000000 2275.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 1110.000000 2345.000000 L 1888.000000 2345.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><mask id="644688464" maskUnits="userSpaceOnUse" x="12" y="10" width="2038" height="2469">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a_shape"><g class="shape" ><ellipse rx="54.000000" ry="54.000000" cx="516.000000" cy="66.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="516.000000" y="71.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="12.000000" y="302.000000" width="954.000000" height="1146.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="489.000000" y="335.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a_sequence</text></g><g id="another"><g class="shape" ><rect x="986.000000" y="255.000000" width="1054.000000" height="1241.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1513.000000" y="288.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">another</text></g><g id="sequence"><g class="shape" ><rect x="433.000000" y="1586.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="489.000000" y="1624.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sequence</text></g><g id="finally"><g class="shape" ><path d="M 1020 1586 H 2006 C 2030 1586 2030 1987 2030 2032 C 2030 2076 2030 2477 2006 2477 H 1020 C 996 2477 996 2076 996 2032 C 996 1987 996 1586 1020 1586 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 2006 1586 C 1982 1586 1982 1987 1982 2032 C 1982 2076 1982 2477 2006 2477" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="1501.000000" y="1619.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">finally</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="24.000000" y="390.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="164.000000" y="390.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="234.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="334.000000" y="390.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="384.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="474.000000" y="390.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="537.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="677.000000" y="390.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="727.000000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="817.000000" y="390.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="885.500000" y="428.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="another.sequence"><g class="shape" ><rect x="1036.000000" y="305.000000" width="954.000000" height="1141.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1513.000000" y="334.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="1046.000000" y="1636.000000" width="934.000000" height="791.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="1513.000000" y="1665.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">sequence</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="1048.000000" y="388.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1098.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="1188.000000" y="388.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1258.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="1358.000000" y="388.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1408.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="1498.000000" y="388.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1561.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="1701.000000" y="388.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1751.000000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="1841.000000" y="388.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1909.500000" y="426.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="1058.000000" y="1719.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1108.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="1208.000000" y="1719.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1258.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="1348.000000" y="1719.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1411.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="1511.000000" y="1719.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1561.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="1651.000000" y="1719.000000" width="137.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1719.500000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="1828.000000" y="1719.000000" width="140.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1898.000000" y="1757.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">itemResponse</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 489.000000 115.000000 L 489.000000 299.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 516.000000 122.000000 L 516.000000 200.000000 S 516.000000 210.000000 526.000000 210.000000 L 1503.000000 210.000000 S 1513.000000 210.000000 1513.000000 220.000000 L 1513.000000 302.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 489.000000 1449.500000 L 489.000000 1582.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1513.000000 1449.000000 L 1513.000000 1633.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="(a_shape -- finally)[0]"><path d="M 543.000000 115.000000 L 543.000000 150.000000 S 543.000000 160.000000 553.000000 160.000000 L 2040.000000 160.000000 S 2050.000000 160.000000 2050.000000 170.000000 L 2050.000000 1531.000000 S 2050.000000 1541.000000 2040.000000 1541.000000 L 1533.000000 1541.000000 S 1523.000000 1541.000000 1523.000000 1551.000000 L 1523.000000 1584.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#644688464)" /></g><g id="(a_sequence.scorer -- )[0]"><path d="M 74.000000 458.500000 L 74.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 234.000000 458.500000 L 234.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.item -- )[0]"><path d="M 384.000000 458.500000 L 384.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 537.000000 458.500000 L 537.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.concept -- )[0]"><path d="M 727.000000 458.500000 L 727.000000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 885.500000 458.500000 L 885.500000 1435.500000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.scorer -- )[0]"><path d="M 1098.000000 456.000000 L 1098.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 1258.000000 456.000000 L 1258.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.item -- )[0]"><path d="M 1408.000000 456.000000 L 1408.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 1561.000000 456.000000 L 1561.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.concept -- )[0]"><path d="M 1751.000000 456.000000 L 1751.000000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 1909.500000 456.000000 L 1909.500000 1433.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 1108.000000 1787.000000 L 1108.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.concept -- )[0]"><path d="M 1258.000000 1787.000000 L 1258.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 1411.000000 1787.000000 L 1411.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.item -- )[0]"><path d="M 1561.000000 1787.000000 L 1561.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 1719.500000 1787.000000 L 1719.500000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 1898.000000 1787.000000 L 1898.000000 2414.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#644688464)" /></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="68.000000" y="516.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="228.000000" y="516.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="378.000000" y="656.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="531.000000" y="796.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="721.000000" y="936.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="879.000000" y="1076.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="378.000000" y="1146.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="378.000000" y="1216.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="879.000000" y="1286.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="879.000000" y="1356.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="527.000000" y="866.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="1092.000000" y="514.000000" width="12.000000" height="860.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="1252.000000" y="514.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="1402.000000" y="654.000000" width="12.000000" height="90.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="1555.000000" y="794.000000" width="12.000000" height="230.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="1745.000000" y="934.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="1903.000000" y="1074.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="1402.000000" y="1144.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="1402.000000" y="1214.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="1903.000000" y="1284.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="1903.000000" y="1354.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="1892.000000" y="1845.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="1555.000000" y="1835.000000" width="12.000000" height="380.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="1405.000000" y="1895.000000" width="12.000000" height="190.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="1252.000000" y="1955.000000" width="12.000000" height="220.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="1713.000000" y="2085.000000" width="12.000000" height="240.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="1102.000000" y="2195.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="1892.000000" y="2335.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="1551.000000" y="864.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="1551.000000" y="1845.000000" width="20.000000" height="90.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="1401.000000" y="1905.000000" width="20.000000" height="170.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="1248.000000" y="1965.000000" width="20.000000" height="200.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="1709.000000" y="2095.000000" width="20.000000" height="220.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="1397.000000" y="1915.000000" width="28.000000" height="90.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="1244.000000" y="1975.000000" width="28.000000" height="180.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="1705.000000" y="2105.000000" width="28.000000" height="200.000000" class=" stroke-B1 fill-N6" style="stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="1240.000000" y="1985.000000" width="36.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="1701.000000" y="2115.000000" width="36.000000" height="180.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1697.000000" y="2125.000000" width="44.000000" height="160.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 82.000000 526.500000 L 224.000000 526.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="154.000000" y="532.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 84.000000 596.500000 L 226.000000 596.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="154.500000" y="602.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 82.000000 666.500000 L 374.000000 666.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="229.500000" y="672.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 84.000000 736.500000 L 376.000000 736.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="229.500000" y="742.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 82.000000 806.500000 L 527.000000 806.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="306.000000" y="812.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 236.000000 876.500000 L 523.000000 876.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 549.000000 946.500000 L 717.000000 946.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="634.000000" y="952.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 78.000000 1016.500000 L 529.000000 1016.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="302.500000" y="1022.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 84.000000 1086.500000 L 875.500000 1086.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="479.500000" y="1092.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 84.000000 1156.500000 L 374.000000 1156.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="229.500000" y="1162.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 82.000000 1226.500000 L 374.000000 1226.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="229.000000" y="1232.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 82.000000 1296.500000 L 877.500000 1296.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#644688464)" /><text x="479.500000" y="1302.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 82.000000 1366.500000 L 877.500000 1366.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#644688464)" /><text x="479.500000" y="1372.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1106.000000 524.000000 L 1248.000000 524.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1178.000000" y="530.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1108.000000 594.000000 L 1250.000000 594.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="1178.500000" y="600.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1106.000000 664.000000 L 1398.000000 664.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1253.500000" y="670.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1108.000000 734.000000 L 1400.000000 734.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="1253.500000" y="740.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1106.000000 804.000000 L 1551.000000 804.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1330.000000" y="810.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 1260.000000 874.000000 L 1547.000000 874.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 1573.000000 944.000000 L 1741.000000 944.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1658.000000" y="950.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1102.000000 1014.000000 L 1553.000000 1014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" mask="url(#644688464)" /><text x="1326.500000" y="1020.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 1106.000000 1084.000000 L 1899.500000 1084.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1503.500000" y="1090.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1108.000000 1154.000000 L 1398.000000 1154.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1253.500000" y="1160.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1106.000000 1224.000000 L 1398.000000 1224.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1253.000000" y="1230.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 1106.000000 1294.000000 L 1899.500000 1294.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1503.500000" y="1300.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 1106.000000 1364.000000 L 1899.500000 1364.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /><text x="1503.500000" y="1370.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 1890.000000 1855.000000 L 1575.000000 1855.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 1549.000000 1925.000000 L 1429.000000 1925.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 1395.000000 1995.000000 L 1280.000000 1995.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 1553.000000 2065.000000 L 1425.000000 2065.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1278.000000 2135.000000 L 1693.500000 2135.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 1116.000000 2205.000000 L 1551.000000 2205.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1695.500000 2275.000000 L 1112.000000 2275.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 1110.000000 2345.000000 L 1888.000000 2345.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#644688464)" /></g><mask id="644688464" maskUnits="userSpaceOnUse" x="12" y="10" width="2038" height="2469">
 <rect x="12" y="10" width="2038" height="2469" fill="white"></rect>
 <rect x="124.000000" y="516.000000" width="60" height="21" fill="black"></rect>
 <rect x="140.000000" y="586.000000" width="29" height="21" fill="black"></rect>
@@ -77,4 +57,4 @@
 <rect x="1181.000000" y="1214.000000" width="144" height="21" fill="black"></rect>
 <rect x="1453.000000" y="1284.000000" width="101" height="21" fill="black"></rect>
 <rect x="1402.000000" y="1354.000000" width="203" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sql_table_column_styles/dagre/sketch.exp.svg b/e2etests/testdata/stable/sql_table_column_styles/dagre/sketch.exp.svg
index 1bf933cc1..c9de561e2 100644
--- a/e2etests/testdata/stable/sql_table_column_styles/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_table_column_styles/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2858" height="468" viewBox="-2 -2 2858 468"><rect x="-2.000000" y="-2.000000" width="2858.000000" height="468.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2858 468"><svg id="d2-svg" width="2858" height="468" viewBox="-2 -2 2858 468"><rect x="-2.000000" y="-2.000000" width="2858.000000" height="468.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="Humor in the Court"><g class="shape" ><rect x="0.000000" y="178.000000" width="678.000000" height="108.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="0.000000" y="178.000000" width="678.000000" height="36.000000" fill="red" class="class_header" /><text x="10.000000" y="203.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:24px">Humor in the Court</text><text x="10.000000" y="237.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">Could you see him from where you were standing?</text><text x="448.000000" y="237.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">I could see his head.</text><text x="658.000000" y="237.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="678.000000" y1="250.000000" y2="250.000000" stroke="red" style="stroke-width:2" /><text x="10.000000" y="273.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">And where was his head?</text><text x="448.000000" y="273.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">Just above his shoulders.</text><text x="658.000000" y="273.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="678.000000" y1="286.000000" y2="286.000000" stroke="red" style="stroke-width:2" /></g></g><g id="Humor in the Court2"><g class="shape" ><rect x="738.000000" y="160.000000" width="992.000000" height="144.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="738.000000" y="160.000000" width="992.000000" height="48.000000" fill="red" class="class_header" /><text x="748.000000" y="194.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:34px">Humor in the Court2</text><text x="748.000000" y="239.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">Could you see him from where you were standing?</text><text x="1395.000000" y="239.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">I could see his head.</text><text x="1710.000000" y="239.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="738.000000" x2="1730.000000" y1="256.000000" y2="256.000000" stroke="red" style="stroke-width:2" /><text x="748.000000" y="287.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">And where was his head?</text><text x="1395.000000" y="287.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">Just above his shoulders.</text><text x="1710.000000" y="287.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="738.000000" x2="1730.000000" y1="304.000000" y2="304.000000" stroke="red" style="stroke-width:2" /></g></g><g id="manager"><g class="shape" ><rect x="1790.000000" y="48.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="1790.000000" y="48.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="2001.000000" y="101.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="1800.000000" y="168.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1820.000000" y="168.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="2192.000000" y="168.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1800.000000" y="214.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1820.000000" y="214.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="2192.000000" y="214.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1800.000000" y="260.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1820.000000" y="260.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="2192.000000" y="260.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="1790.000000" x2="2212.000000" y1="278.000000" y2="278.000000" class=" stroke-N1" style="stroke-width:1" /><text x="1800.000000" y="306.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1820.000000" y="306.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="2192.000000" y="306.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="1800.000000" y="352.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1820.000000" y="352.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="2192.000000" y="352.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="1800.000000" y="398.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1820.000000" y="398.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="2192.000000" y="398.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="manager2"><g class="shape" ><rect x="2272.000000" y="0.000000" width="582.000000" height="464.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="2272.000000" y="0.000000" width="582.000000" height="116.000000" class="class_header fill-N1" /><text x="2563.000000" y="68.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:34px;">BatchManager</text><text x="2282.000000" y="152.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2302.000000" y="152.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">num</text><text x="2834.000000" y="152.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2282.000000" y="210.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2302.000000" y="210.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">timeout</text><text x="2834.000000" y="210.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2282.000000" y="268.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2302.000000" y="268.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">pid</text><text x="2834.000000" y="268.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px" /><line x1="2272.000000" x2="2854.000000" y1="290.000000" y2="290.000000" class=" stroke-N1" style="stroke-width:1" /><text x="2282.000000" y="326.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2302.000000" y="326.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getStatus()</text><text x="2834.000000" y="326.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Enum</text><text x="2282.000000" y="384.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2302.000000" y="384.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getJobs()</text><text x="2834.000000" y="384.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Job[]</text><text x="2282.000000" y="442.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2302.000000" y="442.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">setTimeout(seconds int)</text><text x="2834.000000" y="442.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">void</text></g></g><mask id="2555987415" maskUnits="userSpaceOnUse" x="-2" y="-2" width="2858" height="468">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="Humor in the Court"><g class="shape" ><rect x="0.000000" y="178.000000" width="678.000000" height="108.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="0.000000" y="178.000000" width="678.000000" height="36.000000" fill="red" class="class_header" /><text x="10.000000" y="203.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:24px">Humor in the Court</text><text x="10.000000" y="237.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">Could you see him from where you were standing?</text><text x="448.000000" y="237.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">I could see his head.</text><text x="658.000000" y="237.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="678.000000" y1="250.000000" y2="250.000000" stroke="red" style="stroke-width:2" /><text x="10.000000" y="273.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">And where was his head?</text><text x="448.000000" y="273.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">Just above his shoulders.</text><text x="658.000000" y="273.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="678.000000" y1="286.000000" y2="286.000000" stroke="red" style="stroke-width:2" /></g></g><g id="Humor in the Court2"><g class="shape" ><rect x="738.000000" y="160.000000" width="992.000000" height="144.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="738.000000" y="160.000000" width="992.000000" height="48.000000" fill="red" class="class_header" /><text x="748.000000" y="194.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:34px">Humor in the Court2</text><text x="748.000000" y="239.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">Could you see him from where you were standing?</text><text x="1395.000000" y="239.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">I could see his head.</text><text x="1710.000000" y="239.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="738.000000" x2="1730.000000" y1="256.000000" y2="256.000000" stroke="red" style="stroke-width:2" /><text x="748.000000" y="287.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">And where was his head?</text><text x="1395.000000" y="287.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">Just above his shoulders.</text><text x="1710.000000" y="287.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="738.000000" x2="1730.000000" y1="304.000000" y2="304.000000" stroke="red" style="stroke-width:2" /></g></g><g id="manager"><g class="shape" ><rect x="1790.000000" y="48.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="1790.000000" y="48.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="2001.000000" y="101.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="1800.000000" y="168.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1820.000000" y="168.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="2192.000000" y="168.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1800.000000" y="214.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1820.000000" y="214.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="2192.000000" y="214.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1800.000000" y="260.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1820.000000" y="260.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="2192.000000" y="260.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="1790.000000" x2="2212.000000" y1="278.000000" y2="278.000000" class=" stroke-N1" style="stroke-width:1" /><text x="1800.000000" y="306.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1820.000000" y="306.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="2192.000000" y="306.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="1800.000000" y="352.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1820.000000" y="352.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="2192.000000" y="352.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="1800.000000" y="398.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1820.000000" y="398.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="2192.000000" y="398.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="manager2"><g class="shape" ><rect x="2272.000000" y="0.000000" width="582.000000" height="464.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="2272.000000" y="0.000000" width="582.000000" height="116.000000" class="class_header fill-N1" /><text x="2563.000000" y="68.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:34px;">BatchManager</text><text x="2282.000000" y="152.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2302.000000" y="152.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">num</text><text x="2834.000000" y="152.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2282.000000" y="210.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2302.000000" y="210.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">timeout</text><text x="2834.000000" y="210.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2282.000000" y="268.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2302.000000" y="268.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">pid</text><text x="2834.000000" y="268.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px" /><line x1="2272.000000" x2="2854.000000" y1="290.000000" y2="290.000000" class=" stroke-N1" style="stroke-width:1" /><text x="2282.000000" y="326.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2302.000000" y="326.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getStatus()</text><text x="2834.000000" y="326.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Enum</text><text x="2282.000000" y="384.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2302.000000" y="384.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getJobs()</text><text x="2834.000000" y="384.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Job[]</text><text x="2282.000000" y="442.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2302.000000" y="442.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">setTimeout(seconds int)</text><text x="2834.000000" y="442.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">void</text></g></g><mask id="2555987415" maskUnits="userSpaceOnUse" x="-2" y="-2" width="2858" height="468">
 <rect x="-2" y="-2" width="2858" height="468" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sql_table_column_styles/elk/sketch.exp.svg b/e2etests/testdata/stable/sql_table_column_styles/elk/sketch.exp.svg
index 03f8b18c1..0a0db8d02 100644
--- a/e2etests/testdata/stable/sql_table_column_styles/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_table_column_styles/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2738" height="468" viewBox="10 10 2738 468"><rect x="10.000000" y="10.000000" width="2738.000000" height="468.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2738 468"><svg id="d2-svg" width="2738" height="468" viewBox="10 10 2738 468"><rect x="10.000000" y="10.000000" width="2738.000000" height="468.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="Humor in the Court"><g class="shape" ><rect x="12.000000" y="190.000000" width="678.000000" height="108.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="12.000000" y="190.000000" width="678.000000" height="36.000000" fill="red" class="class_header" /><text x="22.000000" y="215.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:24px">Humor in the Court</text><text x="22.000000" y="249.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">Could you see him from where you were standing?</text><text x="460.000000" y="249.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">I could see his head.</text><text x="670.000000" y="249.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="690.000000" y1="262.000000" y2="262.000000" stroke="red" style="stroke-width:2" /><text x="22.000000" y="285.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">And where was his head?</text><text x="460.000000" y="285.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">Just above his shoulders.</text><text x="670.000000" y="285.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="690.000000" y1="298.000000" y2="298.000000" stroke="red" style="stroke-width:2" /></g></g><g id="Humor in the Court2"><g class="shape" ><rect x="710.000000" y="172.000000" width="992.000000" height="144.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="710.000000" y="172.000000" width="992.000000" height="48.000000" fill="red" class="class_header" /><text x="720.000000" y="206.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:34px">Humor in the Court2</text><text x="720.000000" y="251.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">Could you see him from where you were standing?</text><text x="1367.000000" y="251.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">I could see his head.</text><text x="1682.000000" y="251.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="710.000000" x2="1702.000000" y1="268.000000" y2="268.000000" stroke="red" style="stroke-width:2" /><text x="720.000000" y="299.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">And where was his head?</text><text x="1367.000000" y="299.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">Just above his shoulders.</text><text x="1682.000000" y="299.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="710.000000" x2="1702.000000" y1="316.000000" y2="316.000000" stroke="red" style="stroke-width:2" /></g></g><g id="manager"><g class="shape" ><rect x="1722.000000" y="60.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="1722.000000" y="60.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="1933.000000" y="113.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="1732.000000" y="180.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1752.000000" y="180.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="2124.000000" y="180.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1732.000000" y="226.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1752.000000" y="226.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="2124.000000" y="226.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1732.000000" y="272.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1752.000000" y="272.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="2124.000000" y="272.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="1722.000000" x2="2144.000000" y1="290.000000" y2="290.000000" class=" stroke-N1" style="stroke-width:1" /><text x="1732.000000" y="318.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1752.000000" y="318.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="2124.000000" y="318.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="1732.000000" y="364.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1752.000000" y="364.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="2124.000000" y="364.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="1732.000000" y="410.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1752.000000" y="410.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="2124.000000" y="410.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="manager2"><g class="shape" ><rect x="2164.000000" y="12.000000" width="582.000000" height="464.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="2164.000000" y="12.000000" width="582.000000" height="116.000000" class="class_header fill-N1" /><text x="2455.000000" y="80.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:34px;">BatchManager</text><text x="2174.000000" y="164.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2194.000000" y="164.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">num</text><text x="2726.000000" y="164.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2174.000000" y="222.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2194.000000" y="222.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">timeout</text><text x="2726.000000" y="222.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2174.000000" y="280.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2194.000000" y="280.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">pid</text><text x="2726.000000" y="280.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px" /><line x1="2164.000000" x2="2746.000000" y1="302.000000" y2="302.000000" class=" stroke-N1" style="stroke-width:1" /><text x="2174.000000" y="338.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2194.000000" y="338.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getStatus()</text><text x="2726.000000" y="338.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Enum</text><text x="2174.000000" y="396.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2194.000000" y="396.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getJobs()</text><text x="2726.000000" y="396.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Job[]</text><text x="2174.000000" y="454.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2194.000000" y="454.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">setTimeout(seconds int)</text><text x="2726.000000" y="454.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">void</text></g></g><mask id="416346713" maskUnits="userSpaceOnUse" x="10" y="10" width="2738" height="468">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="Humor in the Court"><g class="shape" ><rect x="12.000000" y="190.000000" width="678.000000" height="108.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="12.000000" y="190.000000" width="678.000000" height="36.000000" fill="red" class="class_header" /><text x="22.000000" y="215.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:24px">Humor in the Court</text><text x="22.000000" y="249.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">Could you see him from where you were standing?</text><text x="460.000000" y="249.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">I could see his head.</text><text x="670.000000" y="249.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="690.000000" y1="262.000000" y2="262.000000" stroke="red" style="stroke-width:2" /><text x="22.000000" y="285.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">And where was his head?</text><text x="460.000000" y="285.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">Just above his shoulders.</text><text x="670.000000" y="285.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="690.000000" y1="298.000000" y2="298.000000" stroke="red" style="stroke-width:2" /></g></g><g id="Humor in the Court2"><g class="shape" ><rect x="710.000000" y="172.000000" width="992.000000" height="144.000000" stroke="red" fill="lightgray" class="shape" style="stroke-width:2;" /><rect x="710.000000" y="172.000000" width="992.000000" height="48.000000" fill="red" class="class_header" /><text x="720.000000" y="206.750000" fill="lightgray" class="text" style="text-anchor:start;font-size:34px">Humor in the Court2</text><text x="720.000000" y="251.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">Could you see him from where you were standing?</text><text x="1367.000000" y="251.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">I could see his head.</text><text x="1682.000000" y="251.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="710.000000" x2="1702.000000" y1="268.000000" y2="268.000000" stroke="red" style="stroke-width:2" /><text x="720.000000" y="299.500000" class="text fill-B2" style="text-anchor:start;font-size:30px">And where was his head?</text><text x="1367.000000" y="299.500000" class="text fill-N2" style="text-anchor:start;font-size:30px">Just above his shoulders.</text><text x="1682.000000" y="299.500000" class="text fill-AA2" style="text-anchor:end;font-size:30px;letter-spacing:2px" /><line x1="710.000000" x2="1702.000000" y1="316.000000" y2="316.000000" stroke="red" style="stroke-width:2" /></g></g><g id="manager"><g class="shape" ><rect x="1722.000000" y="60.000000" width="422.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="1722.000000" y="60.000000" width="422.000000" height="92.000000" class="class_header fill-N1" /><text x="1933.000000" y="113.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:24px;">BatchManager</text><text x="1732.000000" y="180.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1752.000000" y="180.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="2124.000000" y="180.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1732.000000" y="226.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1752.000000" y="226.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="2124.000000" y="226.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="1732.000000" y="272.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="1752.000000" y="272.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="2124.000000" y="272.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="1722.000000" x2="2144.000000" y1="290.000000" y2="290.000000" class=" stroke-N1" style="stroke-width:1" /><text x="1732.000000" y="318.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1752.000000" y="318.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="2124.000000" y="318.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="1732.000000" y="364.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1752.000000" y="364.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="2124.000000" y="364.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="1732.000000" y="410.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="1752.000000" y="410.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="2124.000000" y="410.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="manager2"><g class="shape" ><rect x="2164.000000" y="12.000000" width="582.000000" height="464.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="2164.000000" y="12.000000" width="582.000000" height="116.000000" class="class_header fill-N1" /><text x="2455.000000" y="80.750000" class="text-mono fill-N7" style="text-anchor:middle;font-size:34px;">BatchManager</text><text x="2174.000000" y="164.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2194.000000" y="164.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">num</text><text x="2726.000000" y="164.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2174.000000" y="222.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2194.000000" y="222.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">timeout</text><text x="2726.000000" y="222.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">int</text><text x="2174.000000" y="280.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">-</text><text x="2194.000000" y="280.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">pid</text><text x="2726.000000" y="280.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px" /><line x1="2164.000000" x2="2746.000000" y1="302.000000" y2="302.000000" class=" stroke-N1" style="stroke-width:1" /><text x="2174.000000" y="338.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2194.000000" y="338.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getStatus()</text><text x="2726.000000" y="338.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Enum</text><text x="2174.000000" y="396.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2194.000000" y="396.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">getJobs()</text><text x="2726.000000" y="396.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">Job[]</text><text x="2174.000000" y="454.500000" class="text-mono fill-B2" style="text-anchor:start;font-size:30px">+</text><text x="2194.000000" y="454.500000" class="text-mono fill-N1" style="text-anchor:start;font-size:30px">setTimeout(seconds int)</text><text x="2726.000000" y="454.500000" class="text-mono fill-AA2" style="text-anchor:end;font-size:30px">void</text></g></g><mask id="416346713" maskUnits="userSpaceOnUse" x="10" y="10" width="2738" height="468">
 <rect x="10" y="10" width="2738" height="468" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sql_table_tooltip_animated/dagre/sketch.exp.svg b/e2etests/testdata/stable/sql_table_tooltip_animated/dagre/sketch.exp.svg
index ce254f1cf..5c0dc973a 100644
--- a/e2etests/testdata/stable/sql_table_tooltip_animated/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_table_tooltip_animated/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="264" viewBox="-2 -18 80 264"><rect x="-2.000000" y="-18.000000" width="80.000000" height="264.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 80 264"><svg id="d2-svg" width="80" height="264" viewBox="-2 -18 80 264"><rect x="-2.000000" y="-18.000000" width="80.000000" height="264.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -26,27 +26,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="40.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="40.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="60.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><g transform="translate(44 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="40.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="40.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="60.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><g transform="translate(44 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -62,4 +42,4 @@
 </g><title>I like turtles</title></g></g><g id="a"><g class="shape" ><rect x="0.000000" y="172.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="172.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="197.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">a</text><text x="10.000000" y="231.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">b</text><text x="40.000000" y="231.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="40.000000" y="231.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="60.000000" y1="244.000000" y2="244.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]"><marker id="mk-599773101" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 30.000000 74.000000 C 30.000000 112.000000 30.000000 132.000000 30.000000 168.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-599773101)" mask="url(#3504923159)" /></g><mask id="3504923159" maskUnits="userSpaceOnUse" x="-2" y="-18" width="80" height="264">
 <rect x="-2" y="-18" width="80" height="264" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sql_table_tooltip_animated/elk/sketch.exp.svg b/e2etests/testdata/stable/sql_table_tooltip_animated/elk/sketch.exp.svg
index de28ce342..157833217 100644
--- a/e2etests/testdata/stable/sql_table_tooltip_animated/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_table_tooltip_animated/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="234" viewBox="10 -6 80 234"><rect x="10.000000" y="-6.000000" width="80.000000" height="234.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 80 234"><svg id="d2-svg" width="80" height="234" viewBox="10 -6 80 234"><rect x="10.000000" y="-6.000000" width="80.000000" height="234.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -26,27 +26,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="52.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="52.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="72.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><g transform="translate(56 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="52.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="52.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="72.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><g transform="translate(56 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -62,4 +42,4 @@
 </g><title>I like turtles</title></g></g><g id="a"><g class="shape" ><rect x="12.000000" y="154.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="154.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="179.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">a</text><text x="22.000000" y="213.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">b</text><text x="52.000000" y="213.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="52.000000" y="213.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="72.000000" y1="226.000000" y2="226.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]"><marker id="mk-599773101" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 42.000000 86.000000 L 42.000000 150.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-599773101)" mask="url(#744531212)" /></g><mask id="744531212" maskUnits="userSpaceOnUse" x="10" y="-6" width="80" height="234">
 <rect x="10" y="-6" width="80" height="234" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg b/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
index 1bc5ea03c..90bd2fe2a 100644
--- a/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="464" viewBox="-2 -2 800 464"><rect x="-2.000000" y="-2.000000" width="800.000000" height="464.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 800 464"><svg id="d2-svg" width="800" height="464" viewBox="-2 -2 800 464"><rect x="-2.000000" y="-2.000000" width="800.000000" height="464.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="users"><g class="shape" ><rect x="0.000000" y="0.000000" width="268.000000" height="216.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="268.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="111.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="248.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="111.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="248.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="131.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="111.000000" y="131.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="248.000000" y="131.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="144.000000" y2="144.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="167.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="111.000000" y="167.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="248.000000" y="167.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="180.000000" y2="180.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="203.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="111.000000" y="203.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="248.000000" y="203.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">PK</text><line x1="0.000000" x2="268.000000" y1="216.000000" y2="216.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="products"><g class="shape" ><rect x="328.000000" y="18.000000" width="164.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="328.000000" y="18.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="338.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">products</text><text x="338.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="405.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">price</text><text x="405.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">decimal</text><text x="472.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">sku</text><text x="405.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="472.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="405.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="472.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="orders"><g class="shape" ><rect x="328.000000" y="316.000000" width="164.000000" height="144.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="328.000000" y="316.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="338.000000" y="341.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">orders</text><text x="338.000000" y="375.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="449.000000" y="375.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="375.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="388.000000" y2="388.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="411.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">user_id</text><text x="449.000000" y="411.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="411.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="424.000000" y2="424.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="447.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">product_id</text><text x="449.000000" y="447.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="447.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="460.000000" y2="460.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="shipments"><g class="shape" ><rect x="552.000000" y="18.000000" width="244.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="552.000000" y="18.000000" width="244.000000" height="36.000000" class="class_header fill-N1" /><text x="562.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">shipments</text><text x="562.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="728.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="776.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="562.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">order_id</text><text x="728.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="776.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="562.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">tracking_number</text><text x="728.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="776.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="562.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">status</text><text x="728.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="776.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 134.000000 220.000000 C 134.000000 256.000000 172.800000 283.200000 324.343201 350.378945" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1837168935)" /></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 410.000000 202.000000 C 410.000000 252.400000 410.000000 276.000000 410.000000 312.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1837168935)" /></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 674.000000 202.000000 C 674.000000 252.400000 637.600000 282.800000 495.631838 348.323767" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1837168935)" /></g><mask id="1837168935" maskUnits="userSpaceOnUse" x="-2" y="-2" width="800" height="464">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="users"><g class="shape" ><rect x="0.000000" y="0.000000" width="268.000000" height="216.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="268.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="111.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="248.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="95.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="111.000000" y="95.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="248.000000" y="95.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="108.000000" y2="108.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="131.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="111.000000" y="131.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="248.000000" y="131.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="144.000000" y2="144.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="167.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="111.000000" y="167.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="248.000000" y="167.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="268.000000" y1="180.000000" y2="180.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="203.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="111.000000" y="203.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="248.000000" y="203.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">PK</text><line x1="0.000000" x2="268.000000" y1="216.000000" y2="216.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="products"><g class="shape" ><rect x="328.000000" y="18.000000" width="164.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="328.000000" y="18.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="338.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">products</text><text x="338.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="405.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">price</text><text x="405.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">decimal</text><text x="472.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">sku</text><text x="405.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="472.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="405.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="472.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="orders"><g class="shape" ><rect x="328.000000" y="316.000000" width="164.000000" height="144.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="328.000000" y="316.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="338.000000" y="341.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">orders</text><text x="338.000000" y="375.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="449.000000" y="375.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="375.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="388.000000" y2="388.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="411.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">user_id</text><text x="449.000000" y="411.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="411.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="424.000000" y2="424.000000" class=" stroke-N1" style="stroke-width:2" /><text x="338.000000" y="447.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">product_id</text><text x="449.000000" y="447.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="472.000000" y="447.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="328.000000" x2="492.000000" y1="460.000000" y2="460.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="shipments"><g class="shape" ><rect x="552.000000" y="18.000000" width="244.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="552.000000" y="18.000000" width="244.000000" height="36.000000" class="class_header fill-N1" /><text x="562.000000" y="43.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">shipments</text><text x="562.000000" y="77.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="728.000000" y="77.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="776.000000" y="77.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="90.000000" y2="90.000000" class=" stroke-N1" style="stroke-width:2" /><text x="562.000000" y="113.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">order_id</text><text x="728.000000" y="113.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="776.000000" y="113.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="126.000000" y2="126.000000" class=" stroke-N1" style="stroke-width:2" /><text x="562.000000" y="149.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">tracking_number</text><text x="728.000000" y="149.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="776.000000" y="149.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="162.000000" y2="162.000000" class=" stroke-N1" style="stroke-width:2" /><text x="562.000000" y="185.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">status</text><text x="728.000000" y="185.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="776.000000" y="185.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="552.000000" x2="796.000000" y1="198.000000" y2="198.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 134.000000 220.000000 C 134.000000 256.000000 172.800000 283.200000 324.343201 350.378945" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1837168935)" /></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 410.000000 202.000000 C 410.000000 252.400000 410.000000 276.000000 410.000000 312.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1837168935)" /></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 674.000000 202.000000 C 674.000000 252.400000 637.600000 282.800000 495.631838 348.323767" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#1837168935)" /></g><mask id="1837168935" maskUnits="userSpaceOnUse" x="-2" y="-2" width="800" height="464">
 <rect x="-2" y="-2" width="800" height="464" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg b/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
index e4e5256fb..5bc9f5734 100644
--- a/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="444" viewBox="10 10 720 444"><rect x="10.000000" y="10.000000" width="720.000000" height="444.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 720 444"><svg id="d2-svg" width="720" height="444" viewBox="10 10 720 444"><rect x="10.000000" y="10.000000" width="720.000000" height="444.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="users"><g class="shape" ><rect x="12.000000" y="12.000000" width="268.000000" height="216.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="268.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="123.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="260.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="123.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="260.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="143.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="123.000000" y="143.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="260.000000" y="143.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="156.000000" y2="156.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="179.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="123.000000" y="179.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="260.000000" y="179.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="192.000000" y2="192.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="215.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="123.000000" y="215.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="260.000000" y="215.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">PK</text><line x1="12.000000" x2="280.000000" y1="228.000000" y2="228.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="products"><g class="shape" ><rect x="300.000000" y="48.000000" width="164.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="300.000000" y="48.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="310.000000" y="73.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">products</text><text x="310.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="377.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="143.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">price</text><text x="377.000000" y="143.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">decimal</text><text x="444.000000" y="143.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="156.000000" y2="156.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="179.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">sku</text><text x="377.000000" y="179.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="444.000000" y="179.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="192.000000" y2="192.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="215.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="377.000000" y="215.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="444.000000" y="215.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="228.000000" y2="228.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="orders"><g class="shape" ><rect x="300.000000" y="308.000000" width="164.000000" height="144.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="300.000000" y="308.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="310.000000" y="333.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">orders</text><text x="310.000000" y="367.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="421.000000" y="367.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="367.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="380.000000" y2="380.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="403.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">user_id</text><text x="421.000000" y="403.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="403.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="416.000000" y2="416.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="439.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">product_id</text><text x="421.000000" y="439.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="439.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="452.000000" y2="452.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="shipments"><g class="shape" ><rect x="484.000000" y="48.000000" width="244.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="484.000000" y="48.000000" width="244.000000" height="36.000000" class="class_header fill-N1" /><text x="494.000000" y="73.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">shipments</text><text x="494.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="660.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="708.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /><text x="494.000000" y="143.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">order_id</text><text x="660.000000" y="143.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="708.000000" y="143.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="156.000000" y2="156.000000" class=" stroke-N1" style="stroke-width:2" /><text x="494.000000" y="179.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">tracking_number</text><text x="660.000000" y="179.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="708.000000" y="179.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="192.000000" y2="192.000000" class=" stroke-N1" style="stroke-width:2" /><text x="494.000000" y="215.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">status</text><text x="660.000000" y="215.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="708.000000" y="215.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="228.000000" y2="228.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 146.000000 232.000000 L 146.000000 258.000000 S 146.000000 268.000000 156.000000 268.000000 L 331.000000 268.000000 S 341.000000 268.000000 341.000000 278.000000 L 341.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3723523020)" /></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 382.000000 232.000000 L 382.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3723523020)" /></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 606.000000 232.000000 L 606.000000 258.000000 S 606.000000 268.000000 596.000000 268.000000 L 433.000000 268.000000 S 423.000000 268.000000 423.000000 278.000000 L 423.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3723523020)" /></g><mask id="3723523020" maskUnits="userSpaceOnUse" x="10" y="10" width="720" height="444">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="users"><g class="shape" ><rect x="12.000000" y="12.000000" width="268.000000" height="216.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="268.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="123.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="260.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="123.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="260.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="143.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="123.000000" y="143.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="260.000000" y="143.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="156.000000" y2="156.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="179.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="123.000000" y="179.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="260.000000" y="179.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="280.000000" y1="192.000000" y2="192.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="215.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="123.000000" y="215.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="260.000000" y="215.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px">PK</text><line x1="12.000000" x2="280.000000" y1="228.000000" y2="228.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="products"><g class="shape" ><rect x="300.000000" y="48.000000" width="164.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="300.000000" y="48.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="310.000000" y="73.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">products</text><text x="310.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="377.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="143.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">price</text><text x="377.000000" y="143.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">decimal</text><text x="444.000000" y="143.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="156.000000" y2="156.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="179.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">sku</text><text x="377.000000" y="179.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="444.000000" y="179.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="192.000000" y2="192.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="215.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="377.000000" y="215.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="444.000000" y="215.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="228.000000" y2="228.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="orders"><g class="shape" ><rect x="300.000000" y="308.000000" width="164.000000" height="144.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="300.000000" y="308.000000" width="164.000000" height="36.000000" class="class_header fill-N1" /><text x="310.000000" y="333.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">orders</text><text x="310.000000" y="367.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="421.000000" y="367.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="367.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="380.000000" y2="380.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="403.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">user_id</text><text x="421.000000" y="403.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="403.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="416.000000" y2="416.000000" class=" stroke-N1" style="stroke-width:2" /><text x="310.000000" y="439.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">product_id</text><text x="421.000000" y="439.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="444.000000" y="439.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="300.000000" x2="464.000000" y1="452.000000" y2="452.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="shipments"><g class="shape" ><rect x="484.000000" y="48.000000" width="244.000000" height="180.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="484.000000" y="48.000000" width="244.000000" height="36.000000" class="class_header fill-N1" /><text x="494.000000" y="73.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">shipments</text><text x="494.000000" y="107.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="660.000000" y="107.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="708.000000" y="107.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="120.000000" y2="120.000000" class=" stroke-N1" style="stroke-width:2" /><text x="494.000000" y="143.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">order_id</text><text x="660.000000" y="143.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="708.000000" y="143.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="156.000000" y2="156.000000" class=" stroke-N1" style="stroke-width:2" /><text x="494.000000" y="179.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">tracking_number</text><text x="660.000000" y="179.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="708.000000" y="179.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="192.000000" y2="192.000000" class=" stroke-N1" style="stroke-width:2" /><text x="494.000000" y="215.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">status</text><text x="660.000000" y="215.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="708.000000" y="215.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="484.000000" x2="728.000000" y1="228.000000" y2="228.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 146.000000 232.000000 L 146.000000 258.000000 S 146.000000 268.000000 156.000000 268.000000 L 331.000000 268.000000 S 341.000000 268.000000 341.000000 278.000000 L 341.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3723523020)" /></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 382.000000 232.000000 L 382.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3723523020)" /></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 606.000000 232.000000 L 606.000000 258.000000 S 606.000000 268.000000 596.000000 268.000000 L 433.000000 268.000000 S 423.000000 268.000000 423.000000 278.000000 L 423.000000 304.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#3723523020)" /></g><mask id="3723523020" maskUnits="userSpaceOnUse" x="10" y="10" width="720" height="444">
 <rect x="10" y="10" width="720" height="444" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
index eae74755c..ed8f93a0b 100644
--- a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="279" viewBox="-2 -17 130 279"><rect x="-2.000000" y="-17.000000" width="130.000000" height="279.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 130 279"><svg id="d2-svg" width="130" height="279" viewBox="-2 -17 130 279"><rect x="-2.000000" y="-17.000000" width="130.000000" height="279.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,31 +17,11 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="0" y="-15" width="126" height="81">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="0" y="-15" width="126" height="81">
 <rect x="0" y="-15" width="126" height="81" fill="white"></rect>
 <path d="M0,0L15,-15L126,-15L126,51L111,66L0,66L0,0L111,0L111,66M111,0L126,-15" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0.000000" y="0.000000" width="111.000000" height="66.000000" mask="url(#border-mask-rectangle)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-rectangle)" points="0,0 15,-15 126,-15 126,51 111,66 111,0" class=" fill-B5" style="stroke-width:2;" /><path d="M0,0 L15,-15 L126,-15 L126,51 L111,66 L0,66 L0,0 L111,0 L111,66 M111,0 L126,-15" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="55.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="9" y="151" width="109" height="109">
 <rect x="9" y="151" width="109" height="109" fill="white"></rect>
 <path d="M9,166L24,151L118,151L118,245L103,260L9,260L9,166L103,166L103,260M103,166L118,151" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="9.000000" y="166.000000" width="94.000000" height="94.000000" mask="url(#border-mask-square)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-square)" points="9,166 24,151 118,151 118,245 103,260 103,166" class=" fill-B5" style="stroke-width:2;" /><path d="M9,166 L24,151 L118,151 L118,245 L103,260 L9,260 L9,166 L103,166 L103,260 M103,166 L118,151" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="56.000000" y="218.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.500000 68.000000 C 55.500000 106.000000 55.500000 126.000000 55.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1540482440)" /></g><mask id="1540482440" maskUnits="userSpaceOnUse" x="-2" y="-17" width="130" height="279">
 <rect x="-2" y="-17" width="130" height="279" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
index 39206c2a5..e07b6d8ca 100644
--- a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="249" viewBox="10 -5 130 249"><rect x="10.000000" y="-5.000000" width="130.000000" height="249.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 130 249"><svg id="d2-svg" width="130" height="249" viewBox="10 -5 130 249"><rect x="10.000000" y="-5.000000" width="130.000000" height="249.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,31 +17,11 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="12" y="-3" width="126" height="81">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="12" y="-3" width="126" height="81">
 <rect x="12" y="-3" width="126" height="81" fill="white"></rect>
 <path d="M12,12L27,-3L138,-3L138,63L123,78L12,78L12,12L123,12L123,78M123,12L138,-3" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12.000000" y="12.000000" width="111.000000" height="66.000000" mask="url(#border-mask-rectangle)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-rectangle)" points="12,12 27,-3 138,-3 138,63 123,78 123,12" class=" fill-B5" style="stroke-width:2;" /><path d="M12,12 L27,-3 L138,-3 L138,63 L123,78 L12,78 L12,12 L123,12 L123,78 M123,12 L138,-3" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="67.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="20" y="133" width="109" height="109">
 <rect x="20" y="133" width="109" height="109" fill="white"></rect>
 <path d="M20,148L35,133L129,133L129,227L114,242L20,242L20,148L114,148L114,242M114,148L129,133" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="20.000000" y="148.000000" width="94.000000" height="94.000000" mask="url(#border-mask-square)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-square)" points="20,148 35,133 129,133 129,227 114,242 114,148" class=" fill-B5" style="stroke-width:2;" /><path d="M20,148 L35,133 L129,133 L129,227 L114,242 L20,242 L20,148 L114,148 L114,242 M114,148 L129,133" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="67.000000" y="200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.500000 80.000000 L 67.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#603294221)" /></g><mask id="603294221" maskUnits="userSpaceOnUse" x="10" y="-5" width="130" height="249">
 <rect x="10" y="-5" width="130" height="249" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
index 5f7b2fb13..7d2944b56 100644
--- a/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="483" height="1234" viewBox="-2 -2 483 1234"><rect x="-2.000000" y="-2.000000" width="483.000000" height="1234.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 483 1234"><svg id="d2-svg" width="483" height="1234" viewBox="-2 -2 483 1234"><rect x="-2.000000" y="-2.000000" width="483.000000" height="1234.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="60.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="366.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="392.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b"><g class="shape" ><rect x="213.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="239.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1"><g class="shape" ><rect x="20.000000" y="207.000000" width="439.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="239.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l1</text></g><g id="l2c1"><g class="shape" ><rect x="20.000000" y="473.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="86.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="326.000000" y="473.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="392.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="173.000000" y="473.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="239.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="20.000000" y="739.000000" width="286.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="163.000000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="326.000000" y="739.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="392.500000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c2</text></g><g id="l4"><g class="shape" ><rect x="0.000000" y="1005.000000" width="479.000000" height="225.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="239.500000" y="992.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l4</text></g><g id="l1.b"><g class="shape" ><rect x="213.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1.a"><g class="shape" ><rect x="60.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l1.c"><g class="shape" ><rect x="366.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="60.000000" y="502.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="366.000000" y="502.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="213.000000" y="502.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="60.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="213.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="366.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l4.c1"><g class="shape" ><rect x="20.000000" y="1070.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="1058.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="173.000000" y="1070.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="1058.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="326.000000" y="1070.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="1058.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="60.000000" y="1102.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="1140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="213.000000" y="1102.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="239.500000" y="1140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="366.000000" y="1102.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="392.500000" y="1140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 239.500000 68.000000 C 239.500000 106.000000 239.500000 180.100000 239.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(a -&gt; l1.a)[0]"><path d="M 86.500000 68.000000 C 86.500000 106.000000 86.500000 180.100000 86.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(c -&gt; l1.c)[0]"><path d="M 392.500000 68.000000 C 392.500000 106.000000 392.500000 180.100000 392.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 86.500000 304.500000 C 86.500000 326.100000 86.500000 342.000000 86.500000 357.000000 C 86.500000 372.000000 86.500000 446.100000 86.500000 498.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 392.500000 304.500000 C 392.500000 326.100000 392.500000 342.000000 392.500000 357.000000 C 392.500000 372.000000 392.500000 446.100000 392.500000 498.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 239.500000 304.500000 C 239.500000 326.100000 239.500000 342.000000 239.500000 357.000000 C 239.500000 372.000000 239.500000 446.100000 239.500000 498.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 86.500000 570.500000 C 86.500000 592.100000 86.500000 608.000000 86.500000 623.000000 C 86.500000 638.000000 86.500000 712.100000 86.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 239.500000 570.500000 C 239.500000 592.100000 239.500000 608.000000 239.500000 623.000000 C 239.500000 638.000000 239.500000 712.100000 239.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 392.500000 570.500000 C 392.500000 592.100000 392.500000 608.000000 392.500000 623.000000 C 392.500000 638.000000 392.500000 712.100000 392.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 86.500000 836.500000 C 86.500000 858.100000 86.500000 874.000000 86.500000 889.000000 C 86.500000 904.000000 86.500000 924.000000 86.500000 939.000000 C 86.500000 954.000000 86.500000 1031.700000 86.500000 1098.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 239.500000 836.500000 C 239.500000 858.100000 239.500000 874.000000 239.500000 889.000000 C 239.500000 904.000000 239.500000 924.000000 239.500000 939.000000 C 239.500000 954.000000 239.500000 1031.700000 239.500000 1098.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 392.500000 836.500000 C 392.500000 858.100000 392.500000 874.000000 392.500000 889.000000 C 392.500000 904.000000 392.500000 924.000000 392.500000 939.000000 C 392.500000 954.000000 392.500000 1031.700000 392.500000 1098.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><mask id="4092323312" maskUnits="userSpaceOnUse" x="-2" y="-2" width="483" height="1234">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="60.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="366.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="392.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b"><g class="shape" ><rect x="213.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="239.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1"><g class="shape" ><rect x="20.000000" y="207.000000" width="439.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="239.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l1</text></g><g id="l2c1"><g class="shape" ><rect x="20.000000" y="473.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="86.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="326.000000" y="473.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="392.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="173.000000" y="473.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="239.500000" y="460.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="20.000000" y="739.000000" width="286.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="163.000000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="326.000000" y="739.000000" width="133.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="392.500000" y="726.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c2</text></g><g id="l4"><g class="shape" ><rect x="0.000000" y="1005.000000" width="479.000000" height="225.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="239.500000" y="992.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l4</text></g><g id="l1.b"><g class="shape" ><rect x="213.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1.a"><g class="shape" ><rect x="60.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l1.c"><g class="shape" ><rect x="366.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="60.000000" y="502.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="366.000000" y="502.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="213.000000" y="502.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="540.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="60.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="213.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="366.000000" y="768.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="806.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l4.c1"><g class="shape" ><rect x="20.000000" y="1070.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="1058.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="173.000000" y="1070.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="239.500000" y="1058.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="326.000000" y="1070.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="392.500000" y="1058.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="60.000000" y="1102.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="1140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="213.000000" y="1102.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="239.500000" y="1140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="366.000000" y="1102.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="392.500000" y="1140.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 239.500000 68.000000 C 239.500000 106.000000 239.500000 180.100000 239.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(a -&gt; l1.a)[0]"><path d="M 86.500000 68.000000 C 86.500000 106.000000 86.500000 180.100000 86.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(c -&gt; l1.c)[0]"><path d="M 392.500000 68.000000 C 392.500000 106.000000 392.500000 180.100000 392.500000 232.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 86.500000 304.500000 C 86.500000 326.100000 86.500000 342.000000 86.500000 357.000000 C 86.500000 372.000000 86.500000 446.100000 86.500000 498.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 392.500000 304.500000 C 392.500000 326.100000 392.500000 342.000000 392.500000 357.000000 C 392.500000 372.000000 392.500000 446.100000 392.500000 498.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 239.500000 304.500000 C 239.500000 326.100000 239.500000 342.000000 239.500000 357.000000 C 239.500000 372.000000 239.500000 446.100000 239.500000 498.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 86.500000 570.500000 C 86.500000 592.100000 86.500000 608.000000 86.500000 623.000000 C 86.500000 638.000000 86.500000 712.100000 86.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 239.500000 570.500000 C 239.500000 592.100000 239.500000 608.000000 239.500000 623.000000 C 239.500000 638.000000 239.500000 712.100000 239.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 392.500000 570.500000 C 392.500000 592.100000 392.500000 608.000000 392.500000 623.000000 C 392.500000 638.000000 392.500000 712.100000 392.500000 764.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 86.500000 836.500000 C 86.500000 858.100000 86.500000 874.000000 86.500000 889.000000 C 86.500000 904.000000 86.500000 924.000000 86.500000 939.000000 C 86.500000 954.000000 86.500000 1031.700000 86.500000 1098.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 239.500000 836.500000 C 239.500000 858.100000 239.500000 874.000000 239.500000 889.000000 C 239.500000 904.000000 239.500000 924.000000 239.500000 939.000000 C 239.500000 954.000000 239.500000 1031.700000 239.500000 1098.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 392.500000 836.500000 C 392.500000 858.100000 392.500000 874.000000 392.500000 889.000000 C 392.500000 904.000000 392.500000 924.000000 392.500000 939.000000 C 392.500000 954.000000 392.500000 1031.700000 392.500000 1098.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4092323312)" /></g><mask id="4092323312" maskUnits="userSpaceOnUse" x="-2" y="-2" width="483" height="1234">
 <rect x="-2" y="-2" width="483" height="1234" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg b/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
index 3b4197ff3..86ec93f61 100644
--- a/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="626" height="1314" viewBox="10 10 626 1314"><rect x="10.000000" y="10.000000" width="626.000000" height="1314.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 626 1314"><svg id="d2-svg" width="626" height="1314" viewBox="10 10 626 1314"><rect x="10.000000" y="10.000000" width="626.000000" height="1314.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="135.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="208.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="234.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b"><g class="shape" ><rect x="62.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="88.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1"><g class="shape" ><rect x="12.000000" y="153.000000" width="299.000000" height="246.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="161.500000" y="186.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l1</text></g><g id="l2c1"><g class="shape" ><rect x="85.000000" y="539.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="161.500000" y="572.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="431.000000" y="539.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="507.500000" y="572.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="258.000000" y="539.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="334.500000" y="572.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="85.000000" y="795.000000" width="226.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="198.000000" y="828.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="431.000000" y="795.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="507.500000" y="828.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c2</text></g><g id="l4"><g class="shape" ><rect x="35.000000" y="1051.000000" width="599.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="334.500000" y="1084.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l4</text></g><g id="l1.b"><g class="shape" ><rect x="62.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1.a"><g class="shape" ><rect x="135.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l1.c"><g class="shape" ><rect x="208.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="234.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="135.000000" y="589.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="627.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="481.000000" y="589.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="507.500000" y="627.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="308.000000" y="589.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="334.500000" y="627.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="135.000000" y="845.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="883.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="208.000000" y="845.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="234.500000" y="883.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="481.000000" y="845.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="507.500000" y="883.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l4.c1"><g class="shape" ><rect x="85.000000" y="1106.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="1135.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="258.000000" y="1106.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="334.500000" y="1135.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="431.000000" y="1106.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="507.500000" y="1135.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="135.000000" y="1156.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="1194.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="308.000000" y="1156.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="334.500000" y="1194.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="481.000000" y="1156.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="507.500000" y="1194.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.500000 80.000000 L 88.500000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(a -&gt; l1.a)[0]"><path d="M 161.500000 80.000000 L 161.500000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(c -&gt; l1.c)[0]"><path d="M 234.500000 80.000000 L 234.500000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 161.500000 271.000000 L 161.500000 585.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 234.500000 271.000000 L 234.500000 434.000000 S 234.500000 444.000000 244.500000 444.000000 L 497.500000 444.000000 S 507.500000 444.000000 507.500000 454.000000 L 507.500000 585.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 88.500000 271.000000 L 88.500000 299.000000 S 88.500000 309.000000 98.500000 309.000000 L 161.500000 309.000000 S 171.500000 309.000000 171.500000 319.000000 L 171.500000 484.000000 S 171.500000 494.000000 181.500000 494.000000 L 324.500000 494.000000 S 334.500000 494.000000 334.500000 504.000000 L 334.500000 585.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 161.500000 657.000000 L 161.500000 841.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 334.500000 657.000000 L 334.500000 740.000000 S 334.500000 750.000000 324.500000 750.000000 L 244.500000 750.000000 S 234.500000 750.000000 234.500000 760.000000 L 234.500000 841.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 507.500000 657.000000 L 507.500000 841.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 161.500000 913.000000 L 161.500000 1152.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 234.500000 913.000000 L 234.500000 996.000000 S 234.500000 1006.000000 244.500000 1006.000000 L 324.500000 1006.000000 S 334.500000 1006.000000 334.500000 1016.000000 L 334.500000 1152.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 507.500000 913.000000 L 507.500000 1152.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><mask id="3984198567" maskUnits="userSpaceOnUse" x="10" y="10" width="626" height="1314">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="135.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="208.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="234.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="b"><g class="shape" ><rect x="62.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="88.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1"><g class="shape" ><rect x="12.000000" y="153.000000" width="299.000000" height="246.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="161.500000" y="186.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l1</text></g><g id="l2c1"><g class="shape" ><rect x="85.000000" y="539.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="161.500000" y="572.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="431.000000" y="539.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="507.500000" y="572.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="258.000000" y="539.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="334.500000" y="572.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="85.000000" y="795.000000" width="226.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="198.000000" y="828.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="431.000000" y="795.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="507.500000" y="828.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l3c2</text></g><g id="l4"><g class="shape" ><rect x="35.000000" y="1051.000000" width="599.000000" height="271.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="334.500000" y="1084.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">l4</text></g><g id="l1.b"><g class="shape" ><rect x="62.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l1.a"><g class="shape" ><rect x="135.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l1.c"><g class="shape" ><rect x="208.000000" y="203.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="234.500000" y="241.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="135.000000" y="589.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="627.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="481.000000" y="589.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="507.500000" y="627.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="308.000000" y="589.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="334.500000" y="627.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="135.000000" y="845.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="883.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="208.000000" y="845.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="234.500000" y="883.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="481.000000" y="845.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="507.500000" y="883.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="l4.c1"><g class="shape" ><rect x="85.000000" y="1106.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="161.500000" y="1135.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="258.000000" y="1106.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="334.500000" y="1135.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="431.000000" y="1106.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="507.500000" y="1135.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="135.000000" y="1156.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="1194.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="308.000000" y="1156.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="334.500000" y="1194.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="481.000000" y="1156.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="507.500000" y="1194.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.500000 80.000000 L 88.500000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(a -&gt; l1.a)[0]"><path d="M 161.500000 80.000000 L 161.500000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(c -&gt; l1.c)[0]"><path d="M 234.500000 80.000000 L 234.500000 199.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 161.500000 271.000000 L 161.500000 585.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 234.500000 271.000000 L 234.500000 434.000000 S 234.500000 444.000000 244.500000 444.000000 L 497.500000 444.000000 S 507.500000 444.000000 507.500000 454.000000 L 507.500000 585.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 88.500000 271.000000 L 88.500000 299.000000 S 88.500000 309.000000 98.500000 309.000000 L 161.500000 309.000000 S 171.500000 309.000000 171.500000 319.000000 L 171.500000 484.000000 S 171.500000 494.000000 181.500000 494.000000 L 324.500000 494.000000 S 334.500000 494.000000 334.500000 504.000000 L 334.500000 585.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 161.500000 657.000000 L 161.500000 841.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 334.500000 657.000000 L 334.500000 740.000000 S 334.500000 750.000000 324.500000 750.000000 L 244.500000 750.000000 S 234.500000 750.000000 234.500000 760.000000 L 234.500000 841.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 507.500000 657.000000 L 507.500000 841.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 161.500000 913.000000 L 161.500000 1152.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 234.500000 913.000000 L 234.500000 996.000000 S 234.500000 1006.000000 244.500000 1006.000000 L 324.500000 1006.000000 S 334.500000 1006.000000 334.500000 1016.000000 L 334.500000 1152.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 507.500000 913.000000 L 507.500000 1152.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3984198567)" /></g><mask id="3984198567" maskUnits="userSpaceOnUse" x="10" y="10" width="626" height="1314">
 <rect x="10" y="10" width="626" height="1314" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
index 7dbb32192..1ac10b4b7 100644
--- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="260" viewBox="-4 -5 75 260"><rect x="-4.000000" y="-5.000000" width="75.000000" height="260.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 75 260"><svg id="d2-svg" width="75" height="260" viewBox="-4 -5 75 260"><rect x="-4.000000" y="-5.000000" width="75.000000" height="260.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><defs>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><defs>
 	<filter id="shadow-filter" width="200%" height="200%" x="-50%" y="-50%">
 		<feGaussianBlur stdDeviation="1.7 " in="SourceGraphic"></feGaussianBlur>
 		<feFlood flood-color="#3d4574" flood-opacity="0.4" result="ShadowFeFlood" in="SourceGraphic"></feFlood>
@@ -57,4 +37,4 @@
 <path d="M0,187L15,172L69,172L69,238L54,253L0,253L0,187L54,187L54,253M54,187L69,172" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0.000000" y="187.000000" width="54.000000" height="66.000000" mask="url(#border-mask-y)" stroke="none" fill="red" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><polygon mask="url(#border-mask-y)" points="0,187 15,172 69,172 69,238 54,253 54,187" fill="#cc0000" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><path d="M0,187 L15,172 L69,172 L69,238 L54,253 L0,253 L0,187 L54,187 L54,253 M54,187 L69,172" stroke="black" fill="none" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text x="27.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="green" class="connection" stroke-width="2" /> </marker><path d="M 27.000000 69.500000 C 27.000000 114.400000 27.000000 138.700000 27.000000 183.500000" stroke="green" fill="none" class="connection" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#1459475943)" /><rect x="4.000000" y="116.000000" width="47.000000" height="21.000000" fill="lavender" /><text x="27.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">in style</text></g><mask id="1459475943" maskUnits="userSpaceOnUse" x="-4" y="-5" width="75" height="260">
 <rect x="-4" y="-5" width="75" height="260" fill="white"></rect>
 <rect x="4.000000" y="116.000000" width="47" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
index adc8e3061..fdfff8723 100644
--- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76" height="300" viewBox="7 7 76 300"><rect x="7.000000" y="7.000000" width="76.000000" height="300.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 76 300"><svg id="d2-svg" width="76" height="300" viewBox="7 7 76 300"><rect x="7.000000" y="7.000000" width="76.000000" height="300.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><defs>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><defs>
 	<filter id="shadow-filter" width="200%" height="200%" x="-50%" y="-50%">
 		<feGaussianBlur stdDeviation="1.7 " in="SourceGraphic"></feGaussianBlur>
 		<feFlood flood-color="#3d4574" flood-opacity="0.4" result="ShadowFeFlood" in="SourceGraphic"></feFlood>
@@ -57,4 +37,4 @@
 <path d="M12,239L27,224L81,224L81,290L66,305L12,305L12,239L66,239L66,305M66,239L81,224" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12.000000" y="239.000000" width="54.000000" height="66.000000" mask="url(#border-mask-y)" stroke="none" fill="red" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><polygon mask="url(#border-mask-y)" points="12,239 27,224 81,224 81,290 66,305 66,239" fill="#cc0000" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><path d="M12,239 L27,224 L81,224 L81,290 L66,305 L12,305 L12,239 L66,239 L66,305 M66,239 L81,224" stroke="black" fill="none" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text x="39.000000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="green" class="connection" stroke-width="2" /> </marker><path d="M 39.000000 81.500000 L 39.000000 235.000000" stroke="green" fill="none" class="connection" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#4198321793)" /><rect x="16.000000" y="148.000000" width="47.000000" height="21.000000" fill="lavender" /><text x="39.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">in style</text></g><mask id="4198321793" maskUnits="userSpaceOnUse" x="7" y="7" width="76" height="300">
 <rect x="7" y="7" width="76" height="300" fill="white"></rect>
 <rect x="16.000000" y="148.000000" width="47" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
index 8a2eb0742..1bb39dae1 100644
--- a/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="333" height="173" viewBox="-2 -2 333 173"><rect x="-2.000000" y="-2.000000" width="333.000000" height="173.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 333 173"><svg id="d2-svg" width="333" height="173" viewBox="-2 -2 333 173"><rect x="-2.000000" y="-2.000000" width="333.000000" height="173.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -34,27 +34,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -799,4 +779,4 @@
 </style><g id="bear"><g class="shape" ></g><text x="165.000000" y="163.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:22px">bear</text></g><g id="mama bear"><g class="shape" ></g><text x="67.500000" y="31.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:28px">mama bear</text></g><g id="papa bear"><g class="shape" ></g><text x="262.000000" y="32.000000" class="text text-underline fill-N1" style="text-anchor:middle;font-size:32px">papa bear</text></g><g id="(mama bear -&gt; bear)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.500000 41.500000 C 67.500000 80.700000 82.700000 101.000000 140.158332 138.801534" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#884401910)" /></g><g id="(papa bear -&gt; bear)[0]"><path d="M 262.000000 43.000000 C 262.000000 81.000000 246.800000 101.000000 189.341668 138.801534" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#884401910)" /></g><mask id="884401910" maskUnits="userSpaceOnUse" x="-2" y="-2" width="333" height="173">
 <rect x="-2" y="-2" width="333" height="173" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
index 9f7aae0ac..fba8119ff 100644
--- a/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="293" height="153" viewBox="10 10 293 153"><rect x="10.000000" y="10.000000" width="293.000000" height="153.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 293 153"><svg id="d2-svg" width="293" height="153" viewBox="10 10 293 153"><rect x="10.000000" y="10.000000" width="293.000000" height="153.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -34,27 +34,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -799,4 +779,4 @@
 </style><g id="bear"><g class="shape" ></g><text x="86.000000" y="155.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:22px">bear</text></g><g id="mama bear"><g class="shape" ></g><text x="79.500000" y="45.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:28px">mama bear</text></g><g id="papa bear"><g class="shape" ></g><text x="234.000000" y="44.000000" class="text text-underline fill-N1" style="text-anchor:middle;font-size:32px">papa bear</text></g><g id="(mama bear -&gt; bear)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 79.500000 55.000000 L 79.500000 129.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3815063760)" /></g><g id="(papa bear -&gt; bear)[0]"><path d="M 234.000000 55.000000 L 234.000000 83.000000 S 234.000000 93.000000 224.000000 93.000000 L 104.166667 93.000000 S 94.166667 93.000000 94.166667 103.000000 L 94.166667 129.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3815063760)" /></g><mask id="3815063760" maskUnits="userSpaceOnUse" x="10" y="10" width="293" height="153">
 <rect x="10" y="10" width="293" height="153" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
index cab1e19c0..86edf8351 100644
--- a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="252" viewBox="-2 -18 106 252"><rect x="-2.000000" y="-18.000000" width="106.000000" height="252.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 106 252"><svg id="d2-svg" width="106" height="252" viewBox="-2 -18 106 252"><rect x="-2.000000" y="-18.000000" width="106.000000" height="252.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -69,4 +49,4 @@
 </g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3331949590)" /></g><mask id="3331949590" maskUnits="userSpaceOnUse" x="-2" y="-18" width="106" height="252">
 <rect x="-2" y="-18" width="106" height="252" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
index fa6338448..5b201b507 100644
--- a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="222" viewBox="10 -6 106 222"><rect x="10.000000" y="-6.000000" width="106.000000" height="222.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 106 222"><svg id="d2-svg" width="106" height="222" viewBox="10 -6 106 222"><rect x="10.000000" y="-6.000000" width="106.000000" height="222.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .appendix-icon {
 	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
 }
@@ -20,27 +20,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(81 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(81 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3427_35082111)">
 <path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
 <path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -69,4 +49,4 @@
 </g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.000000 80.000000 L 55.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#528620646)" /></g><mask id="528620646" maskUnits="userSpaceOnUse" x="10" y="-6" width="106" height="222">
 <rect x="10" y="-6" width="106" height="222" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
index 1a2edb3e4..7010efa76 100644
--- a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="108" height="95" viewBox="-7 -22 108 95"><rect x="-7.000000" y="-22.000000" width="108.000000" height="95.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 108 95"><svg id="d2-svg" width="108" height="95" viewBox="-7 -22 108 95"><rect x="-7.000000" y="-22.000000" width="108.000000" height="95.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,29 +17,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="cube" style='opacity:0.500000'><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="0" y="-15" width="94" height="81">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="cube" style='opacity:0.500000'><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="0" y="-15" width="94" height="81">
 <rect x="0" y="-15" width="94" height="81" fill="white"></rect>
 <path d="M0,0L15,-15L94,-15L94,51L79,66L0,66L0,0L79,0L79,66M79,0L94,-15" style="stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0.000000" y="0.000000" width="79.000000" height="66.000000" mask="url(#border-mask-cube)" stroke="none" fill="orange" style="stroke-width:7;" /><polygon mask="url(#border-mask-cube)" points="0,0 15,-15 94,-15 94,51 79,66 79,0" fill="#cc8400" style="stroke-width:7;" /><path d="M0,0 L15,-15 L94,-15 L94,51 L79,66 L0,66 L0,0 L79,0 L79,66 M79,0 L94,-15" stroke="#53C0D8" fill="none" style="stroke-width:7;" /></g><text x="39.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cube</text></g><mask id="285423310" maskUnits="userSpaceOnUse" x="-7" y="-22" width="108" height="95">
 <rect x="-7" y="-22" width="108" height="95" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
index 8e6def885..9a8ea55ba 100644
--- a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="108" height="95" viewBox="5 -10 108 95"><rect x="5.000000" y="-10.000000" width="108.000000" height="95.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 108 95"><svg id="d2-svg" width="108" height="95" viewBox="5 -10 108 95"><rect x="5.000000" y="-10.000000" width="108.000000" height="95.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,29 +17,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="cube" style='opacity:0.500000'><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="12" y="-3" width="94" height="81">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="cube" style='opacity:0.500000'><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="12" y="-3" width="94" height="81">
 <rect x="12" y="-3" width="94" height="81" fill="white"></rect>
 <path d="M12,12L27,-3L106,-3L106,63L91,78L12,78L12,12L91,12L91,78M91,12L106,-3" style="stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12.000000" y="12.000000" width="79.000000" height="66.000000" mask="url(#border-mask-cube)" stroke="none" fill="orange" style="stroke-width:7;" /><polygon mask="url(#border-mask-cube)" points="12,12 27,-3 106,-3 106,63 91,78 91,12" fill="#cc8400" style="stroke-width:7;" /><path d="M12,12 L27,-3 L106,-3 L106,63 L91,78 L12,78 L12,12 L91,12 L91,78 M91,12 L106,-3" stroke="#53C0D8" fill="none" style="stroke-width:7;" /></g><text x="51.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cube</text></g><mask id="487888566" maskUnits="userSpaceOnUse" x="5" y="-10" width="108" height="95">
 <rect x="5" y="-10" width="108" height="95" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
index 7cfb3aa3b..c5bfaf21a 100644
--- a/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426" height="2552" viewBox="-2 -2 426 2552"><rect x="-2.000000" y="-2.000000" width="426.000000" height="2552.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 426 2552"><svg id="d2-svg" width="426" height="2552" viewBox="-2 -2 426 2552"><rect x="-2.000000" y="-2.000000" width="426.000000" height="2552.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,29 +38,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="512.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="128.000000" class="class_header fill-N1" /><text x="10.000000" y="165.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="165.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="165.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="229.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="229.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="229.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="293.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="293.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="293.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="320.000000" y2="320.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="357.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="357.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="357.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="421.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="421.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="421.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="485.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="485.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="485.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="107.000000" y="612.000000" width="208.000000" height="512.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="107.000000" y="612.000000" width="208.000000" height="85.333333" class="class_header fill-N1" /><text x="117.000000" y="745.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="218.000000" y="745.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="295.000000" y="745.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="782.666667" y2="782.666667" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="830.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="218.000000" y="830.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="830.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="868.000000" y2="868.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="915.666667" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="218.000000" y="915.666667" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="915.666667" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="953.333333" y2="953.333333" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="1001.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="218.000000" y="1001.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="1001.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="1038.666667" y2="1038.666667" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="1086.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="218.000000" y="1086.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="295.000000" y="1086.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="1124.000000" y2="1124.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(116.000000 1224.000000)"><rect width="191.000000" height="512.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="422.000000" height="512.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="422.000000" height="128.000000" class="class_header fill-N1" /><text x="10.000000" y="165.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="165.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="402.000000" y="165.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="229.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="229.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="402.000000" y="229.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="293.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="293.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="402.000000" y="293.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="422.000000" y1="320.000000" y2="320.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="357.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="357.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="402.000000" y="357.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="421.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="421.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="402.000000" y="421.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="485.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="485.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="402.000000" y="485.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="107.000000" y="612.000000" width="208.000000" height="512.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="107.000000" y="612.000000" width="208.000000" height="85.333333" class="class_header fill-N1" /><text x="117.000000" y="745.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="218.000000" y="745.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="295.000000" y="745.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="782.666667" y2="782.666667" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="830.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="218.000000" y="830.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="830.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="868.000000" y2="868.000000" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="915.666667" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="218.000000" y="915.666667" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="915.666667" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="953.333333" y2="953.333333" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="1001.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="218.000000" y="1001.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="295.000000" y="1001.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="1038.666667" y2="1038.666667" class=" stroke-N1" style="stroke-width:2" /><text x="117.000000" y="1086.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="218.000000" y="1086.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="295.000000" y="1086.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="107.000000" x2="315.000000" y1="1124.000000" y2="1124.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(116.000000 1224.000000)"><rect width="191.000000" height="512.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="package"><g class="shape" ><path d="M 161 1836 L 211 1836 L 211 1891 L 261 1891 L 261 2348 L 161 2348 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g></g><g id="no height"><g class="shape" ><rect x="161.000000" y="2448.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 211.000000 514.000000 C 211.000000 552.000000 211.000000 572.000000 211.000000 608.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#383519883)" /></g><g id="(users -&gt; code)[0]"><path d="M 211.000000 1126.000000 C 211.000000 1164.000000 211.000000 1184.000000 211.000000 1220.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#383519883)" /></g><g id="(code -&gt; package)[0]"><path d="M 211.000000 1738.000000 C 211.000000 1776.000000 211.000000 1796.000000 211.000000 1832.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#383519883)" /></g><g id="(package -&gt; no height)[0]"><path d="M 211.000000 2350.000000 C 211.000000 2388.000000 211.000000 2408.000000 211.000000 2444.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#383519883)" /></g><mask id="383519883" maskUnits="userSpaceOnUse" x="-2" y="-2" width="426" height="2552">
 <rect x="-2" y="-2" width="426" height="2552" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
index c8457237d..70af3274c 100644
--- a/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="426" height="2432" viewBox="10 10 426 2432"><rect x="10.000000" y="10.000000" width="426.000000" height="2432.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 426 2432"><svg id="d2-svg" width="426" height="2432" viewBox="10 10 426 2432"><rect x="10.000000" y="10.000000" width="426.000000" height="2432.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,29 +38,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="422.000000" height="512.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="422.000000" height="128.000000" class="class_header fill-N1" /><text x="22.000000" y="177.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="177.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="414.000000" y="177.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="241.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="241.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="414.000000" y="241.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="305.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="305.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="414.000000" y="305.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="434.000000" y1="332.000000" y2="332.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="369.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="369.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="414.000000" y="369.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="433.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="433.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="414.000000" y="433.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="497.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="497.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="414.000000" y="497.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="119.000000" y="594.000000" width="208.000000" height="512.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="119.000000" y="594.000000" width="208.000000" height="85.333333" class="class_header fill-N1" /><text x="129.000000" y="727.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="230.000000" y="727.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="307.000000" y="727.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="764.666667" y2="764.666667" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="812.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="230.000000" y="812.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="812.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="850.000000" y2="850.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="897.666667" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="230.000000" y="897.666667" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="897.666667" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="935.333333" y2="935.333333" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="983.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="230.000000" y="983.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="983.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="1020.666667" y2="1020.666667" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="1068.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="230.000000" y="1068.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="307.000000" y="1068.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="1106.000000" y2="1106.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(127.000000 1176.000000)"><rect width="191.000000" height="512.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="422.000000" height="512.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="422.000000" height="128.000000" class="class_header fill-N1" /><text x="22.000000" y="177.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="177.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="414.000000" y="177.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="241.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="241.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="414.000000" y="241.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="305.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="305.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="414.000000" y="305.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="434.000000" y1="332.000000" y2="332.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="369.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="369.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="414.000000" y="369.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="433.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="433.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="414.000000" y="433.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="497.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="497.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="414.000000" y="497.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="119.000000" y="594.000000" width="208.000000" height="512.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="119.000000" y="594.000000" width="208.000000" height="85.333333" class="class_header fill-N1" /><text x="129.000000" y="727.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="230.000000" y="727.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="307.000000" y="727.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="764.666667" y2="764.666667" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="812.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="230.000000" y="812.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="812.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="850.000000" y2="850.000000" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="897.666667" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="230.000000" y="897.666667" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="897.666667" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="935.333333" y2="935.333333" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="983.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="230.000000" y="983.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="307.000000" y="983.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="1020.666667" y2="1020.666667" class=" stroke-N1" style="stroke-width:2" /><text x="129.000000" y="1068.333333" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="230.000000" y="1068.333333" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="307.000000" y="1068.333333" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="119.000000" x2="327.000000" y1="1106.000000" y2="1106.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(127.000000 1176.000000)"><rect width="191.000000" height="512.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="package"><g class="shape" ><path d="M 173 1758 L 223 1758 L 223 1813 L 273 1813 L 273 2270 L 173 2270 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g></g><g id="no height"><g class="shape" ><rect x="173.000000" y="2340.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 223.000000 526.000000 L 223.000000 590.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#193828382)" /></g><g id="(users -&gt; code)[0]"><path d="M 223.000000 1108.000000 L 223.000000 1172.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#193828382)" /></g><g id="(code -&gt; package)[0]"><path d="M 223.000000 1690.000000 L 223.000000 1754.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#193828382)" /></g><g id="(package -&gt; no height)[0]"><path d="M 223.000000 2272.000000 L 223.000000 2336.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#193828382)" /></g><mask id="193828382" maskUnits="userSpaceOnUse" x="10" y="10" width="426" height="2432">
 <rect x="10" y="10" width="426" height="2432" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
index b80d0a888..4d5e7ad4d 100644
--- a/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="516" height="1223" viewBox="-2 -2 516 1223"><rect x="-2.000000" y="-2.000000" width="516.000000" height="1223.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 516 1223"><svg id="d2-svg" width="516" height="1223" viewBox="-2 -2 516 1223"><rect x="-2.000000" y="-2.000000" width="516.000000" height="1223.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,29 +38,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="512.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="512.000000" height="92.000000" class="class_header fill-N1" /><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="492.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="492.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="492.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="512.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="492.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="492.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="492.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="0.000000" y="468.000000" width="512.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="468.000000" width="512.000000" height="31.000000" class="class_header fill-N1" /><text x="10.000000" y="519.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="111.000000" y="519.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="492.000000" y="519.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="530.000000" y2="530.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="550.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="111.000000" y="550.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="492.000000" y="550.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="561.000000" y2="561.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="581.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="111.000000" y="581.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="492.000000" y="581.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="592.000000" y2="592.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="612.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="111.000000" y="612.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="492.000000" y="612.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="623.000000" y2="623.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="643.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="111.000000" y="643.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="492.000000" y="643.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="654.000000" y2="654.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(0.000000 754.000000)"><rect width="512.000000" height="65.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="0.000000" y="0.000000" width="512.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="512.000000" height="92.000000" class="class_header fill-N1" /><text x="10.000000" y="120.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="120.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="492.000000" y="120.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="166.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="166.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="492.000000" y="166.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="10.000000" y="212.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="30.000000" y="212.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="492.000000" y="212.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="512.000000" y1="230.000000" y2="230.000000" class=" stroke-N1" style="stroke-width:1" /><text x="10.000000" y="258.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="258.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="492.000000" y="258.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="10.000000" y="304.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="304.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="492.000000" y="304.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="10.000000" y="350.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="30.000000" y="350.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="492.000000" y="350.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="0.000000" y="468.000000" width="512.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="468.000000" width="512.000000" height="31.000000" class="class_header fill-N1" /><text x="10.000000" y="519.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="111.000000" y="519.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="492.000000" y="519.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="530.000000" y2="530.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="550.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="111.000000" y="550.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="492.000000" y="550.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="561.000000" y2="561.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="581.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="111.000000" y="581.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="492.000000" y="581.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="592.000000" y2="592.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="612.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="111.000000" y="612.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="492.000000" y="612.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="623.000000" y2="623.000000" class=" stroke-N1" style="stroke-width:2" /><text x="10.000000" y="643.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="111.000000" y="643.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="492.000000" y="643.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="0.000000" x2="512.000000" y1="654.000000" y2="654.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(0.000000 754.000000)"><rect width="512.000000" height="65.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="package"><g class="shape" ><path d="M 0 919 L 150 919 L 150 939 L 512 939 L 512 1019 L 0 1019 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g></g><g id="no width"><g class="shape" ><rect x="206.000000" y="1119.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 256.000000 370.000000 C 256.000000 408.000000 256.000000 428.000000 256.000000 464.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2713559628)" /></g><g id="(users -&gt; code)[0]"><path d="M 256.000000 656.000000 C 256.000000 694.000000 256.000000 714.000000 256.000000 750.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2713559628)" /></g><g id="(code -&gt; package)[0]"><path d="M 256.000000 821.000000 C 256.000000 859.000000 256.000000 883.000000 256.000000 935.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2713559628)" /></g><g id="(package -&gt; no width)[0]"><path d="M 256.000000 1021.000000 C 256.000000 1059.000000 256.000000 1079.000000 256.000000 1115.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2713559628)" /></g><mask id="2713559628" maskUnits="userSpaceOnUse" x="-2" y="-2" width="516" height="1223">
 <rect x="-2" y="-2" width="516" height="1223" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
index 7096c391e..54f397562 100644
--- a/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="516" height="1103" viewBox="10 10 516 1103"><rect x="10.000000" y="10.000000" width="516.000000" height="1103.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 516 1103"><svg id="d2-svg" width="516" height="1103" viewBox="10 10 516 1103"><rect x="10.000000" y="10.000000" width="516.000000" height="1103.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -38,29 +38,9 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="512.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="512.000000" height="92.000000" class="class_header fill-N1" /><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="504.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="504.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="224.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="224.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="504.000000" y="224.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="524.000000" y1="242.000000" y2="242.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="270.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="270.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="504.000000" y="270.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="316.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="316.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="504.000000" y="316.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="362.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="362.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="504.000000" y="362.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="12.000000" y="450.000000" width="512.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="450.000000" width="512.000000" height="31.000000" class="class_header fill-N1" /><text x="22.000000" y="501.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="123.000000" y="501.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="504.000000" y="501.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="512.000000" y2="512.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="532.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="123.000000" y="532.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="504.000000" y="532.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="543.000000" y2="543.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="563.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="123.000000" y="563.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="504.000000" y="563.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="574.000000" y2="574.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="594.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="123.000000" y="594.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="504.000000" y="594.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="605.000000" y2="605.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="625.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="123.000000" y="625.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="504.000000" y="625.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="636.000000" y2="636.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(12.000000 706.000000)"><rect width="512.000000" height="65.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="class"><g class="shape" ><rect x="12.000000" y="12.000000" width="512.000000" height="368.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="512.000000" height="92.000000" class="class_header fill-N1" /><text x="22.000000" y="132.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="132.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">num</text><text x="504.000000" y="132.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="178.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="178.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">timeout</text><text x="504.000000" y="178.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">int</text><text x="22.000000" y="224.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">-</text><text x="42.000000" y="224.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">pid</text><text x="504.000000" y="224.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="524.000000" y1="242.000000" y2="242.000000" class=" stroke-N1" style="stroke-width:1" /><text x="22.000000" y="270.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="270.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getStatus()</text><text x="504.000000" y="270.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Enum</text><text x="22.000000" y="316.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="316.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">getJobs()</text><text x="504.000000" y="316.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">Job[]</text><text x="22.000000" y="362.000000" class="text-mono fill-B2" style="text-anchor:start;font-size:20px">+</text><text x="42.000000" y="362.000000" class="text-mono fill-N1" style="text-anchor:start;font-size:20px">setTimeout(seconds int)</text><text x="504.000000" y="362.000000" class="text-mono fill-AA2" style="text-anchor:end;font-size:20px">void</text></g></g><g id="users"><g class="shape" ><rect x="12.000000" y="450.000000" width="512.000000" height="186.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="450.000000" width="512.000000" height="31.000000" class="class_header fill-N1" /><text x="22.000000" y="501.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">id</text><text x="123.000000" y="501.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">int</text><text x="504.000000" y="501.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="512.000000" y2="512.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="532.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">name</text><text x="123.000000" y="532.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="504.000000" y="532.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="543.000000" y2="543.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="563.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">email</text><text x="123.000000" y="563.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="504.000000" y="563.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="574.000000" y2="574.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="594.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">password</text><text x="123.000000" y="594.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">string</text><text x="504.000000" y="594.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="605.000000" y2="605.000000" class=" stroke-N1" style="stroke-width:2" /><text x="22.000000" y="625.500000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="123.000000" y="625.500000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="504.000000" y="625.500000" class="text fill-AA2" style="text-anchor:end;font-size:20px;letter-spacing:2px" /><line x1="12.000000" x2="524.000000" y1="636.000000" y2="636.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="code"><g class="shape" ></g><g transform="translate(12.000000 706.000000)"><rect width="512.000000" height="65.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">a&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;<tspan fill="#009999">5</tspan>
 </text><text class="text-mono" x="0" y="2.000000em" xml:space="preserve">b&#160;<tspan fill="#000000" class="text-mono-bold">:=</tspan>&#160;a&#160;<tspan fill="#000000" class="text-mono-bold">+</tspan>&#160;<tspan fill="#009999">7</tspan>
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="package"><g class="shape" ><path d="M 12 841 L 162 841 L 162 861 L 524 861 L 524 941 L 12 941 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g></g><g id="no width"><g class="shape" ><rect x="218.000000" y="1011.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><g id="(class -&gt; users)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 268.000000 382.000000 L 268.000000 446.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3938484332)" /></g><g id="(users -&gt; code)[0]"><path d="M 268.000000 638.000000 L 268.000000 702.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3938484332)" /></g><g id="(code -&gt; package)[0]"><path d="M 268.000000 773.000000 L 268.000000 857.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3938484332)" /></g><g id="(package -&gt; no width)[0]"><path d="M 268.000000 943.000000 L 268.000000 1007.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3938484332)" /></g><mask id="3938484332" maskUnits="userSpaceOnUse" x="10" y="10" width="516" height="1103">
 <rect x="10" y="10" width="516" height="1103" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg b/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
index cba8e5794..5f26c6b6a 100644
--- a/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1967" height="1896" viewBox="-2 -2 1967 1896"><rect x="-2.000000" y="-2.000000" width="1967.000000" height="1896.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1967 1896"><svg id="d2-svg" width="1967" height="1896" viewBox="-2 -2 1967 1896"><rect x="-2.000000" y="-2.000000" width="1967.000000" height="1896.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="AL"><g class="shape" ><rect x="1.000000" y="166.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="33.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AL</text></g><g id="FL"><g class="shape" ><rect x="3.000000" y="332.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="33.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">FL</text></g><g id="GA"><g class="shape" ><rect x="0.000000" y="498.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="33.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">GA</text></g><g id="MS"><g class="shape" ><rect x="1018.000000" y="664.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1051.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MS</text></g><g id="TN"><g class="shape" ><rect x="945.000000" y="1494.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="977.000000" y="1532.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TN</text></g><g id="AK"><g class="shape" ><rect x="1570.000000" y="0.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1603.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AK</text></g><g id="AZ"><g class="shape" ><rect x="261.000000" y="664.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="293.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AZ</text></g><g id="CA"><g class="shape" ><rect x="261.000000" y="830.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="293.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CA</text></g><g id="NV"><g class="shape" ><rect x="386.000000" y="996.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="418.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NV</text></g><g id="NM"><g class="shape" ><rect x="845.000000" y="1162.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NM</text></g><g id="UT"><g class="shape" ><rect x="469.000000" y="1494.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="501.000000" y="1532.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">UT</text></g><g id="AR"><g class="shape" ><rect x="1028.000000" y="332.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1061.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AR</text></g><g id="LA"><g class="shape" ><rect x="1030.000000" y="498.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1061.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">LA</text></g><g id="MO"><g class="shape" ><rect x="1458.000000" y="830.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1492.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MO</text></g><g id="OK"><g class="shape" ><rect x="1297.000000" y="1328.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1330.000000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OK</text></g><g id="TX"><g class="shape" ><rect x="1143.000000" y="1660.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1174.500000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TX</text></g><g id="OR"><g class="shape" ><rect x="234.000000" y="1328.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="267.000000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OR</text></g><g id="CO"><g class="shape" ><rect x="1294.000000" y="498.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1327.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CO</text></g><g id="KS"><g class="shape" ><rect x="1295.000000" y="664.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1326.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KS</text></g><g id="NE"><g class="shape" ><rect x="1386.000000" y="996.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1417.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NE</text></g><g id="WY"><g class="shape" ><rect x="586.000000" y="1826.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="620.000000" y="1864.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WY</text></g><g id="CT"><g class="shape" ><rect x="386.000000" y="830.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="418.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CT</text></g><g id="MA"><g class="shape" ><rect x="207.000000" y="996.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="240.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MA</text></g><g id="NY"><g class="shape" ><rect x="360.000000" y="1328.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="392.000000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NY</text></g><g id="RI"><g class="shape" ><rect x="479.000000" y="1660.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="508.000000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">RI</text></g><g id="DE"><g class="shape" ><rect x="755.000000" y="830.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="786.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">DE</text></g><g id="MD"><g class="shape" ><rect x="753.000000" y="996.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="786.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MD</text></g><g id="NJ"><g class="shape" ><rect x="683.000000" y="1162.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="714.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NJ</text></g><g id="PA"><g class="shape" ><rect x="718.000000" y="1494.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="750.000000" y="1532.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">PA</text></g><g id="NC"><g class="shape" ><rect x="11.000000" y="1162.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NC</text></g><g id="SC"><g class="shape" ><rect x="12.000000" y="1328.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SC</text></g><g id="HI"><g class="shape" ><rect x="1696.000000" y="0.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1725.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">HI</text></g><g id="ID"><g class="shape" ><rect x="1144.000000" y="664.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1173.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ID</text></g><g id="MT"><g class="shape" ><rect x="1141.000000" y="830.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1174.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MT</text></g><g id="WA"><g class="shape" ><rect x="285.000000" y="1660.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.500000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WA</text></g><g id="IL"><g class="shape" ><rect x="1815.000000" y="0.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1843.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IL</text></g><g id="IN"><g class="shape" ><rect x="1814.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1843.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IN</text></g><g id="IA"><g class="shape" ><rect x="1779.000000" y="332.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1808.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IA</text></g><g id="MI"><g class="shape" ><rect x="1709.000000" y="498.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1739.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MI</text></g><g id="KY"><g class="shape" ><rect x="1769.000000" y="664.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1800.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KY</text></g><g id="WI"><g class="shape" ><rect x="1423.000000" y="1328.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1454.500000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WI</text></g><g id="OH"><g class="shape" ><rect x="1760.000000" y="1162.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1793.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OH</text></g><g id="MN"><g class="shape" ><rect x="1892.000000" y="664.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1925.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MN</text></g><g id="SD"><g class="shape" ><rect x="1540.000000" y="1162.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1572.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SD</text></g><g id="VA"><g class="shape" ><rect x="883.000000" y="1660.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="915.500000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VA</text></g><g id="WV"><g class="shape" ><rect x="882.000000" y="1826.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="916.500000" y="1864.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WV</text></g><g id="ME"><g class="shape" ><rect x="880.000000" y="996.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="912.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ME</text></g><g id="NH"><g class="shape" ><rect x="521.000000" y="1162.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="553.500000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NH</text></g><g id="VT"><g class="shape" ><rect x="388.000000" y="1826.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="420.000000" y="1864.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VT</text></g><g id="ND"><g class="shape" ><rect x="1532.000000" y="996.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1564.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ND</text></g><g id="(AL -- FL)[0]"><path d="M 33.000000 234.000000 C 33.000000 272.000000 33.000000 292.000000 33.000000 330.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(FL -- GA)[0]"><path d="M 28.784863 399.985640 C 24.204819 438.000000 24.200000 458.000000 28.761710 496.014246" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(GA -- MS)[0]"><path d="M 28.784863 565.985640 C 24.204819 604.000000 222.000000 630.000000 1016.006433 693.839713" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- TN)[0]"><path d="M 1023.764252 731.565411 C 993.201807 770.000000 985.250000 796.600000 985.250000 821.500000 C 985.250000 846.400000 985.250000 879.600000 985.250000 904.500000 C 985.250000 929.400000 985.250000 962.600000 985.250000 987.500000 C 985.250000 1012.400000 985.250000 1045.600000 985.250000 1070.500000 C 985.250000 1095.400000 985.250000 1128.600000 985.250000 1153.500000 C 985.250000 1178.400000 985.250000 1211.600000 985.250000 1236.500000 C 985.250000 1261.400000 985.250000 1294.600000 985.250000 1319.500000 C 985.250000 1344.400000 984.250000 1454.000000 980.449007 1492.009926" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(AZ -- CA)[0]"><path d="M 293.500000 732.000000 C 293.500000 770.000000 293.500000 790.000000 293.500000 828.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CA -- NV)[0]"><path d="M 259.147141 876.959791 C 123.600000 932.041371 148.650000 961.000000 384.310873 1020.510321" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- NM)[0]"><path d="M 384.676718 1055.743096 C 327.650000 1100.501655 419.400000 1127.600000 843.021156 1189.709869" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NM -- UT)[0]"><path d="M 862.682844 1229.830793 C 845.897590 1268.000000 841.500000 1294.600000 841.500000 1319.500000 C 841.500000 1344.400000 779.700000 1459.000000 534.443569 1518.528260" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(AR -- LA)[0]"><path d="M 1061.250000 400.000000 C 1061.250000 438.000000 1061.250000 458.000000 1061.250000 496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(LA -- MS)[0]"><path d="M 1039.307371 565.690252 C 1015.075301 604.000000 1013.950000 624.000000 1033.827295 662.225566" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- MO)[0]"><path d="M 1033.337227 731.778015 C 1013.650602 770.000000 1098.300000 795.431470 1455.528892 856.818629" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- OK)[0]"><path d="M 1455.631433 876.687775 C 1310.700000 931.994943 1274.000000 962.600000 1274.000000 987.500000 C 1274.000000 1012.400000 1274.000000 1045.600000 1274.000000 1070.500000 C 1274.000000 1095.400000 1274.000000 1128.600000 1274.000000 1153.500000 C 1274.000000 1178.400000 1280.800000 1288.000000 1306.875380 1326.346147" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TN)[0]"><path d="M 1294.966633 1378.657612 C 1192.350000 1430.750459 1134.850000 1457.789418 1011.081201 1512.142912" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- TX)[0]"><path d="M 943.785436 1558.121107 C 899.450000 1599.351821 939.000000 1624.800000 1141.079243 1683.442604" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CA -- NV)[1]"><path d="M 327.464564 894.586093 C 371.400000 935.444818 387.150000 956.000000 403.944523 994.169370" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- OR)[0]"><path d="M 384.812931 1061.848708 C 343.650000 1101.691545 333.000000 1128.600000 333.000000 1153.500000 C 333.000000 1178.400000 325.000000 1288.000000 294.249390 1326.438262" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CO -- KS)[0]"><path d="M 1326.500000 566.000000 C 1326.500000 604.000000 1326.500000 624.000000 1326.500000 662.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KS -- NE)[0]"><path d="M 1296.358975 731.506277 C 1262.734940 770.000000 1254.000000 796.600000 1254.000000 821.500000 C 1254.000000 846.400000 1280.400000 959.400000 1384.216583 1012.094781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- NM)[0]"><path d="M 1398.594784 1063.751540 C 1377.512048 1102.000000 1279.800000 1127.400000 912.972672 1188.670508" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NM -- OK)[0]"><path d="M 878.000000 1230.000000 C 878.000000 1268.000000 961.750000 1293.387382 1294.782925 1354.575502" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- UT)[0]"><path d="M 1295.018735 1381.088467 C 1208.350000 1431.217422 1055.650000 1459.800000 535.235523 1522.759791" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(UT -- WY)[0]"><path d="M 475.004991 1561.604628 C 446.439759 1600.000000 439.000000 1626.600000 439.000000 1651.500000 C 439.000000 1676.400000 468.300000 1789.473130 583.682904 1842.530089" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CT -- MA)[0]"><path d="M 418.000000 898.000000 C 418.000000 936.000000 389.200000 959.400000 275.813330 1012.156298" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MA -- NY)[0]"><path d="M 213.947525 1063.597687 C 185.030120 1102.000000 177.500000 1128.600000 177.500000 1153.500000 C 177.500000 1178.400000 213.950000 1292.120653 357.885053 1347.880791" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- RI)[0]"><path d="M 369.807371 1395.690252 C 345.575301 1434.000000 339.250000 1460.600000 339.250000 1485.500000 C 339.250000 1510.400000 367.250000 1623.800000 477.456049 1678.115839" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(DE -- MD)[0]"><path d="M 786.750000 898.000000 C 786.750000 936.000000 786.750000 956.000000 786.750000 994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MD -- NJ)[0]"><path d="M 756.608975 1063.506277 C 722.984940 1102.000000 714.250000 1122.000000 714.250000 1160.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NJ -- PA)[0]"><path d="M 703.524083 1229.911807 C 691.822289 1268.000000 688.750000 1294.600000 688.750000 1319.500000 C 688.750000 1344.400000 696.150000 1454.000000 724.560314 1492.392316" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(FL -- GA)[1]"><path d="M 66.468241 370.843348 C 408.300000 432.497669 408.650000 463.400000 68.218399 524.645872" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(GA -- NC)[0]"><path d="M 37.215137 565.985640 C 41.795181 604.000000 43.000000 630.600000 43.000000 655.500000 C 43.000000 680.400000 43.000000 713.600000 43.000000 738.500000 C 43.000000 763.400000 43.000000 796.600000 43.000000 821.500000 C 43.000000 846.400000 43.000000 879.600000 43.000000 904.500000 C 43.000000 929.400000 43.000000 962.600000 43.000000 987.500000 C 43.000000 1012.400000 43.000000 1122.000000 43.000000 1160.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NC -- SC)[0]"><path d="M 38.784863 1229.985640 C 34.204819 1268.000000 34.200000 1288.000000 38.761710 1326.014246" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SC -- TN)[0]"><path d="M 38.784863 1395.985640 C 34.204819 1434.000000 215.400000 1460.000000 943.007651 1523.825233" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ID -- MT)[0]"><path d="M 1173.750000 732.000000 C 1173.750000 770.000000 1173.750000 790.000000 1173.750000 828.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MT -- NV)[0]"><path d="M 1149.544160 897.639391 C 1122.737952 936.000000 982.850000 961.825968 453.235969 1024.893350" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- OR)[1]"><path d="M 404.994838 1063.860411 C 389.945783 1102.000000 386.000000 1128.600000 386.000000 1153.500000 C 386.000000 1178.400000 368.800000 1290.000000 301.640254 1336.855637" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OR -- UT)[0]"><path d="M 231.971168 1378.873951 C 130.950000 1430.791950 177.950000 1459.256890 466.792638 1519.873676" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(UT -- WA)[0]"><path d="M 500.750000 1562.000000 C 500.750000 1600.000000 471.350000 1623.400000 355.569884 1676.170529" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(WA -- WY)[0]"><path d="M 319.250000 1728.000000 C 319.250000 1766.000000 372.500000 1790.720233 583.572299 1849.068279" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IL -- IN)[0]"><path d="M 1843.250000 68.000000 C 1843.250000 106.000000 1843.250000 126.000000 1843.250000 164.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IN -- IA)[0]"><path d="M 1828.661349 233.844836 C 1812.686747 272.000000 1808.500000 292.000000 1808.500000 330.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IA -- MI)[0]"><path d="M 1779.787720 399.537960 C 1747.813253 438.000000 1739.500000 458.000000 1739.500000 496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MI -- KY)[0]"><path d="M 1707.162325 544.888885 C 1578.800000 600.019922 1590.700000 628.539310 1766.599105 686.074781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KY -- MO)[0]"><path d="M 1778.882119 731.708596 C 1755.584337 770.000000 1704.700000 794.400000 1527.404057 851.387982" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- WI)[0]"><path d="M 1455.763514 883.420849 C 1368.500000 933.285714 1346.250000 962.600000 1346.250000 987.500000 C 1346.250000 1012.400000 1346.250000 1045.600000 1346.250000 1070.500000 C 1346.250000 1095.400000 1346.250000 1128.600000 1346.250000 1153.500000 C 1346.250000 1178.400000 1361.650000 1289.800000 1421.662455 1335.783570" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IN -- KY)[0]"><path d="M 1874.402526 220.237451 C 1946.550000 269.422177 1965.000000 298.600000 1965.000000 323.500000 C 1965.000000 348.400000 1965.000000 381.600000 1965.000000 406.500000 C 1965.000000 431.400000 1965.000000 464.600000 1965.000000 489.500000 C 1965.000000 514.400000 1938.400000 627.400000 1833.786160 680.100205" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KY -- MI)[0]"><path d="M 1819.982274 662.266413 C 1841.996988 624.000000 1832.150000 602.000000 1771.335248 555.219422" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MI -- OH)[0]"><path d="M 1724.494969 565.836856 C 1708.057229 604.000000 1703.750000 630.600000 1703.750000 655.500000 C 1703.750000 680.400000 1703.750000 713.600000 1703.750000 738.500000 C 1703.750000 763.400000 1703.750000 796.600000 1703.750000 821.500000 C 1703.750000 846.400000 1703.750000 879.600000 1703.750000 904.500000 C 1703.750000 929.400000 1703.750000 962.600000 1703.750000 987.500000 C 1703.750000 1012.400000 1714.950000 1122.444944 1758.287343 1162.860668" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IA -- MN)[0]"><path d="M 1839.605586 388.103030 C 1903.800000 435.782103 1920.250000 464.600000 1920.250000 489.500000 C 1920.250000 514.400000 1920.850000 624.000000 1923.130215 662.003590" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MN -- MO)[0]"><path d="M 1898.947525 731.597687 C 1870.030120 770.000000 1795.100000 795.000000 1527.452238 854.565526" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- NE)[0]"><path d="M 1455.964190 892.642937 C 1405.100000 935.072362 1395.200000 956.000000 1407.390449 994.095152" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- SD)[0]"><path d="M 1406.919431 1063.910184 C 1395.102410 1102.000000 1421.550000 1125.644784 1537.934229 1179.385485" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WI)[0]"><path d="M 1538.164206 1220.811304 C 1478.950000 1266.318519 1462.750000 1288.000000 1458.949007 1326.009926" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KS -- MO)[0]"><path d="M 1359.479513 726.997804 C 1405.800000 769.130411 1426.550000 790.000000 1460.428744 828.498573" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- NE)[1]"><path d="M 1501.911879 897.916603 C 1513.268072 936.000000 1502.850000 957.291371 1450.779420 1001.168103" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- OK)[0]"><path d="M 1417.750000 1064.000000 C 1417.750000 1102.000000 1417.750000 1128.600000 1417.750000 1153.500000 C 1417.750000 1178.400000 1406.750000 1288.400000 1364.203293 1328.625977" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KY -- MO)[1]"><path d="M 1817.809135 731.780193 C 1837.379518 770.000000 1779.100000 795.000000 1527.446269 854.539526" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- OH)[0]"><path d="M 1528.253921 882.435756 C 1620.700000 933.094926 1644.250000 962.600000 1644.250000 987.500000 C 1644.250000 1012.400000 1667.350000 1124.911111 1758.004187 1175.579781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OH -- TN)[0]"><path d="M 1758.034468 1215.804254 C 1675.350000 1265.355235 1654.250000 1294.600000 1654.250000 1319.500000 C 1654.250000 1344.400000 1525.250000 1459.815362 1011.235137 1522.833432" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- VA)[0]"><path d="M 948.435589 1561.535684 C 916.343373 1600.000000 908.800000 1620.000000 911.840510 1658.006369" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(VA -- WV)[0]"><path d="M 881.215777 1721.461869 C 829.350000 1764.835768 829.150000 1786.887282 880.209472 1829.160959" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(LA -- MS)[1]"><path d="M 1094.180948 563.156102 C 1135.550000 603.551765 1133.850000 624.833684 1085.756135 666.852535" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- TX)[0]"><path d="M 1050.406640 731.999420 C 1049.490964 770.000000 1049.250000 796.600000 1049.250000 821.500000 C 1049.250000 846.400000 1049.250000 879.600000 1049.250000 904.500000 C 1049.250000 929.400000 1049.250000 962.600000 1049.250000 987.500000 C 1049.250000 1012.400000 1049.250000 1045.600000 1049.250000 1070.500000 C 1049.250000 1095.400000 1049.250000 1128.600000 1049.250000 1153.500000 C 1049.250000 1178.400000 1049.250000 1211.600000 1049.250000 1236.500000 C 1049.250000 1261.400000 1049.250000 1294.600000 1049.250000 1319.500000 C 1049.250000 1344.400000 1049.250000 1377.600000 1049.250000 1402.500000 C 1049.250000 1427.400000 1049.250000 1460.600000 1049.250000 1485.500000 C 1049.250000 1510.400000 1068.050000 1622.400000 1141.580455 1670.898811" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ME -- NH)[0]"><path d="M 912.750000 1064.000000 C 912.750000 1102.000000 847.350000 1127.000000 587.699383 1186.552894" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MD -- PA)[0]"><path d="M 794.435523 1063.953338 C 802.801205 1102.000000 805.000000 1128.600000 805.000000 1153.500000 C 805.000000 1178.400000 805.000000 1211.600000 805.000000 1236.500000 C 805.000000 1261.400000 805.000000 1294.600000 805.000000 1319.500000 C 805.000000 1344.400000 798.400000 1454.000000 773.101684 1492.330781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- VA)[0]"><path d="M 716.168322 1552.988618 C 657.550000 1598.352914 690.550000 1624.621998 880.836631 1682.527737" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(VA -- WV)[1]"><path d="M 915.250000 1728.000000 C 915.250000 1766.000000 915.450000 1786.000000 916.210008 1824.000400" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MA -- NH)[0]"><path d="M 262.148667 1063.685648 C 286.614458 1102.000000 338.600000 1126.600000 519.095249 1184.390145" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NH -- NY)[0]"><path d="M 534.034521 1229.744833 C 512.602410 1268.000000 490.400000 1290.000000 425.620843 1336.828306" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- RI)[1]"><path d="M 378.099092 1395.862320 C 363.165663 1434.000000 359.250000 1460.600000 359.250000 1485.500000 C 359.250000 1510.400000 383.250000 1623.400000 477.503749 1676.025010" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(RI -- VT)[0]"><path d="M 497.692827 1727.918178 C 486.451807 1766.000000 475.900000 1786.000000 446.710167 1824.407676" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MI -- MN)[0]"><path d="M 1769.641025 565.506277 C 1803.265060 604.000000 1827.900000 625.678761 1889.888097 671.209842" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MN -- OH)[0]"><path d="M 1925.000000 732.000000 C 1925.000000 770.000000 1925.000000 796.600000 1925.000000 821.500000 C 1925.000000 846.400000 1925.000000 879.600000 1925.000000 904.500000 C 1925.000000 929.400000 1925.000000 962.600000 1925.000000 987.500000 C 1925.000000 1012.400000 1905.200000 1124.400000 1827.695034 1172.938464" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OH -- WI)[0]"><path d="M 1790.536397 1229.996011 C 1788.132530 1268.000000 1727.250000 1293.028550 1488.190542 1352.658708" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MN -- ND)[0]"><path d="M 1933.420325 731.944349 C 1942.590361 770.000000 1945.000000 796.600000 1945.000000 821.500000 C 1945.000000 846.400000 1875.400000 961.200000 1598.953946 1021.573276" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ND -- SD)[0]"><path d="M 1551.642443 1063.880907 C 1537.864458 1102.000000 1538.850000 1122.000000 1556.414189 1160.183019" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WI)[1]"><path d="M 1552.594784 1229.751540 C 1531.512048 1268.000000 1517.400000 1288.000000 1484.304079 1326.483630" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- TN)[1]"><path d="M 1058.830508 731.954565 C 1067.081325 770.000000 1069.250000 796.600000 1069.250000 821.500000 C 1069.250000 846.400000 1069.250000 879.600000 1069.250000 904.500000 C 1069.250000 929.400000 1069.250000 962.600000 1069.250000 987.500000 C 1069.250000 1012.400000 1069.250000 1045.600000 1069.250000 1070.500000 C 1069.250000 1095.400000 1069.250000 1128.600000 1069.250000 1153.500000 C 1069.250000 1178.400000 1069.250000 1211.600000 1069.250000 1236.500000 C 1069.250000 1261.400000 1069.250000 1294.600000 1069.250000 1319.500000 C 1069.250000 1344.400000 1057.250000 1454.826087 1010.734982 1496.790723" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- NE)[2]"><path d="M 1528.300262 880.206984 C 1636.700000 932.667149 1621.250000 960.478702 1451.145435 1017.755289" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- OK)[1]"><path d="M 1426.170325 1063.944349 C 1435.340361 1102.000000 1437.750000 1128.600000 1437.750000 1153.500000 C 1437.750000 1178.400000 1422.750000 1289.400000 1364.342324 1333.789833" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TN)[1]"><path d="M 1329.750000 1396.000000 C 1329.750000 1434.000000 1265.650000 1459.093050 1011.196762 1519.006862" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MT -- ND)[0]"><path d="M 1187.922027 897.852690 C 1203.433735 936.000000 1272.350000 961.087737 1529.802026 1020.985475" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ND -- SD)[1]"><path d="M 1560.034863 1063.985640 C 1555.454819 1102.000000 1556.450000 1122.000000 1564.820276 1160.046711" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WY)[0]"><path d="M 1571.750000 1230.000000 C 1571.750000 1268.000000 1571.750000 1294.600000 1571.750000 1319.500000 C 1571.750000 1344.400000 1571.750000 1377.600000 1571.750000 1402.500000 C 1571.750000 1427.400000 1571.750000 1460.600000 1571.750000 1485.500000 C 1571.750000 1510.400000 1571.750000 1543.600000 1571.750000 1568.500000 C 1571.750000 1593.400000 1571.750000 1626.600000 1571.750000 1651.500000 C 1571.750000 1676.400000 1388.150000 1792.000000 655.742449 1855.826366" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- SD)[1]"><path d="M 1445.235748 1063.565411 C 1475.798193 1102.000000 1494.950000 1122.563636 1538.295057 1163.445906" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WY)[1]"><path d="M 1589.559135 1229.780193 C 1609.129518 1268.000000 1614.250000 1294.600000 1614.250000 1319.500000 C 1614.250000 1344.400000 1614.250000 1377.600000 1614.250000 1402.500000 C 1614.250000 1427.400000 1614.250000 1460.600000 1614.250000 1485.500000 C 1614.250000 1510.400000 1614.250000 1543.600000 1614.250000 1568.500000 C 1614.250000 1593.400000 1614.250000 1626.600000 1614.250000 1651.500000 C 1614.250000 1676.400000 1422.250000 1792.000000 656.243092 1855.833909" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- OR)[2]"><path d="M 453.125900 1041.709130 C 604.850000 1097.803118 643.250000 1128.600000 643.250000 1153.500000 C 643.250000 1178.400000 574.650000 1293.200000 302.202642 1353.567345" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OR -- UT)[1]"><path d="M 266.750000 1396.000000 C 266.750000 1434.000000 307.150000 1458.329915 466.865063 1514.980984" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NH -- VT)[0]"><path d="M 571.723593 1229.771454 C 591.759036 1268.000000 597.000000 1294.600000 597.000000 1319.500000 C 597.000000 1344.400000 597.000000 1377.600000 597.000000 1402.500000 C 597.000000 1427.400000 597.000000 1460.600000 597.000000 1485.500000 C 597.000000 1510.400000 597.000000 1543.600000 597.000000 1568.500000 C 597.000000 1593.400000 597.000000 1626.600000 597.000000 1651.500000 C 597.000000 1676.400000 568.050000 1789.594625 454.060333 1843.123012" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NJ -- NY)[0]"><path d="M 733.198298 1229.755993 C 754.048193 1268.000000 692.300000 1293.200000 425.450721 1353.558766" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- PA)[0]"><path d="M 425.401448 1383.988232 C 495.350000 1431.772016 554.150000 1458.353911 715.862844 1515.107256" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NM -- OK)[1]"><path d="M 893.317156 1229.830793 C 910.102410 1268.000000 990.950000 1293.280795 1294.788793 1354.011968" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TX)[0]"><path d="M 1364.450260 1382.493445 C 1443.550000 1431.488060 1463.750000 1460.600000 1463.750000 1485.500000 C 1463.750000 1510.400000 1412.150000 1624.800000 1207.672485 1683.448590" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- PA)[1]"><path d="M 425.475121 1380.782226 C 511.350000 1431.154064 570.150000 1458.146420 715.882532 1514.016167" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- RI)[0]"><path d="M 716.300934 1558.819741 C 673.550000 1599.488252 637.300000 1623.400000 538.265868 1676.061006" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(RI -- VT)[1]"><path d="M 518.307173 1727.918178 C 529.548193 1766.000000 516.450000 1787.867706 453.858129 1834.149446" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NC -- SC)[1]"><path d="M 76.458817 1226.379456 C 120.200000 1267.402260 120.100000 1288.600000 75.964671 1329.638113" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SC -- TN)[1]"><path d="M 60.705481 1395.782366 C 80.159639 1434.000000 257.250000 1460.000000 943.258598 1523.814753" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- VA)[1]"><path d="M 983.990018 1561.963844 C 991.322289 1600.000000 983.850000 1620.000000 947.619820 1658.542745" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ND -- SD)[2]"><path d="M 1589.277116 1063.620843 C 1617.021084 1102.000000 1617.850000 1122.000000 1593.328107 1160.315457" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OH -- PA)[0]"><path d="M 1801.170325 1229.944349 C 1810.340361 1268.000000 1812.750000 1294.600000 1812.750000 1319.500000 C 1812.750000 1344.400000 1606.550000 1460.000000 783.744006 1523.845276" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- WV)[0]"><path d="M 753.965137 1561.985640 C 758.545181 1600.000000 759.750000 1626.600000 759.750000 1651.500000 C 759.750000 1676.400000 784.150000 1788.940575 879.983111 1839.765803" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TX)[1]"><path d="M 1364.510575 1379.734596 C 1459.550000 1430.957143 1483.750000 1460.600000 1483.750000 1485.500000 C 1483.750000 1510.400000 1428.150000 1625.000000 1207.680963 1684.479057" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OR -- WA)[0]"><path d="M 288.692629 1395.690252 C 312.924699 1434.000000 319.250000 1460.600000 319.250000 1485.500000 C 319.250000 1510.400000 319.250000 1620.000000 319.250000 1658.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- WV)[1]"><path d="M 762.357557 1561.880907 C 776.135542 1600.000000 779.750000 1626.600000 779.750000 1651.500000 C 779.750000 1676.400000 800.150000 1788.404396 880.041120 1836.982879" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WY)[2]"><path d="M 1597.802475 1229.597687 C 1626.719880 1268.000000 1634.250000 1294.600000 1634.250000 1319.500000 C 1634.250000 1344.400000 1634.250000 1377.600000 1634.250000 1402.500000 C 1634.250000 1427.400000 1634.250000 1460.600000 1634.250000 1485.500000 C 1634.250000 1510.400000 1634.250000 1543.600000 1634.250000 1568.500000 C 1634.250000 1593.400000 1634.250000 1626.600000 1634.250000 1651.500000 C 1634.250000 1676.400000 1438.250000 1792.000000 656.243369 1855.837276" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- VA)[2]"><path d="M 992.359088 1561.834842 C 1008.912651 1600.000000 1000.250000 1621.000000 949.776773 1663.708116" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(UT -- WY)[1]"><path d="M 532.419321 1561.472834 C 567.813253 1600.000000 577.000000 1626.600000 577.000000 1651.500000 C 577.000000 1676.400000 582.200000 1786.000000 602.077295 1824.225566" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(VA -- WV)[2]"><path d="M 949.701248 1700.749197 C 1216.950000 1760.862060 1217.650000 1791.000000 953.201125 1850.560557" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><mask id="2550702292" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1967" height="1896">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="AL"><g class="shape" ><rect x="1.000000" y="166.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="33.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AL</text></g><g id="FL"><g class="shape" ><rect x="3.000000" y="332.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="33.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">FL</text></g><g id="GA"><g class="shape" ><rect x="0.000000" y="498.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="33.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">GA</text></g><g id="MS"><g class="shape" ><rect x="1018.000000" y="664.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1051.000000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MS</text></g><g id="TN"><g class="shape" ><rect x="945.000000" y="1494.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="977.000000" y="1532.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TN</text></g><g id="AK"><g class="shape" ><rect x="1570.000000" y="0.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1603.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AK</text></g><g id="AZ"><g class="shape" ><rect x="261.000000" y="664.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="293.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AZ</text></g><g id="CA"><g class="shape" ><rect x="261.000000" y="830.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="293.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CA</text></g><g id="NV"><g class="shape" ><rect x="386.000000" y="996.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="418.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NV</text></g><g id="NM"><g class="shape" ><rect x="845.000000" y="1162.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="878.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NM</text></g><g id="UT"><g class="shape" ><rect x="469.000000" y="1494.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="501.000000" y="1532.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">UT</text></g><g id="AR"><g class="shape" ><rect x="1028.000000" y="332.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1061.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AR</text></g><g id="LA"><g class="shape" ><rect x="1030.000000" y="498.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1061.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">LA</text></g><g id="MO"><g class="shape" ><rect x="1458.000000" y="830.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1492.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MO</text></g><g id="OK"><g class="shape" ><rect x="1297.000000" y="1328.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1330.000000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OK</text></g><g id="TX"><g class="shape" ><rect x="1143.000000" y="1660.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1174.500000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TX</text></g><g id="OR"><g class="shape" ><rect x="234.000000" y="1328.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="267.000000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OR</text></g><g id="CO"><g class="shape" ><rect x="1294.000000" y="498.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1327.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CO</text></g><g id="KS"><g class="shape" ><rect x="1295.000000" y="664.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1326.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KS</text></g><g id="NE"><g class="shape" ><rect x="1386.000000" y="996.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1417.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NE</text></g><g id="WY"><g class="shape" ><rect x="586.000000" y="1826.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="620.000000" y="1864.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WY</text></g><g id="CT"><g class="shape" ><rect x="386.000000" y="830.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="418.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CT</text></g><g id="MA"><g class="shape" ><rect x="207.000000" y="996.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="240.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MA</text></g><g id="NY"><g class="shape" ><rect x="360.000000" y="1328.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="392.000000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NY</text></g><g id="RI"><g class="shape" ><rect x="479.000000" y="1660.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="508.000000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">RI</text></g><g id="DE"><g class="shape" ><rect x="755.000000" y="830.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="786.500000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">DE</text></g><g id="MD"><g class="shape" ><rect x="753.000000" y="996.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="786.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MD</text></g><g id="NJ"><g class="shape" ><rect x="683.000000" y="1162.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="714.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NJ</text></g><g id="PA"><g class="shape" ><rect x="718.000000" y="1494.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="750.000000" y="1532.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">PA</text></g><g id="NC"><g class="shape" ><rect x="11.000000" y="1162.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NC</text></g><g id="SC"><g class="shape" ><rect x="12.000000" y="1328.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SC</text></g><g id="HI"><g class="shape" ><rect x="1696.000000" y="0.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1725.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">HI</text></g><g id="ID"><g class="shape" ><rect x="1144.000000" y="664.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1173.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ID</text></g><g id="MT"><g class="shape" ><rect x="1141.000000" y="830.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1174.000000" y="868.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MT</text></g><g id="WA"><g class="shape" ><rect x="285.000000" y="1660.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.500000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WA</text></g><g id="IL"><g class="shape" ><rect x="1815.000000" y="0.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1843.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IL</text></g><g id="IN"><g class="shape" ><rect x="1814.000000" y="166.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1843.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IN</text></g><g id="IA"><g class="shape" ><rect x="1779.000000" y="332.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1808.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IA</text></g><g id="MI"><g class="shape" ><rect x="1709.000000" y="498.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1739.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MI</text></g><g id="KY"><g class="shape" ><rect x="1769.000000" y="664.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1800.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KY</text></g><g id="WI"><g class="shape" ><rect x="1423.000000" y="1328.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1454.500000" y="1366.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WI</text></g><g id="OH"><g class="shape" ><rect x="1760.000000" y="1162.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1793.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OH</text></g><g id="MN"><g class="shape" ><rect x="1892.000000" y="664.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1925.500000" y="702.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MN</text></g><g id="SD"><g class="shape" ><rect x="1540.000000" y="1162.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1572.000000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SD</text></g><g id="VA"><g class="shape" ><rect x="883.000000" y="1660.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="915.500000" y="1698.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VA</text></g><g id="WV"><g class="shape" ><rect x="882.000000" y="1826.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="916.500000" y="1864.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WV</text></g><g id="ME"><g class="shape" ><rect x="880.000000" y="996.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="912.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ME</text></g><g id="NH"><g class="shape" ><rect x="521.000000" y="1162.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="553.500000" y="1200.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NH</text></g><g id="VT"><g class="shape" ><rect x="388.000000" y="1826.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="420.000000" y="1864.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VT</text></g><g id="ND"><g class="shape" ><rect x="1532.000000" y="996.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1564.500000" y="1034.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ND</text></g><g id="(AL -- FL)[0]"><path d="M 33.000000 234.000000 C 33.000000 272.000000 33.000000 292.000000 33.000000 330.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(FL -- GA)[0]"><path d="M 28.784863 399.985640 C 24.204819 438.000000 24.200000 458.000000 28.761710 496.014246" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(GA -- MS)[0]"><path d="M 28.784863 565.985640 C 24.204819 604.000000 222.000000 630.000000 1016.006433 693.839713" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- TN)[0]"><path d="M 1023.764252 731.565411 C 993.201807 770.000000 985.250000 796.600000 985.250000 821.500000 C 985.250000 846.400000 985.250000 879.600000 985.250000 904.500000 C 985.250000 929.400000 985.250000 962.600000 985.250000 987.500000 C 985.250000 1012.400000 985.250000 1045.600000 985.250000 1070.500000 C 985.250000 1095.400000 985.250000 1128.600000 985.250000 1153.500000 C 985.250000 1178.400000 985.250000 1211.600000 985.250000 1236.500000 C 985.250000 1261.400000 985.250000 1294.600000 985.250000 1319.500000 C 985.250000 1344.400000 984.250000 1454.000000 980.449007 1492.009926" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(AZ -- CA)[0]"><path d="M 293.500000 732.000000 C 293.500000 770.000000 293.500000 790.000000 293.500000 828.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CA -- NV)[0]"><path d="M 259.147141 876.959791 C 123.600000 932.041371 148.650000 961.000000 384.310873 1020.510321" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- NM)[0]"><path d="M 384.676718 1055.743096 C 327.650000 1100.501655 419.400000 1127.600000 843.021156 1189.709869" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NM -- UT)[0]"><path d="M 862.682844 1229.830793 C 845.897590 1268.000000 841.500000 1294.600000 841.500000 1319.500000 C 841.500000 1344.400000 779.700000 1459.000000 534.443569 1518.528260" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(AR -- LA)[0]"><path d="M 1061.250000 400.000000 C 1061.250000 438.000000 1061.250000 458.000000 1061.250000 496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(LA -- MS)[0]"><path d="M 1039.307371 565.690252 C 1015.075301 604.000000 1013.950000 624.000000 1033.827295 662.225566" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- MO)[0]"><path d="M 1033.337227 731.778015 C 1013.650602 770.000000 1098.300000 795.431470 1455.528892 856.818629" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- OK)[0]"><path d="M 1455.631433 876.687775 C 1310.700000 931.994943 1274.000000 962.600000 1274.000000 987.500000 C 1274.000000 1012.400000 1274.000000 1045.600000 1274.000000 1070.500000 C 1274.000000 1095.400000 1274.000000 1128.600000 1274.000000 1153.500000 C 1274.000000 1178.400000 1280.800000 1288.000000 1306.875380 1326.346147" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TN)[0]"><path d="M 1294.966633 1378.657612 C 1192.350000 1430.750459 1134.850000 1457.789418 1011.081201 1512.142912" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- TX)[0]"><path d="M 943.785436 1558.121107 C 899.450000 1599.351821 939.000000 1624.800000 1141.079243 1683.442604" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CA -- NV)[1]"><path d="M 327.464564 894.586093 C 371.400000 935.444818 387.150000 956.000000 403.944523 994.169370" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- OR)[0]"><path d="M 384.812931 1061.848708 C 343.650000 1101.691545 333.000000 1128.600000 333.000000 1153.500000 C 333.000000 1178.400000 325.000000 1288.000000 294.249390 1326.438262" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CO -- KS)[0]"><path d="M 1326.500000 566.000000 C 1326.500000 604.000000 1326.500000 624.000000 1326.500000 662.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KS -- NE)[0]"><path d="M 1296.358975 731.506277 C 1262.734940 770.000000 1254.000000 796.600000 1254.000000 821.500000 C 1254.000000 846.400000 1280.400000 959.400000 1384.216583 1012.094781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- NM)[0]"><path d="M 1398.594784 1063.751540 C 1377.512048 1102.000000 1279.800000 1127.400000 912.972672 1188.670508" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NM -- OK)[0]"><path d="M 878.000000 1230.000000 C 878.000000 1268.000000 961.750000 1293.387382 1294.782925 1354.575502" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- UT)[0]"><path d="M 1295.018735 1381.088467 C 1208.350000 1431.217422 1055.650000 1459.800000 535.235523 1522.759791" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(UT -- WY)[0]"><path d="M 475.004991 1561.604628 C 446.439759 1600.000000 439.000000 1626.600000 439.000000 1651.500000 C 439.000000 1676.400000 468.300000 1789.473130 583.682904 1842.530089" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(CT -- MA)[0]"><path d="M 418.000000 898.000000 C 418.000000 936.000000 389.200000 959.400000 275.813330 1012.156298" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MA -- NY)[0]"><path d="M 213.947525 1063.597687 C 185.030120 1102.000000 177.500000 1128.600000 177.500000 1153.500000 C 177.500000 1178.400000 213.950000 1292.120653 357.885053 1347.880791" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- RI)[0]"><path d="M 369.807371 1395.690252 C 345.575301 1434.000000 339.250000 1460.600000 339.250000 1485.500000 C 339.250000 1510.400000 367.250000 1623.800000 477.456049 1678.115839" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(DE -- MD)[0]"><path d="M 786.750000 898.000000 C 786.750000 936.000000 786.750000 956.000000 786.750000 994.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MD -- NJ)[0]"><path d="M 756.608975 1063.506277 C 722.984940 1102.000000 714.250000 1122.000000 714.250000 1160.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NJ -- PA)[0]"><path d="M 703.524083 1229.911807 C 691.822289 1268.000000 688.750000 1294.600000 688.750000 1319.500000 C 688.750000 1344.400000 696.150000 1454.000000 724.560314 1492.392316" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(FL -- GA)[1]"><path d="M 66.468241 370.843348 C 408.300000 432.497669 408.650000 463.400000 68.218399 524.645872" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(GA -- NC)[0]"><path d="M 37.215137 565.985640 C 41.795181 604.000000 43.000000 630.600000 43.000000 655.500000 C 43.000000 680.400000 43.000000 713.600000 43.000000 738.500000 C 43.000000 763.400000 43.000000 796.600000 43.000000 821.500000 C 43.000000 846.400000 43.000000 879.600000 43.000000 904.500000 C 43.000000 929.400000 43.000000 962.600000 43.000000 987.500000 C 43.000000 1012.400000 43.000000 1122.000000 43.000000 1160.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NC -- SC)[0]"><path d="M 38.784863 1229.985640 C 34.204819 1268.000000 34.200000 1288.000000 38.761710 1326.014246" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SC -- TN)[0]"><path d="M 38.784863 1395.985640 C 34.204819 1434.000000 215.400000 1460.000000 943.007651 1523.825233" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ID -- MT)[0]"><path d="M 1173.750000 732.000000 C 1173.750000 770.000000 1173.750000 790.000000 1173.750000 828.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MT -- NV)[0]"><path d="M 1149.544160 897.639391 C 1122.737952 936.000000 982.850000 961.825968 453.235969 1024.893350" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- OR)[1]"><path d="M 404.994838 1063.860411 C 389.945783 1102.000000 386.000000 1128.600000 386.000000 1153.500000 C 386.000000 1178.400000 368.800000 1290.000000 301.640254 1336.855637" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OR -- UT)[0]"><path d="M 231.971168 1378.873951 C 130.950000 1430.791950 177.950000 1459.256890 466.792638 1519.873676" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(UT -- WA)[0]"><path d="M 500.750000 1562.000000 C 500.750000 1600.000000 471.350000 1623.400000 355.569884 1676.170529" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(WA -- WY)[0]"><path d="M 319.250000 1728.000000 C 319.250000 1766.000000 372.500000 1790.720233 583.572299 1849.068279" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IL -- IN)[0]"><path d="M 1843.250000 68.000000 C 1843.250000 106.000000 1843.250000 126.000000 1843.250000 164.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IN -- IA)[0]"><path d="M 1828.661349 233.844836 C 1812.686747 272.000000 1808.500000 292.000000 1808.500000 330.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IA -- MI)[0]"><path d="M 1779.787720 399.537960 C 1747.813253 438.000000 1739.500000 458.000000 1739.500000 496.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MI -- KY)[0]"><path d="M 1707.162325 544.888885 C 1578.800000 600.019922 1590.700000 628.539310 1766.599105 686.074781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KY -- MO)[0]"><path d="M 1778.882119 731.708596 C 1755.584337 770.000000 1704.700000 794.400000 1527.404057 851.387982" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- WI)[0]"><path d="M 1455.763514 883.420849 C 1368.500000 933.285714 1346.250000 962.600000 1346.250000 987.500000 C 1346.250000 1012.400000 1346.250000 1045.600000 1346.250000 1070.500000 C 1346.250000 1095.400000 1346.250000 1128.600000 1346.250000 1153.500000 C 1346.250000 1178.400000 1361.650000 1289.800000 1421.662455 1335.783570" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IN -- KY)[0]"><path d="M 1874.402526 220.237451 C 1946.550000 269.422177 1965.000000 298.600000 1965.000000 323.500000 C 1965.000000 348.400000 1965.000000 381.600000 1965.000000 406.500000 C 1965.000000 431.400000 1965.000000 464.600000 1965.000000 489.500000 C 1965.000000 514.400000 1938.400000 627.400000 1833.786160 680.100205" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KY -- MI)[0]"><path d="M 1819.982274 662.266413 C 1841.996988 624.000000 1832.150000 602.000000 1771.335248 555.219422" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MI -- OH)[0]"><path d="M 1724.494969 565.836856 C 1708.057229 604.000000 1703.750000 630.600000 1703.750000 655.500000 C 1703.750000 680.400000 1703.750000 713.600000 1703.750000 738.500000 C 1703.750000 763.400000 1703.750000 796.600000 1703.750000 821.500000 C 1703.750000 846.400000 1703.750000 879.600000 1703.750000 904.500000 C 1703.750000 929.400000 1703.750000 962.600000 1703.750000 987.500000 C 1703.750000 1012.400000 1714.950000 1122.444944 1758.287343 1162.860668" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(IA -- MN)[0]"><path d="M 1839.605586 388.103030 C 1903.800000 435.782103 1920.250000 464.600000 1920.250000 489.500000 C 1920.250000 514.400000 1920.850000 624.000000 1923.130215 662.003590" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MN -- MO)[0]"><path d="M 1898.947525 731.597687 C 1870.030120 770.000000 1795.100000 795.000000 1527.452238 854.565526" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- NE)[0]"><path d="M 1455.964190 892.642937 C 1405.100000 935.072362 1395.200000 956.000000 1407.390449 994.095152" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- SD)[0]"><path d="M 1406.919431 1063.910184 C 1395.102410 1102.000000 1421.550000 1125.644784 1537.934229 1179.385485" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WI)[0]"><path d="M 1538.164206 1220.811304 C 1478.950000 1266.318519 1462.750000 1288.000000 1458.949007 1326.009926" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KS -- MO)[0]"><path d="M 1359.479513 726.997804 C 1405.800000 769.130411 1426.550000 790.000000 1460.428744 828.498573" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- NE)[1]"><path d="M 1501.911879 897.916603 C 1513.268072 936.000000 1502.850000 957.291371 1450.779420 1001.168103" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- OK)[0]"><path d="M 1417.750000 1064.000000 C 1417.750000 1102.000000 1417.750000 1128.600000 1417.750000 1153.500000 C 1417.750000 1178.400000 1406.750000 1288.400000 1364.203293 1328.625977" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(KY -- MO)[1]"><path d="M 1817.809135 731.780193 C 1837.379518 770.000000 1779.100000 795.000000 1527.446269 854.539526" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- OH)[0]"><path d="M 1528.253921 882.435756 C 1620.700000 933.094926 1644.250000 962.600000 1644.250000 987.500000 C 1644.250000 1012.400000 1667.350000 1124.911111 1758.004187 1175.579781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OH -- TN)[0]"><path d="M 1758.034468 1215.804254 C 1675.350000 1265.355235 1654.250000 1294.600000 1654.250000 1319.500000 C 1654.250000 1344.400000 1525.250000 1459.815362 1011.235137 1522.833432" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- VA)[0]"><path d="M 948.435589 1561.535684 C 916.343373 1600.000000 908.800000 1620.000000 911.840510 1658.006369" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(VA -- WV)[0]"><path d="M 881.215777 1721.461869 C 829.350000 1764.835768 829.150000 1786.887282 880.209472 1829.160959" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(LA -- MS)[1]"><path d="M 1094.180948 563.156102 C 1135.550000 603.551765 1133.850000 624.833684 1085.756135 666.852535" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- TX)[0]"><path d="M 1050.406640 731.999420 C 1049.490964 770.000000 1049.250000 796.600000 1049.250000 821.500000 C 1049.250000 846.400000 1049.250000 879.600000 1049.250000 904.500000 C 1049.250000 929.400000 1049.250000 962.600000 1049.250000 987.500000 C 1049.250000 1012.400000 1049.250000 1045.600000 1049.250000 1070.500000 C 1049.250000 1095.400000 1049.250000 1128.600000 1049.250000 1153.500000 C 1049.250000 1178.400000 1049.250000 1211.600000 1049.250000 1236.500000 C 1049.250000 1261.400000 1049.250000 1294.600000 1049.250000 1319.500000 C 1049.250000 1344.400000 1049.250000 1377.600000 1049.250000 1402.500000 C 1049.250000 1427.400000 1049.250000 1460.600000 1049.250000 1485.500000 C 1049.250000 1510.400000 1068.050000 1622.400000 1141.580455 1670.898811" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ME -- NH)[0]"><path d="M 912.750000 1064.000000 C 912.750000 1102.000000 847.350000 1127.000000 587.699383 1186.552894" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MD -- PA)[0]"><path d="M 794.435523 1063.953338 C 802.801205 1102.000000 805.000000 1128.600000 805.000000 1153.500000 C 805.000000 1178.400000 805.000000 1211.600000 805.000000 1236.500000 C 805.000000 1261.400000 805.000000 1294.600000 805.000000 1319.500000 C 805.000000 1344.400000 798.400000 1454.000000 773.101684 1492.330781" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- VA)[0]"><path d="M 716.168322 1552.988618 C 657.550000 1598.352914 690.550000 1624.621998 880.836631 1682.527737" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(VA -- WV)[1]"><path d="M 915.250000 1728.000000 C 915.250000 1766.000000 915.450000 1786.000000 916.210008 1824.000400" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MA -- NH)[0]"><path d="M 262.148667 1063.685648 C 286.614458 1102.000000 338.600000 1126.600000 519.095249 1184.390145" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NH -- NY)[0]"><path d="M 534.034521 1229.744833 C 512.602410 1268.000000 490.400000 1290.000000 425.620843 1336.828306" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- RI)[1]"><path d="M 378.099092 1395.862320 C 363.165663 1434.000000 359.250000 1460.600000 359.250000 1485.500000 C 359.250000 1510.400000 383.250000 1623.400000 477.503749 1676.025010" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(RI -- VT)[0]"><path d="M 497.692827 1727.918178 C 486.451807 1766.000000 475.900000 1786.000000 446.710167 1824.407676" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MI -- MN)[0]"><path d="M 1769.641025 565.506277 C 1803.265060 604.000000 1827.900000 625.678761 1889.888097 671.209842" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MN -- OH)[0]"><path d="M 1925.000000 732.000000 C 1925.000000 770.000000 1925.000000 796.600000 1925.000000 821.500000 C 1925.000000 846.400000 1925.000000 879.600000 1925.000000 904.500000 C 1925.000000 929.400000 1925.000000 962.600000 1925.000000 987.500000 C 1925.000000 1012.400000 1905.200000 1124.400000 1827.695034 1172.938464" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OH -- WI)[0]"><path d="M 1790.536397 1229.996011 C 1788.132530 1268.000000 1727.250000 1293.028550 1488.190542 1352.658708" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MN -- ND)[0]"><path d="M 1933.420325 731.944349 C 1942.590361 770.000000 1945.000000 796.600000 1945.000000 821.500000 C 1945.000000 846.400000 1875.400000 961.200000 1598.953946 1021.573276" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ND -- SD)[0]"><path d="M 1551.642443 1063.880907 C 1537.864458 1102.000000 1538.850000 1122.000000 1556.414189 1160.183019" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WI)[1]"><path d="M 1552.594784 1229.751540 C 1531.512048 1268.000000 1517.400000 1288.000000 1484.304079 1326.483630" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MS -- TN)[1]"><path d="M 1058.830508 731.954565 C 1067.081325 770.000000 1069.250000 796.600000 1069.250000 821.500000 C 1069.250000 846.400000 1069.250000 879.600000 1069.250000 904.500000 C 1069.250000 929.400000 1069.250000 962.600000 1069.250000 987.500000 C 1069.250000 1012.400000 1069.250000 1045.600000 1069.250000 1070.500000 C 1069.250000 1095.400000 1069.250000 1128.600000 1069.250000 1153.500000 C 1069.250000 1178.400000 1069.250000 1211.600000 1069.250000 1236.500000 C 1069.250000 1261.400000 1069.250000 1294.600000 1069.250000 1319.500000 C 1069.250000 1344.400000 1057.250000 1454.826087 1010.734982 1496.790723" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MO -- NE)[2]"><path d="M 1528.300262 880.206984 C 1636.700000 932.667149 1621.250000 960.478702 1451.145435 1017.755289" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- OK)[1]"><path d="M 1426.170325 1063.944349 C 1435.340361 1102.000000 1437.750000 1128.600000 1437.750000 1153.500000 C 1437.750000 1178.400000 1422.750000 1289.400000 1364.342324 1333.789833" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TN)[1]"><path d="M 1329.750000 1396.000000 C 1329.750000 1434.000000 1265.650000 1459.093050 1011.196762 1519.006862" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(MT -- ND)[0]"><path d="M 1187.922027 897.852690 C 1203.433735 936.000000 1272.350000 961.087737 1529.802026 1020.985475" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ND -- SD)[1]"><path d="M 1560.034863 1063.985640 C 1555.454819 1102.000000 1556.450000 1122.000000 1564.820276 1160.046711" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WY)[0]"><path d="M 1571.750000 1230.000000 C 1571.750000 1268.000000 1571.750000 1294.600000 1571.750000 1319.500000 C 1571.750000 1344.400000 1571.750000 1377.600000 1571.750000 1402.500000 C 1571.750000 1427.400000 1571.750000 1460.600000 1571.750000 1485.500000 C 1571.750000 1510.400000 1571.750000 1543.600000 1571.750000 1568.500000 C 1571.750000 1593.400000 1571.750000 1626.600000 1571.750000 1651.500000 C 1571.750000 1676.400000 1388.150000 1792.000000 655.742449 1855.826366" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NE -- SD)[1]"><path d="M 1445.235748 1063.565411 C 1475.798193 1102.000000 1494.950000 1122.563636 1538.295057 1163.445906" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WY)[1]"><path d="M 1589.559135 1229.780193 C 1609.129518 1268.000000 1614.250000 1294.600000 1614.250000 1319.500000 C 1614.250000 1344.400000 1614.250000 1377.600000 1614.250000 1402.500000 C 1614.250000 1427.400000 1614.250000 1460.600000 1614.250000 1485.500000 C 1614.250000 1510.400000 1614.250000 1543.600000 1614.250000 1568.500000 C 1614.250000 1593.400000 1614.250000 1626.600000 1614.250000 1651.500000 C 1614.250000 1676.400000 1422.250000 1792.000000 656.243092 1855.833909" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NV -- OR)[2]"><path d="M 453.125900 1041.709130 C 604.850000 1097.803118 643.250000 1128.600000 643.250000 1153.500000 C 643.250000 1178.400000 574.650000 1293.200000 302.202642 1353.567345" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OR -- UT)[1]"><path d="M 266.750000 1396.000000 C 266.750000 1434.000000 307.150000 1458.329915 466.865063 1514.980984" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NH -- VT)[0]"><path d="M 571.723593 1229.771454 C 591.759036 1268.000000 597.000000 1294.600000 597.000000 1319.500000 C 597.000000 1344.400000 597.000000 1377.600000 597.000000 1402.500000 C 597.000000 1427.400000 597.000000 1460.600000 597.000000 1485.500000 C 597.000000 1510.400000 597.000000 1543.600000 597.000000 1568.500000 C 597.000000 1593.400000 597.000000 1626.600000 597.000000 1651.500000 C 597.000000 1676.400000 568.050000 1789.594625 454.060333 1843.123012" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NJ -- NY)[0]"><path d="M 733.198298 1229.755993 C 754.048193 1268.000000 692.300000 1293.200000 425.450721 1353.558766" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- PA)[0]"><path d="M 425.401448 1383.988232 C 495.350000 1431.772016 554.150000 1458.353911 715.862844 1515.107256" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NM -- OK)[1]"><path d="M 893.317156 1229.830793 C 910.102410 1268.000000 990.950000 1293.280795 1294.788793 1354.011968" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TX)[0]"><path d="M 1364.450260 1382.493445 C 1443.550000 1431.488060 1463.750000 1460.600000 1463.750000 1485.500000 C 1463.750000 1510.400000 1412.150000 1624.800000 1207.672485 1683.448590" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NY -- PA)[1]"><path d="M 425.475121 1380.782226 C 511.350000 1431.154064 570.150000 1458.146420 715.882532 1514.016167" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- RI)[0]"><path d="M 716.300934 1558.819741 C 673.550000 1599.488252 637.300000 1623.400000 538.265868 1676.061006" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(RI -- VT)[1]"><path d="M 518.307173 1727.918178 C 529.548193 1766.000000 516.450000 1787.867706 453.858129 1834.149446" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(NC -- SC)[1]"><path d="M 76.458817 1226.379456 C 120.200000 1267.402260 120.100000 1288.600000 75.964671 1329.638113" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SC -- TN)[1]"><path d="M 60.705481 1395.782366 C 80.159639 1434.000000 257.250000 1460.000000 943.258598 1523.814753" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- VA)[1]"><path d="M 983.990018 1561.963844 C 991.322289 1600.000000 983.850000 1620.000000 947.619820 1658.542745" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(ND -- SD)[2]"><path d="M 1589.277116 1063.620843 C 1617.021084 1102.000000 1617.850000 1122.000000 1593.328107 1160.315457" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OH -- PA)[0]"><path d="M 1801.170325 1229.944349 C 1810.340361 1268.000000 1812.750000 1294.600000 1812.750000 1319.500000 C 1812.750000 1344.400000 1606.550000 1460.000000 783.744006 1523.845276" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- WV)[0]"><path d="M 753.965137 1561.985640 C 758.545181 1600.000000 759.750000 1626.600000 759.750000 1651.500000 C 759.750000 1676.400000 784.150000 1788.940575 879.983111 1839.765803" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OK -- TX)[1]"><path d="M 1364.510575 1379.734596 C 1459.550000 1430.957143 1483.750000 1460.600000 1483.750000 1485.500000 C 1483.750000 1510.400000 1428.150000 1625.000000 1207.680963 1684.479057" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(OR -- WA)[0]"><path d="M 288.692629 1395.690252 C 312.924699 1434.000000 319.250000 1460.600000 319.250000 1485.500000 C 319.250000 1510.400000 319.250000 1620.000000 319.250000 1658.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(PA -- WV)[1]"><path d="M 762.357557 1561.880907 C 776.135542 1600.000000 779.750000 1626.600000 779.750000 1651.500000 C 779.750000 1676.400000 800.150000 1788.404396 880.041120 1836.982879" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(SD -- WY)[2]"><path d="M 1597.802475 1229.597687 C 1626.719880 1268.000000 1634.250000 1294.600000 1634.250000 1319.500000 C 1634.250000 1344.400000 1634.250000 1377.600000 1634.250000 1402.500000 C 1634.250000 1427.400000 1634.250000 1460.600000 1634.250000 1485.500000 C 1634.250000 1510.400000 1634.250000 1543.600000 1634.250000 1568.500000 C 1634.250000 1593.400000 1634.250000 1626.600000 1634.250000 1651.500000 C 1634.250000 1676.400000 1438.250000 1792.000000 656.243369 1855.837276" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(TN -- VA)[2]"><path d="M 992.359088 1561.834842 C 1008.912651 1600.000000 1000.250000 1621.000000 949.776773 1663.708116" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(UT -- WY)[1]"><path d="M 532.419321 1561.472834 C 567.813253 1600.000000 577.000000 1626.600000 577.000000 1651.500000 C 577.000000 1676.400000 582.200000 1786.000000 602.077295 1824.225566" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><g id="(VA -- WV)[2]"><path d="M 949.701248 1700.749197 C 1216.950000 1760.862060 1217.650000 1791.000000 953.201125 1850.560557" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#2550702292)" /></g><mask id="2550702292" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1967" height="1896">
 <rect x="-2" y="-2" width="1967" height="1896" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/stable/us_map/elk/sketch.exp.svg b/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
index be8e29663..1f7961f65 100644
--- a/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="963" height="3566" viewBox="10 10 963 3566"><rect x="10.000000" y="10.000000" width="963.000000" height="3566.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 963 3566"><svg id="d2-svg" width="963" height="3566" viewBox="10 10 963 3566"><rect x="10.000000" y="10.000000" width="963.000000" height="3566.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="AL"><g class="shape" ><rect x="326.000000" y="148.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="358.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AL</text></g><g id="FL"><g class="shape" ><rect x="327.000000" y="294.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="357.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">FL</text></g><g id="GA"><g class="shape" ><rect x="326.000000" y="640.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="359.000000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">GA</text></g><g id="MS"><g class="shape" ><rect x="247.000000" y="836.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="280.000000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MS</text></g><g id="TN"><g class="shape" ><rect x="335.000000" y="3016.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="367.000000" y="3054.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TN</text></g><g id="AK"><g class="shape" ><rect x="737.000000" y="12.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="770.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AK</text></g><g id="AZ"><g class="shape" ><rect x="899.000000" y="836.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="931.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AZ</text></g><g id="CA"><g class="shape" ><rect x="899.000000" y="1182.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="931.500000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CA</text></g><g id="NV"><g class="shape" ><rect x="889.000000" y="1578.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="921.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NV</text></g><g id="NM"><g class="shape" ><rect x="591.000000" y="1974.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="624.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NM</text></g><g id="UT"><g class="shape" ><rect x="859.000000" y="3016.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="891.000000" y="3054.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">UT</text></g><g id="AR"><g class="shape" ><rect x="241.000000" y="294.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="274.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AR</text></g><g id="LA"><g class="shape" ><rect x="243.000000" y="640.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="274.500000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">LA</text></g><g id="MO"><g class="shape" ><rect x="609.000000" y="1182.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="643.000000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MO</text></g><g id="OK"><g class="shape" ><rect x="421.000000" y="2520.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.000000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OK</text></g><g id="TX"><g class="shape" ><rect x="252.000000" y="3262.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="283.500000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TX</text></g><g id="OR"><g class="shape" ><rect x="898.000000" y="1974.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="931.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OR</text></g><g id="CO"><g class="shape" ><rect x="486.000000" y="640.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="519.000000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CO</text></g><g id="KS"><g class="shape" ><rect x="487.000000" y="836.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="518.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KS</text></g><g id="NE"><g class="shape" ><rect x="581.000000" y="1578.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="612.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NE</text></g><g id="WY"><g class="shape" ><rect x="836.000000" y="3508.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="870.000000" y="3546.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WY</text></g><g id="CT"><g class="shape" ><rect x="98.000000" y="1182.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="130.000000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CT</text></g><g id="MA"><g class="shape" ><rect x="97.000000" y="1578.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="130.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MA</text></g><g id="NY"><g class="shape" ><rect x="109.000000" y="2520.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="141.000000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NY</text></g><g id="RI"><g class="shape" ><rect x="106.000000" y="3262.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="135.000000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">RI</text></g><g id="DE"><g class="shape" ><rect x="186.000000" y="1182.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="217.500000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">DE</text></g><g id="MD"><g class="shape" ><rect x="184.000000" y="1578.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="217.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MD</text></g><g id="NJ"><g class="shape" ><rect x="156.000000" y="1974.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="187.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NJ</text></g><g id="PA"><g class="shape" ><rect x="166.000000" y="3016.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="198.000000" y="3054.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">PA</text></g><g id="NC"><g class="shape" ><rect x="338.000000" y="1974.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="370.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NC</text></g><g id="SC"><g class="shape" ><rect x="338.000000" y="2520.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="369.500000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SC</text></g><g id="HI"><g class="shape" ><rect x="658.000000" y="12.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="687.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">HI</text></g><g id="ID"><g class="shape" ><rect x="820.000000" y="836.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="849.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ID</text></g><g id="MT"><g class="shape" ><rect x="697.000000" y="1182.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.000000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MT</text></g><g id="WA"><g class="shape" ><rect x="902.000000" y="3262.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="936.500000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WA</text></g><g id="IL"><g class="shape" ><rect x="823.000000" y="12.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="851.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IL</text></g><g id="IN"><g class="shape" ><rect x="822.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="851.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IN</text></g><g id="IA"><g class="shape" ><rect x="832.000000" y="294.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="861.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IA</text></g><g id="MI"><g class="shape" ><rect x="572.000000" y="640.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="602.500000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MI</text></g><g id="KY"><g class="shape" ><rect x="749.000000" y="294.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="780.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KY</text></g><g id="WI"><g class="shape" ><rect x="556.000000" y="2520.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="587.500000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WI</text></g><g id="OH"><g class="shape" ><rect x="464.000000" y="1578.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="497.000000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OH</text></g><g id="MN"><g class="shape" ><rect x="722.000000" y="836.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="755.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MN</text></g><g id="SD"><g class="shape" ><rect x="714.000000" y="1974.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="746.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SD</text></g><g id="VA"><g class="shape" ><rect x="335.000000" y="3262.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="367.500000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VA</text></g><g id="WV"><g class="shape" ><rect x="316.000000" y="3508.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="350.500000" y="3546.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WV</text></g><g id="ME"><g class="shape" ><rect x="12.000000" y="1578.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ME</text></g><g id="NH"><g class="shape" ><rect x="22.000000" y="1974.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NH</text></g><g id="VT"><g class="shape" ><rect x="93.000000" y="3508.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="125.000000" y="3546.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VT</text></g><g id="ND"><g class="shape" ><rect x="729.000000" y="1578.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="761.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ND</text></g><g id="(AL -- FL)[0]"><path d="M 358.466667 216.000000 L 358.466667 292.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(FL -- GA)[0]"><path d="M 348.300000 362.000000 L 348.300000 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(GA -- MS)[0]"><path d="M 348.300000 708.000000 L 348.300000 786.000000 S 348.300000 796.000000 338.300000 796.000000 L 307.300000 796.000000 S 297.300000 796.000000 297.300000 806.000000 L 297.300000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- TN)[0]"><path d="M 274.200000 904.000000 L 274.200000 2666.000000 S 274.200000 2676.000000 284.200000 2676.000000 L 333.633333 2676.000000 S 343.633333 2676.000000 343.633333 2686.000000 L 343.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(AZ -- CA)[0]"><path d="M 932.383333 904.000000 L 932.383333 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CA -- NV)[0]"><path d="M 921.550000 1250.000000 L 921.550000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- NM)[0]"><path d="M 902.050000 1646.000000 L 902.050000 1774.000000 S 902.050000 1784.000000 892.050000 1784.000000 L 645.419048 1784.000000 S 635.419048 1784.000000 635.419048 1794.000000 L 635.419048 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NM -- UT)[0]"><path d="M 640.919048 2042.000000 L 640.919048 2616.000000 S 640.919048 2626.000000 650.919048 2626.000000 L 874.650000 2626.000000 S 884.650000 2626.000000 884.650000 2636.000000 L 884.650000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(AR -- LA)[0]"><path d="M 274.800000 362.000000 L 274.800000 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(LA -- MS)[0]"><path d="M 264.300000 708.000000 L 264.300000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- MO)[0]"><path d="M 300.600000 904.000000 L 300.600000 1032.000000 S 300.600000 1042.000000 310.600000 1042.000000 L 610.466667 1042.000000 S 620.466667 1042.000000 620.466667 1052.000000 L 620.466667 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- OK)[0]"><path d="M 618.847619 1250.000000 L 618.847619 1278.000000 S 618.847619 1288.000000 608.847619 1288.000000 L 442.633333 1288.000000 S 432.633333 1288.000000 432.633333 1298.000000 L 432.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TN)[0]"><path d="M 454.633333 2588.000000 L 454.633333 2816.000000 S 454.633333 2826.000000 444.633333 2826.000000 L 385.633333 2826.000000 S 375.633333 2826.000000 375.633333 2836.000000 L 375.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- TX)[0]"><path d="M 348.433333 3084.000000 L 348.433333 3162.000000 S 348.433333 3172.000000 338.433333 3172.000000 L 312.633333 3172.000000 S 302.633333 3172.000000 302.633333 3182.000000 L 302.633333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CA -- NV)[1]"><path d="M 943.216667 1250.000000 L 943.216667 1285.291667 C 943.216667 1290.708333 937.800000 1285.291667 937.800000 1290.708333 L 937.800000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- OR)[0]"><path d="M 915.050000 1646.000000 L 915.050000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CO -- KS)[0]"><path d="M 519.133333 708.000000 L 519.133333 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KS -- NE)[0]"><path d="M 508.633333 904.000000 L 508.633333 1328.000000 S 508.633333 1338.000000 518.633333 1338.000000 L 584.519048 1338.000000 S 594.519048 1338.000000 594.519048 1348.000000 L 594.519048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- NM)[0]"><path d="M 613.419048 1646.000000 L 613.419048 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NM -- OK)[0]"><path d="M 607.919048 2042.000000 L 607.919048 2070.000000 S 607.919048 2080.000000 597.919048 2080.000000 L 475.633333 2080.000000 S 465.633333 2080.000000 465.633333 2090.000000 L 465.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- UT)[0]"><path d="M 476.633333 2588.000000 L 476.633333 2966.000000 S 476.633333 2976.000000 486.633333 2976.000000 L 861.850000 2976.000000 S 871.850000 2976.000000 871.850000 2986.000000 L 871.850000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(UT -- WY)[0]"><path d="M 875.050000 3084.000000 L 875.050000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CT -- MA)[0]"><path d="M 130.500000 1250.000000 L 130.500000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MA -- NY)[0]"><path d="M 141.666667 1646.000000 L 141.666667 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- RI)[0]"><path d="M 122.466667 2588.000000 L 122.466667 3121.150000 C 122.466667 3122.850000 120.766667 3121.150000 120.766667 3122.850000 L 120.766667 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(DE -- MD)[0]"><path d="M 217.500000 1250.000000 L 217.500000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MD -- NJ)[0]"><path d="M 206.333333 1646.000000 L 206.333333 1674.666667 C 206.333333 1693.333333 187.666667 1674.666667 187.666667 1693.333333 L 187.666667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NJ -- PA)[0]"><path d="M 198.000000 2042.000000 L 198.000000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(FL -- GA)[1]"><path d="M 368.633333 362.000000 L 368.633333 399.166667 C 368.633333 400.833333 370.300000 399.166667 370.300000 400.833333 L 370.300000 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(GA -- NC)[0]"><path d="M 370.300000 708.000000 L 370.300000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NC -- SC)[0]"><path d="M 359.633333 2042.000000 L 359.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SC -- TN)[0]"><path d="M 359.633333 2588.000000 L 359.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ID -- MT)[0]"><path d="M 850.383333 904.000000 L 850.383333 1132.000000 S 850.383333 1142.000000 840.383333 1142.000000 L 740.133333 1142.000000 S 730.133333 1142.000000 730.133333 1152.000000 L 730.133333 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MT -- NV)[0]"><path d="M 741.133333 1250.000000 L 741.133333 1278.000000 S 741.133333 1288.000000 751.133333 1288.000000 L 895.300000 1288.000000 S 905.300000 1288.000000 905.300000 1298.000000 L 905.300000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- OR)[1]"><path d="M 928.050000 1646.000000 L 928.050000 1732.250000 C 928.050000 1735.750000 931.550000 1732.250000 931.550000 1735.750000 L 931.550000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OR -- UT)[0]"><path d="M 915.050000 2042.000000 L 915.050000 2471.200000 C 915.050000 2488.800000 897.450000 2471.200000 897.450000 2488.800000 L 897.450000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(UT -- WA)[0]"><path d="M 907.050000 3084.000000 L 907.050000 3113.000000 C 907.050000 3131.000000 925.050000 3113.000000 925.050000 3131.000000 L 925.050000 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(WA -- WY)[0]"><path d="M 936.550000 3330.000000 L 936.550000 3408.000000 S 936.550000 3418.000000 926.550000 3418.000000 L 904.478571 3418.000000 S 894.478571 3418.000000 894.478571 3428.000000 L 894.478571 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IL -- IN)[0]"><path d="M 852.150000 80.000000 L 852.150000 146.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IN -- IA)[0]"><path d="M 861.983333 216.000000 L 861.983333 292.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IA -- MI)[0]"><path d="M 852.150000 362.000000 L 852.150000 490.000000 S 852.150000 500.000000 842.150000 500.000000 L 627.883333 500.000000 S 617.883333 500.000000 617.883333 510.000000 L 617.883333 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MI -- KY)[0]"><path d="M 602.633333 638.000000 L 602.633333 460.000000 S 602.633333 450.000000 612.633333 450.000000 L 764.683333 450.000000 S 774.683333 450.000000 774.683333 440.000000 L 774.683333 362.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KY -- MO)[0]"><path d="M 787.283333 362.000000 L 787.283333 540.000000 S 787.283333 550.000000 777.283333 550.000000 L 653.133333 550.000000 S 643.133333 550.000000 643.133333 560.000000 L 643.133333 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- WI)[0]"><path d="M 667.419048 1250.000000 L 667.419048 2270.000000 S 667.419048 2280.000000 657.419048 2280.000000 L 579.519048 2280.000000 S 569.519048 2280.000000 569.519048 2290.000000 L 569.519048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IN -- KY)[0]"><path d="M 842.316667 216.000000 L 842.316667 244.000000 S 842.316667 254.000000 832.316667 254.000000 L 790.983333 254.000000 S 780.983333 254.000000 780.983333 264.000000 L 780.983333 292.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KY -- MI)[0]"><path d="M 762.083333 362.000000 L 762.083333 390.000000 S 762.083333 400.000000 752.083333 400.000000 L 597.383333 400.000000 S 587.383333 400.000000 587.383333 410.000000 L 587.383333 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MI -- OH)[0]"><path d="M 592.466667 708.000000 L 592.466667 736.000000 S 592.466667 746.000000 582.466667 746.000000 L 486.633333 746.000000 S 476.633333 746.000000 476.633333 756.000000 L 476.633333 1335.750000 C 476.633333 1340.250000 481.133333 1335.750000 481.133333 1340.250000 L 481.133333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IA -- MN)[0]"><path d="M 871.816667 362.000000 L 871.816667 590.000000 S 871.816667 600.000000 861.816667 600.000000 L 777.550000 600.000000 S 767.550000 600.000000 767.550000 610.000000 L 767.550000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MN -- MO)[0]"><path d="M 756.383333 904.000000 L 756.383333 1032.000000 S 756.383333 1042.000000 746.383333 1042.000000 L 664.466667 1042.000000 S 654.466667 1042.000000 654.466667 1052.000000 L 654.466667 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- NE)[0]"><path d="M 638.276190 1250.000000 L 638.276190 1428.000000 S 638.276190 1438.000000 628.276190 1438.000000 L 617.119048 1438.000000 S 607.119048 1438.000000 607.119048 1448.000000 L 607.119048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- SD)[0]"><path d="M 623.919048 1646.000000 L 623.919048 1724.000000 S 623.919048 1734.000000 633.919048 1734.000000 L 714.716667 1734.000000 S 724.716667 1734.000000 724.716667 1744.000000 L 724.716667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WI)[0]"><path d="M 746.050000 2042.000000 L 746.050000 2320.000000 S 746.050000 2330.000000 736.050000 2330.000000 L 592.119048 2330.000000 S 582.119048 2330.000000 582.119048 2340.000000 L 582.119048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KS -- MO)[0]"><path d="M 529.633333 904.000000 L 529.633333 932.000000 S 529.633333 942.000000 539.633333 942.000000 L 621.800000 942.000000 S 631.800000 942.000000 631.800000 952.000000 L 631.800000 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- NE)[1]"><path d="M 647.990476 1250.000000 L 647.990476 1478.000000 S 647.990476 1488.000000 637.990476 1488.000000 L 629.719048 1488.000000 S 619.719048 1488.000000 619.719048 1498.000000 L 619.719048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- OK)[0]"><path d="M 592.419048 1646.000000 L 592.419048 1724.000000 S 592.419048 1734.000000 582.419048 1734.000000 L 453.633333 1734.000000 S 443.633333 1734.000000 443.633333 1744.000000 L 443.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KY -- MO)[1]"><path d="M 799.883333 362.000000 L 799.883333 1082.000000 S 799.883333 1092.000000 789.883333 1092.000000 L 675.800000 1092.000000 S 665.800000 1092.000000 665.800000 1102.000000 L 665.800000 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- OH)[0]"><path d="M 628.561905 1250.000000 L 628.561905 1378.000000 S 628.561905 1388.000000 618.561905 1388.000000 L 524.133333 1388.000000 S 514.133333 1388.000000 514.133333 1398.000000 L 514.133333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OH -- TN)[0]"><path d="M 497.633333 1646.000000 L 497.633333 2916.000000 S 497.633333 2926.000000 487.633333 2926.000000 L 401.633333 2926.000000 S 391.633333 2926.000000 391.633333 2936.000000 L 391.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- VA)[0]"><path d="M 361.233333 3084.000000 L 361.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(VA -- WV)[0]"><path d="M 351.483333 3330.000000 L 351.483333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(LA -- MS)[1]"><path d="M 285.300000 708.000000 L 285.300000 743.750000 C 285.300000 748.250000 280.800000 743.750000 280.800000 748.250000 L 280.800000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- TX)[0]"><path d="M 261.000000 904.000000 L 261.000000 3170.083333 C 261.000000 3173.916667 264.833333 3170.083333 264.833333 3173.916667 L 264.833333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ME -- NH)[0]"><path d="M 44.500000 1646.000000 L 44.500000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MD -- PA)[0]"><path d="M 228.666667 1646.000000 L 228.666667 2616.000000 S 228.666667 2626.000000 218.666667 2626.000000 L 218.666667 2626.000000 S 208.666667 2626.000000 208.666667 2636.000000 L 208.666667 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- VA)[0]"><path d="M 217.200000 3084.000000 L 217.200000 3212.000000 S 217.200000 3222.000000 227.200000 3222.000000 L 338.233333 3222.000000 S 348.233333 3222.000000 348.233333 3232.000000 L 348.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(VA -- WV)[1]"><path d="M 367.733333 3330.000000 L 367.733333 3415.625000 C 367.733333 3420.375000 362.983333 3415.625000 362.983333 3420.375000 L 362.983333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MA -- NH)[0]"><path d="M 119.333333 1646.000000 L 119.333333 1674.000000 S 119.333333 1684.000000 109.333333 1684.000000 L 76.166667 1684.000000 S 66.166667 1684.000000 66.166667 1694.000000 L 66.166667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NH -- NY)[0]"><path d="M 66.166667 2042.000000 L 66.166667 2070.000000 S 66.166667 2080.000000 76.166667 2080.000000 L 115.666667 2080.000000 S 125.666667 2080.000000 125.666667 2090.000000 L 125.666667 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- RI)[1]"><path d="M 135.266667 2588.000000 L 135.266667 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(RI -- VT)[0]"><path d="M 125.600000 3330.000000 L 125.600000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MI -- MN)[0]"><path d="M 612.800000 708.000000 L 612.800000 736.000000 S 612.800000 746.000000 622.800000 746.000000 L 735.216667 746.000000 S 745.216667 746.000000 745.216667 756.000000 L 745.216667 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MN -- OH)[0]"><path d="M 739.633333 904.000000 L 739.633333 982.000000 S 739.633333 992.000000 729.633333 992.000000 L 507.633333 992.000000 S 497.633333 992.000000 497.633333 1002.000000 L 497.633333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OH -- WI)[0]"><path d="M 514.133333 1646.000000 L 514.133333 1924.000000 S 514.133333 1934.000000 524.133333 1934.000000 L 877.550000 1934.000000 S 887.550000 1934.000000 887.550000 1944.000000 L 887.550000 2420.000000 S 887.550000 2430.000000 877.550000 2430.000000 L 617.319048 2430.000000 S 607.319048 2430.000000 607.319048 2440.000000 L 607.319048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MN -- ND)[0]"><path d="M 773.133333 904.000000 L 773.133333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ND -- SD)[0]"><path d="M 746.050000 1646.000000 L 746.050000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WI)[1]"><path d="M 756.716667 2042.000000 L 756.716667 2370.000000 S 756.716667 2380.000000 746.716667 2380.000000 L 604.719048 2380.000000 S 594.719048 2380.000000 594.719048 2390.000000 L 594.719048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- TN)[1]"><path d="M 287.400000 904.000000 L 287.400000 2616.000000 S 287.400000 2626.000000 297.400000 2626.000000 L 341.633333 2626.000000 S 351.633333 2626.000000 351.633333 2636.000000 L 351.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- NE)[2]"><path d="M 657.704762 1250.000000 L 657.704762 1528.000000 S 657.704762 1538.000000 647.704762 1538.000000 L 642.319048 1538.000000 S 632.319048 1538.000000 632.319048 1548.000000 L 632.319048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- OK)[1]"><path d="M 602.919048 1646.000000 L 602.919048 1774.000000 S 602.919048 1784.000000 592.919048 1784.000000 L 464.633333 1784.000000 S 454.633333 1784.000000 454.633333 1794.000000 L 454.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TN)[1]"><path d="M 465.633333 2588.000000 L 465.633333 2866.000000 S 465.633333 2876.000000 455.633333 2876.000000 L 393.633333 2876.000000 S 383.633333 2876.000000 383.633333 2886.000000 L 383.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MT -- ND)[0]"><path d="M 719.133333 1250.000000 L 719.133333 1328.000000 S 719.133333 1338.000000 729.133333 1338.000000 L 741.466667 1338.000000 S 751.466667 1338.000000 751.466667 1348.000000 L 751.466667 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ND -- SD)[1]"><path d="M 762.300000 1646.000000 L 762.300000 1881.208333 C 762.300000 1886.791667 756.716667 1881.208333 756.716667 1886.791667 L 756.716667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WY)[0]"><path d="M 724.716667 2042.000000 L 724.716667 2170.000000 S 724.716667 2180.000000 714.716667 2180.000000 L 544.919048 2180.000000 S 534.919048 2180.000000 534.919048 2190.000000 L 534.919048 3458.000000 S 534.919048 3468.000000 544.919048 3468.000000 L 835.907143 3468.000000 S 845.907143 3468.000000 845.907143 3478.000000 L 845.907143 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- SD)[1]"><path d="M 634.419048 1646.000000 L 634.419048 1674.000000 S 634.419048 1684.000000 644.419048 1684.000000 L 725.383333 1684.000000 S 735.383333 1684.000000 735.383333 1694.000000 L 735.383333 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WY)[1]"><path d="M 735.383333 2042.000000 L 735.383333 2220.000000 S 735.383333 2230.000000 725.383333 2230.000000 L 555.919048 2230.000000 S 545.919048 2230.000000 545.919048 2240.000000 L 545.919048 3408.000000 S 545.919048 3418.000000 555.919048 3418.000000 L 845.621429 3418.000000 S 855.621429 3418.000000 855.621429 3428.000000 L 855.621429 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- OR)[2]"><path d="M 941.050000 1646.000000 L 941.050000 1680.500000 C 941.050000 1687.500000 948.050000 1680.500000 948.050000 1687.500000 L 948.050000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OR -- UT)[1]"><path d="M 931.550000 2042.000000 L 931.550000 2616.000000 S 931.550000 2626.000000 921.550000 2626.000000 L 920.250000 2626.000000 S 910.250000 2626.000000 910.250000 2636.000000 L 910.250000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NH -- VT)[0]"><path d="M 44.500000 2042.000000 L 44.500000 3358.000000 S 44.500000 3368.000000 54.500000 3368.000000 L 99.600000 3368.000000 S 109.600000 3368.000000 109.600000 3378.000000 L 109.600000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NJ -- NY)[0]"><path d="M 177.333333 2042.000000 L 177.333333 2070.166667 C 177.333333 2089.833333 157.666667 2070.166667 157.666667 2089.833333 L 157.666667 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- PA)[0]"><path d="M 148.066667 2588.000000 L 148.066667 2666.000000 S 148.066667 2676.000000 158.066667 2676.000000 L 166.666667 2676.000000 S 176.666667 2676.000000 176.666667 2686.000000 L 176.666667 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NM -- OK)[1]"><path d="M 624.419048 2042.000000 L 624.419048 2120.000000 S 624.419048 2130.000000 614.419048 2130.000000 L 486.633333 2130.000000 S 476.633333 2130.000000 476.633333 2140.000000 L 476.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TX)[0]"><path d="M 432.633333 2588.000000 L 432.633333 2716.000000 S 432.633333 2726.000000 422.633333 2726.000000 L 289.033333 2726.000000 S 279.033333 2726.000000 279.033333 2736.000000 L 279.033333 3121.200000 C 279.033333 3122.800000 277.433333 3121.200000 277.433333 3122.800000 L 277.433333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- PA)[1]"><path d="M 160.866667 2588.000000 L 160.866667 2616.000000 S 160.866667 2626.000000 170.866667 2626.000000 L 177.333333 2626.000000 S 187.333333 2626.000000 187.333333 2636.000000 L 187.333333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- RI)[0]"><path d="M 178.800000 3084.000000 L 178.800000 3112.000000 S 178.800000 3122.000000 168.800000 3122.000000 L 159.766667 3122.000000 S 149.766667 3122.000000 149.766667 3132.000000 L 149.766667 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(RI -- VT)[1]"><path d="M 144.933333 3330.000000 L 144.933333 3366.333333 C 144.933333 3369.666667 141.600000 3366.333333 141.600000 3369.666667 L 141.600000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NC -- SC)[1]"><path d="M 380.966667 2042.000000 L 380.966667 2079.833333 C 380.966667 2080.166667 380.633333 2079.833333 380.633333 2080.166667 L 380.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SC -- TN)[1]"><path d="M 380.633333 2588.000000 L 380.633333 2619.500000 C 380.633333 2632.500000 367.633333 2619.500000 367.633333 2632.500000 L 367.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- VA)[1]"><path d="M 374.033333 3084.000000 L 374.033333 3171.900000 C 374.033333 3172.100000 374.233333 3171.900000 374.233333 3172.100000 L 374.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ND -- SD)[2]"><path d="M 778.550000 1646.000000 L 778.550000 1828.416667 C 778.550000 1839.583333 767.383333 1828.416667 767.383333 1839.583333 L 767.383333 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OH -- PA)[0]"><path d="M 481.133333 1646.000000 L 481.133333 1674.000000 S 481.133333 1684.000000 471.133333 1684.000000 L 260.000000 1684.000000 S 250.000000 1684.000000 250.000000 1694.000000 L 250.000000 2666.000000 S 250.000000 2676.000000 240.000000 2676.000000 L 229.333333 2676.000000 S 219.333333 2676.000000 219.333333 2686.000000 L 219.333333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- WV)[0]"><path d="M 191.600000 3084.000000 L 191.600000 3408.000000 S 191.600000 3418.000000 201.600000 3418.000000 L 318.483333 3418.000000 S 328.483333 3418.000000 328.483333 3428.000000 L 328.483333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TX)[1]"><path d="M 443.633333 2588.000000 L 443.633333 2766.000000 S 443.633333 2776.000000 433.633333 2776.000000 L 300.033333 2776.000000 S 290.033333 2776.000000 290.033333 2786.000000 L 290.033333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OR -- WA)[0]"><path d="M 948.050000 2042.000000 L 948.050000 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- WV)[1]"><path d="M 204.400000 3084.000000 L 204.400000 3358.000000 S 204.400000 3368.000000 214.400000 3368.000000 L 329.983333 3368.000000 S 339.983333 3368.000000 339.983333 3378.000000 L 339.983333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WY)[2]"><path d="M 767.383333 2042.000000 L 767.383333 2470.000000 S 767.383333 2480.000000 757.383333 2480.000000 L 639.919048 2480.000000 S 629.919048 2480.000000 629.919048 2490.000000 L 629.919048 3358.000000 S 629.919048 3368.000000 639.919048 3368.000000 L 855.335714 3368.000000 S 865.335714 3368.000000 865.335714 3378.000000 L 865.335714 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- VA)[2]"><path d="M 386.833333 3084.000000 L 386.833333 3121.800000 C 386.833333 3122.200000 387.233333 3121.800000 387.233333 3122.200000 L 387.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(UT -- WY)[1]"><path d="M 891.050000 3084.000000 L 891.050000 3364.857143 C 891.050000 3371.142857 884.764286 3364.857143 884.764286 3371.142857 L 884.764286 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(VA -- WV)[2]"><path d="M 383.983333 3330.000000 L 383.983333 3363.250000 C 383.983333 3372.750000 374.483333 3363.250000 374.483333 3372.750000 L 374.483333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><mask id="3754514179" maskUnits="userSpaceOnUse" x="10" y="10" width="963" height="3566">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="AL"><g class="shape" ><rect x="326.000000" y="148.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="358.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AL</text></g><g id="FL"><g class="shape" ><rect x="327.000000" y="294.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="357.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">FL</text></g><g id="GA"><g class="shape" ><rect x="326.000000" y="640.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="359.000000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">GA</text></g><g id="MS"><g class="shape" ><rect x="247.000000" y="836.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="280.000000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MS</text></g><g id="TN"><g class="shape" ><rect x="335.000000" y="3016.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="367.000000" y="3054.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TN</text></g><g id="AK"><g class="shape" ><rect x="737.000000" y="12.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="770.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AK</text></g><g id="AZ"><g class="shape" ><rect x="899.000000" y="836.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="931.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AZ</text></g><g id="CA"><g class="shape" ><rect x="899.000000" y="1182.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="931.500000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CA</text></g><g id="NV"><g class="shape" ><rect x="889.000000" y="1578.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="921.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NV</text></g><g id="NM"><g class="shape" ><rect x="591.000000" y="1974.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="624.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NM</text></g><g id="UT"><g class="shape" ><rect x="859.000000" y="3016.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="891.000000" y="3054.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">UT</text></g><g id="AR"><g class="shape" ><rect x="241.000000" y="294.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="274.000000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">AR</text></g><g id="LA"><g class="shape" ><rect x="243.000000" y="640.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="274.500000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">LA</text></g><g id="MO"><g class="shape" ><rect x="609.000000" y="1182.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="643.000000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MO</text></g><g id="OK"><g class="shape" ><rect x="421.000000" y="2520.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.000000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OK</text></g><g id="TX"><g class="shape" ><rect x="252.000000" y="3262.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="283.500000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TX</text></g><g id="OR"><g class="shape" ><rect x="898.000000" y="1974.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="931.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OR</text></g><g id="CO"><g class="shape" ><rect x="486.000000" y="640.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="519.000000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CO</text></g><g id="KS"><g class="shape" ><rect x="487.000000" y="836.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="518.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KS</text></g><g id="NE"><g class="shape" ><rect x="581.000000" y="1578.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="612.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NE</text></g><g id="WY"><g class="shape" ><rect x="836.000000" y="3508.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="870.000000" y="3546.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WY</text></g><g id="CT"><g class="shape" ><rect x="98.000000" y="1182.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="130.000000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CT</text></g><g id="MA"><g class="shape" ><rect x="97.000000" y="1578.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="130.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MA</text></g><g id="NY"><g class="shape" ><rect x="109.000000" y="2520.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="141.000000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NY</text></g><g id="RI"><g class="shape" ><rect x="106.000000" y="3262.000000" width="58.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="135.000000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">RI</text></g><g id="DE"><g class="shape" ><rect x="186.000000" y="1182.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="217.500000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">DE</text></g><g id="MD"><g class="shape" ><rect x="184.000000" y="1578.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="217.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MD</text></g><g id="NJ"><g class="shape" ><rect x="156.000000" y="1974.000000" width="62.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="187.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NJ</text></g><g id="PA"><g class="shape" ><rect x="166.000000" y="3016.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="198.000000" y="3054.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">PA</text></g><g id="NC"><g class="shape" ><rect x="338.000000" y="1974.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="370.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NC</text></g><g id="SC"><g class="shape" ><rect x="338.000000" y="2520.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="369.500000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SC</text></g><g id="HI"><g class="shape" ><rect x="658.000000" y="12.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="687.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">HI</text></g><g id="ID"><g class="shape" ><rect x="820.000000" y="836.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="849.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ID</text></g><g id="MT"><g class="shape" ><rect x="697.000000" y="1182.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="730.000000" y="1220.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MT</text></g><g id="WA"><g class="shape" ><rect x="902.000000" y="3262.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="936.500000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WA</text></g><g id="IL"><g class="shape" ><rect x="823.000000" y="12.000000" width="57.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="851.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IL</text></g><g id="IN"><g class="shape" ><rect x="822.000000" y="148.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="851.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IN</text></g><g id="IA"><g class="shape" ><rect x="832.000000" y="294.000000" width="59.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="861.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">IA</text></g><g id="MI"><g class="shape" ><rect x="572.000000" y="640.000000" width="61.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="602.500000" y="678.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MI</text></g><g id="KY"><g class="shape" ><rect x="749.000000" y="294.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="780.500000" y="332.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">KY</text></g><g id="WI"><g class="shape" ><rect x="556.000000" y="2520.000000" width="63.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="587.500000" y="2558.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WI</text></g><g id="OH"><g class="shape" ><rect x="464.000000" y="1578.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="497.000000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OH</text></g><g id="MN"><g class="shape" ><rect x="722.000000" y="836.000000" width="67.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="755.500000" y="874.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MN</text></g><g id="SD"><g class="shape" ><rect x="714.000000" y="1974.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="746.000000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SD</text></g><g id="VA"><g class="shape" ><rect x="335.000000" y="3262.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="367.500000" y="3300.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VA</text></g><g id="WV"><g class="shape" ><rect x="316.000000" y="3508.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="350.500000" y="3546.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">WV</text></g><g id="ME"><g class="shape" ><rect x="12.000000" y="1578.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ME</text></g><g id="NH"><g class="shape" ><rect x="22.000000" y="1974.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="2012.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NH</text></g><g id="VT"><g class="shape" ><rect x="93.000000" y="3508.000000" width="64.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="125.000000" y="3546.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">VT</text></g><g id="ND"><g class="shape" ><rect x="729.000000" y="1578.000000" width="65.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="761.500000" y="1616.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ND</text></g><g id="(AL -- FL)[0]"><path d="M 358.466667 216.000000 L 358.466667 292.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(FL -- GA)[0]"><path d="M 348.300000 362.000000 L 348.300000 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(GA -- MS)[0]"><path d="M 348.300000 708.000000 L 348.300000 786.000000 S 348.300000 796.000000 338.300000 796.000000 L 307.300000 796.000000 S 297.300000 796.000000 297.300000 806.000000 L 297.300000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- TN)[0]"><path d="M 274.200000 904.000000 L 274.200000 2666.000000 S 274.200000 2676.000000 284.200000 2676.000000 L 333.633333 2676.000000 S 343.633333 2676.000000 343.633333 2686.000000 L 343.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(AZ -- CA)[0]"><path d="M 932.383333 904.000000 L 932.383333 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CA -- NV)[0]"><path d="M 921.550000 1250.000000 L 921.550000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- NM)[0]"><path d="M 902.050000 1646.000000 L 902.050000 1774.000000 S 902.050000 1784.000000 892.050000 1784.000000 L 645.419048 1784.000000 S 635.419048 1784.000000 635.419048 1794.000000 L 635.419048 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NM -- UT)[0]"><path d="M 640.919048 2042.000000 L 640.919048 2616.000000 S 640.919048 2626.000000 650.919048 2626.000000 L 874.650000 2626.000000 S 884.650000 2626.000000 884.650000 2636.000000 L 884.650000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(AR -- LA)[0]"><path d="M 274.800000 362.000000 L 274.800000 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(LA -- MS)[0]"><path d="M 264.300000 708.000000 L 264.300000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- MO)[0]"><path d="M 300.600000 904.000000 L 300.600000 1032.000000 S 300.600000 1042.000000 310.600000 1042.000000 L 610.466667 1042.000000 S 620.466667 1042.000000 620.466667 1052.000000 L 620.466667 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- OK)[0]"><path d="M 618.847619 1250.000000 L 618.847619 1278.000000 S 618.847619 1288.000000 608.847619 1288.000000 L 442.633333 1288.000000 S 432.633333 1288.000000 432.633333 1298.000000 L 432.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TN)[0]"><path d="M 454.633333 2588.000000 L 454.633333 2816.000000 S 454.633333 2826.000000 444.633333 2826.000000 L 385.633333 2826.000000 S 375.633333 2826.000000 375.633333 2836.000000 L 375.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- TX)[0]"><path d="M 348.433333 3084.000000 L 348.433333 3162.000000 S 348.433333 3172.000000 338.433333 3172.000000 L 312.633333 3172.000000 S 302.633333 3172.000000 302.633333 3182.000000 L 302.633333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CA -- NV)[1]"><path d="M 943.216667 1250.000000 L 943.216667 1285.291667 C 943.216667 1290.708333 937.800000 1285.291667 937.800000 1290.708333 L 937.800000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- OR)[0]"><path d="M 915.050000 1646.000000 L 915.050000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CO -- KS)[0]"><path d="M 519.133333 708.000000 L 519.133333 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KS -- NE)[0]"><path d="M 508.633333 904.000000 L 508.633333 1328.000000 S 508.633333 1338.000000 518.633333 1338.000000 L 584.519048 1338.000000 S 594.519048 1338.000000 594.519048 1348.000000 L 594.519048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- NM)[0]"><path d="M 613.419048 1646.000000 L 613.419048 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NM -- OK)[0]"><path d="M 607.919048 2042.000000 L 607.919048 2070.000000 S 607.919048 2080.000000 597.919048 2080.000000 L 475.633333 2080.000000 S 465.633333 2080.000000 465.633333 2090.000000 L 465.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- UT)[0]"><path d="M 476.633333 2588.000000 L 476.633333 2966.000000 S 476.633333 2976.000000 486.633333 2976.000000 L 861.850000 2976.000000 S 871.850000 2976.000000 871.850000 2986.000000 L 871.850000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(UT -- WY)[0]"><path d="M 875.050000 3084.000000 L 875.050000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(CT -- MA)[0]"><path d="M 130.500000 1250.000000 L 130.500000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MA -- NY)[0]"><path d="M 141.666667 1646.000000 L 141.666667 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- RI)[0]"><path d="M 122.466667 2588.000000 L 122.466667 3121.150000 C 122.466667 3122.850000 120.766667 3121.150000 120.766667 3122.850000 L 120.766667 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(DE -- MD)[0]"><path d="M 217.500000 1250.000000 L 217.500000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MD -- NJ)[0]"><path d="M 206.333333 1646.000000 L 206.333333 1674.666667 C 206.333333 1693.333333 187.666667 1674.666667 187.666667 1693.333333 L 187.666667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NJ -- PA)[0]"><path d="M 198.000000 2042.000000 L 198.000000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(FL -- GA)[1]"><path d="M 368.633333 362.000000 L 368.633333 399.166667 C 368.633333 400.833333 370.300000 399.166667 370.300000 400.833333 L 370.300000 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(GA -- NC)[0]"><path d="M 370.300000 708.000000 L 370.300000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NC -- SC)[0]"><path d="M 359.633333 2042.000000 L 359.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SC -- TN)[0]"><path d="M 359.633333 2588.000000 L 359.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ID -- MT)[0]"><path d="M 850.383333 904.000000 L 850.383333 1132.000000 S 850.383333 1142.000000 840.383333 1142.000000 L 740.133333 1142.000000 S 730.133333 1142.000000 730.133333 1152.000000 L 730.133333 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MT -- NV)[0]"><path d="M 741.133333 1250.000000 L 741.133333 1278.000000 S 741.133333 1288.000000 751.133333 1288.000000 L 895.300000 1288.000000 S 905.300000 1288.000000 905.300000 1298.000000 L 905.300000 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- OR)[1]"><path d="M 928.050000 1646.000000 L 928.050000 1732.250000 C 928.050000 1735.750000 931.550000 1732.250000 931.550000 1735.750000 L 931.550000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OR -- UT)[0]"><path d="M 915.050000 2042.000000 L 915.050000 2471.200000 C 915.050000 2488.800000 897.450000 2471.200000 897.450000 2488.800000 L 897.450000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(UT -- WA)[0]"><path d="M 907.050000 3084.000000 L 907.050000 3113.000000 C 907.050000 3131.000000 925.050000 3113.000000 925.050000 3131.000000 L 925.050000 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(WA -- WY)[0]"><path d="M 936.550000 3330.000000 L 936.550000 3408.000000 S 936.550000 3418.000000 926.550000 3418.000000 L 904.478571 3418.000000 S 894.478571 3418.000000 894.478571 3428.000000 L 894.478571 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IL -- IN)[0]"><path d="M 852.150000 80.000000 L 852.150000 146.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IN -- IA)[0]"><path d="M 861.983333 216.000000 L 861.983333 292.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IA -- MI)[0]"><path d="M 852.150000 362.000000 L 852.150000 490.000000 S 852.150000 500.000000 842.150000 500.000000 L 627.883333 500.000000 S 617.883333 500.000000 617.883333 510.000000 L 617.883333 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MI -- KY)[0]"><path d="M 602.633333 638.000000 L 602.633333 460.000000 S 602.633333 450.000000 612.633333 450.000000 L 764.683333 450.000000 S 774.683333 450.000000 774.683333 440.000000 L 774.683333 362.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KY -- MO)[0]"><path d="M 787.283333 362.000000 L 787.283333 540.000000 S 787.283333 550.000000 777.283333 550.000000 L 653.133333 550.000000 S 643.133333 550.000000 643.133333 560.000000 L 643.133333 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- WI)[0]"><path d="M 667.419048 1250.000000 L 667.419048 2270.000000 S 667.419048 2280.000000 657.419048 2280.000000 L 579.519048 2280.000000 S 569.519048 2280.000000 569.519048 2290.000000 L 569.519048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IN -- KY)[0]"><path d="M 842.316667 216.000000 L 842.316667 244.000000 S 842.316667 254.000000 832.316667 254.000000 L 790.983333 254.000000 S 780.983333 254.000000 780.983333 264.000000 L 780.983333 292.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KY -- MI)[0]"><path d="M 762.083333 362.000000 L 762.083333 390.000000 S 762.083333 400.000000 752.083333 400.000000 L 597.383333 400.000000 S 587.383333 400.000000 587.383333 410.000000 L 587.383333 638.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MI -- OH)[0]"><path d="M 592.466667 708.000000 L 592.466667 736.000000 S 592.466667 746.000000 582.466667 746.000000 L 486.633333 746.000000 S 476.633333 746.000000 476.633333 756.000000 L 476.633333 1335.750000 C 476.633333 1340.250000 481.133333 1335.750000 481.133333 1340.250000 L 481.133333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(IA -- MN)[0]"><path d="M 871.816667 362.000000 L 871.816667 590.000000 S 871.816667 600.000000 861.816667 600.000000 L 777.550000 600.000000 S 767.550000 600.000000 767.550000 610.000000 L 767.550000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MN -- MO)[0]"><path d="M 756.383333 904.000000 L 756.383333 1032.000000 S 756.383333 1042.000000 746.383333 1042.000000 L 664.466667 1042.000000 S 654.466667 1042.000000 654.466667 1052.000000 L 654.466667 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- NE)[0]"><path d="M 638.276190 1250.000000 L 638.276190 1428.000000 S 638.276190 1438.000000 628.276190 1438.000000 L 617.119048 1438.000000 S 607.119048 1438.000000 607.119048 1448.000000 L 607.119048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- SD)[0]"><path d="M 623.919048 1646.000000 L 623.919048 1724.000000 S 623.919048 1734.000000 633.919048 1734.000000 L 714.716667 1734.000000 S 724.716667 1734.000000 724.716667 1744.000000 L 724.716667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WI)[0]"><path d="M 746.050000 2042.000000 L 746.050000 2320.000000 S 746.050000 2330.000000 736.050000 2330.000000 L 592.119048 2330.000000 S 582.119048 2330.000000 582.119048 2340.000000 L 582.119048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KS -- MO)[0]"><path d="M 529.633333 904.000000 L 529.633333 932.000000 S 529.633333 942.000000 539.633333 942.000000 L 621.800000 942.000000 S 631.800000 942.000000 631.800000 952.000000 L 631.800000 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- NE)[1]"><path d="M 647.990476 1250.000000 L 647.990476 1478.000000 S 647.990476 1488.000000 637.990476 1488.000000 L 629.719048 1488.000000 S 619.719048 1488.000000 619.719048 1498.000000 L 619.719048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- OK)[0]"><path d="M 592.419048 1646.000000 L 592.419048 1724.000000 S 592.419048 1734.000000 582.419048 1734.000000 L 453.633333 1734.000000 S 443.633333 1734.000000 443.633333 1744.000000 L 443.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(KY -- MO)[1]"><path d="M 799.883333 362.000000 L 799.883333 1082.000000 S 799.883333 1092.000000 789.883333 1092.000000 L 675.800000 1092.000000 S 665.800000 1092.000000 665.800000 1102.000000 L 665.800000 1180.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- OH)[0]"><path d="M 628.561905 1250.000000 L 628.561905 1378.000000 S 628.561905 1388.000000 618.561905 1388.000000 L 524.133333 1388.000000 S 514.133333 1388.000000 514.133333 1398.000000 L 514.133333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OH -- TN)[0]"><path d="M 497.633333 1646.000000 L 497.633333 2916.000000 S 497.633333 2926.000000 487.633333 2926.000000 L 401.633333 2926.000000 S 391.633333 2926.000000 391.633333 2936.000000 L 391.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- VA)[0]"><path d="M 361.233333 3084.000000 L 361.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(VA -- WV)[0]"><path d="M 351.483333 3330.000000 L 351.483333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(LA -- MS)[1]"><path d="M 285.300000 708.000000 L 285.300000 743.750000 C 285.300000 748.250000 280.800000 743.750000 280.800000 748.250000 L 280.800000 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- TX)[0]"><path d="M 261.000000 904.000000 L 261.000000 3170.083333 C 261.000000 3173.916667 264.833333 3170.083333 264.833333 3173.916667 L 264.833333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ME -- NH)[0]"><path d="M 44.500000 1646.000000 L 44.500000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MD -- PA)[0]"><path d="M 228.666667 1646.000000 L 228.666667 2616.000000 S 228.666667 2626.000000 218.666667 2626.000000 L 218.666667 2626.000000 S 208.666667 2626.000000 208.666667 2636.000000 L 208.666667 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- VA)[0]"><path d="M 217.200000 3084.000000 L 217.200000 3212.000000 S 217.200000 3222.000000 227.200000 3222.000000 L 338.233333 3222.000000 S 348.233333 3222.000000 348.233333 3232.000000 L 348.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(VA -- WV)[1]"><path d="M 367.733333 3330.000000 L 367.733333 3415.625000 C 367.733333 3420.375000 362.983333 3415.625000 362.983333 3420.375000 L 362.983333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MA -- NH)[0]"><path d="M 119.333333 1646.000000 L 119.333333 1674.000000 S 119.333333 1684.000000 109.333333 1684.000000 L 76.166667 1684.000000 S 66.166667 1684.000000 66.166667 1694.000000 L 66.166667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NH -- NY)[0]"><path d="M 66.166667 2042.000000 L 66.166667 2070.000000 S 66.166667 2080.000000 76.166667 2080.000000 L 115.666667 2080.000000 S 125.666667 2080.000000 125.666667 2090.000000 L 125.666667 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- RI)[1]"><path d="M 135.266667 2588.000000 L 135.266667 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(RI -- VT)[0]"><path d="M 125.600000 3330.000000 L 125.600000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MI -- MN)[0]"><path d="M 612.800000 708.000000 L 612.800000 736.000000 S 612.800000 746.000000 622.800000 746.000000 L 735.216667 746.000000 S 745.216667 746.000000 745.216667 756.000000 L 745.216667 834.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MN -- OH)[0]"><path d="M 739.633333 904.000000 L 739.633333 982.000000 S 739.633333 992.000000 729.633333 992.000000 L 507.633333 992.000000 S 497.633333 992.000000 497.633333 1002.000000 L 497.633333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OH -- WI)[0]"><path d="M 514.133333 1646.000000 L 514.133333 1924.000000 S 514.133333 1934.000000 524.133333 1934.000000 L 877.550000 1934.000000 S 887.550000 1934.000000 887.550000 1944.000000 L 887.550000 2420.000000 S 887.550000 2430.000000 877.550000 2430.000000 L 617.319048 2430.000000 S 607.319048 2430.000000 607.319048 2440.000000 L 607.319048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MN -- ND)[0]"><path d="M 773.133333 904.000000 L 773.133333 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ND -- SD)[0]"><path d="M 746.050000 1646.000000 L 746.050000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WI)[1]"><path d="M 756.716667 2042.000000 L 756.716667 2370.000000 S 756.716667 2380.000000 746.716667 2380.000000 L 604.719048 2380.000000 S 594.719048 2380.000000 594.719048 2390.000000 L 594.719048 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MS -- TN)[1]"><path d="M 287.400000 904.000000 L 287.400000 2616.000000 S 287.400000 2626.000000 297.400000 2626.000000 L 341.633333 2626.000000 S 351.633333 2626.000000 351.633333 2636.000000 L 351.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MO -- NE)[2]"><path d="M 657.704762 1250.000000 L 657.704762 1528.000000 S 657.704762 1538.000000 647.704762 1538.000000 L 642.319048 1538.000000 S 632.319048 1538.000000 632.319048 1548.000000 L 632.319048 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- OK)[1]"><path d="M 602.919048 1646.000000 L 602.919048 1774.000000 S 602.919048 1784.000000 592.919048 1784.000000 L 464.633333 1784.000000 S 454.633333 1784.000000 454.633333 1794.000000 L 454.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TN)[1]"><path d="M 465.633333 2588.000000 L 465.633333 2866.000000 S 465.633333 2876.000000 455.633333 2876.000000 L 393.633333 2876.000000 S 383.633333 2876.000000 383.633333 2886.000000 L 383.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(MT -- ND)[0]"><path d="M 719.133333 1250.000000 L 719.133333 1328.000000 S 719.133333 1338.000000 729.133333 1338.000000 L 741.466667 1338.000000 S 751.466667 1338.000000 751.466667 1348.000000 L 751.466667 1576.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ND -- SD)[1]"><path d="M 762.300000 1646.000000 L 762.300000 1881.208333 C 762.300000 1886.791667 756.716667 1881.208333 756.716667 1886.791667 L 756.716667 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WY)[0]"><path d="M 724.716667 2042.000000 L 724.716667 2170.000000 S 724.716667 2180.000000 714.716667 2180.000000 L 544.919048 2180.000000 S 534.919048 2180.000000 534.919048 2190.000000 L 534.919048 3458.000000 S 534.919048 3468.000000 544.919048 3468.000000 L 835.907143 3468.000000 S 845.907143 3468.000000 845.907143 3478.000000 L 845.907143 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NE -- SD)[1]"><path d="M 634.419048 1646.000000 L 634.419048 1674.000000 S 634.419048 1684.000000 644.419048 1684.000000 L 725.383333 1684.000000 S 735.383333 1684.000000 735.383333 1694.000000 L 735.383333 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WY)[1]"><path d="M 735.383333 2042.000000 L 735.383333 2220.000000 S 735.383333 2230.000000 725.383333 2230.000000 L 555.919048 2230.000000 S 545.919048 2230.000000 545.919048 2240.000000 L 545.919048 3408.000000 S 545.919048 3418.000000 555.919048 3418.000000 L 845.621429 3418.000000 S 855.621429 3418.000000 855.621429 3428.000000 L 855.621429 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NV -- OR)[2]"><path d="M 941.050000 1646.000000 L 941.050000 1680.500000 C 941.050000 1687.500000 948.050000 1680.500000 948.050000 1687.500000 L 948.050000 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OR -- UT)[1]"><path d="M 931.550000 2042.000000 L 931.550000 2616.000000 S 931.550000 2626.000000 921.550000 2626.000000 L 920.250000 2626.000000 S 910.250000 2626.000000 910.250000 2636.000000 L 910.250000 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NH -- VT)[0]"><path d="M 44.500000 2042.000000 L 44.500000 3358.000000 S 44.500000 3368.000000 54.500000 3368.000000 L 99.600000 3368.000000 S 109.600000 3368.000000 109.600000 3378.000000 L 109.600000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NJ -- NY)[0]"><path d="M 177.333333 2042.000000 L 177.333333 2070.166667 C 177.333333 2089.833333 157.666667 2070.166667 157.666667 2089.833333 L 157.666667 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- PA)[0]"><path d="M 148.066667 2588.000000 L 148.066667 2666.000000 S 148.066667 2676.000000 158.066667 2676.000000 L 166.666667 2676.000000 S 176.666667 2676.000000 176.666667 2686.000000 L 176.666667 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NM -- OK)[1]"><path d="M 624.419048 2042.000000 L 624.419048 2120.000000 S 624.419048 2130.000000 614.419048 2130.000000 L 486.633333 2130.000000 S 476.633333 2130.000000 476.633333 2140.000000 L 476.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TX)[0]"><path d="M 432.633333 2588.000000 L 432.633333 2716.000000 S 432.633333 2726.000000 422.633333 2726.000000 L 289.033333 2726.000000 S 279.033333 2726.000000 279.033333 2736.000000 L 279.033333 3121.200000 C 279.033333 3122.800000 277.433333 3121.200000 277.433333 3122.800000 L 277.433333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NY -- PA)[1]"><path d="M 160.866667 2588.000000 L 160.866667 2616.000000 S 160.866667 2626.000000 170.866667 2626.000000 L 177.333333 2626.000000 S 187.333333 2626.000000 187.333333 2636.000000 L 187.333333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- RI)[0]"><path d="M 178.800000 3084.000000 L 178.800000 3112.000000 S 178.800000 3122.000000 168.800000 3122.000000 L 159.766667 3122.000000 S 149.766667 3122.000000 149.766667 3132.000000 L 149.766667 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(RI -- VT)[1]"><path d="M 144.933333 3330.000000 L 144.933333 3366.333333 C 144.933333 3369.666667 141.600000 3366.333333 141.600000 3369.666667 L 141.600000 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(NC -- SC)[1]"><path d="M 380.966667 2042.000000 L 380.966667 2079.833333 C 380.966667 2080.166667 380.633333 2079.833333 380.633333 2080.166667 L 380.633333 2518.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SC -- TN)[1]"><path d="M 380.633333 2588.000000 L 380.633333 2619.500000 C 380.633333 2632.500000 367.633333 2619.500000 367.633333 2632.500000 L 367.633333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- VA)[1]"><path d="M 374.033333 3084.000000 L 374.033333 3171.900000 C 374.033333 3172.100000 374.233333 3171.900000 374.233333 3172.100000 L 374.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(ND -- SD)[2]"><path d="M 778.550000 1646.000000 L 778.550000 1828.416667 C 778.550000 1839.583333 767.383333 1828.416667 767.383333 1839.583333 L 767.383333 1972.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OH -- PA)[0]"><path d="M 481.133333 1646.000000 L 481.133333 1674.000000 S 481.133333 1684.000000 471.133333 1684.000000 L 260.000000 1684.000000 S 250.000000 1684.000000 250.000000 1694.000000 L 250.000000 2666.000000 S 250.000000 2676.000000 240.000000 2676.000000 L 229.333333 2676.000000 S 219.333333 2676.000000 219.333333 2686.000000 L 219.333333 3014.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- WV)[0]"><path d="M 191.600000 3084.000000 L 191.600000 3408.000000 S 191.600000 3418.000000 201.600000 3418.000000 L 318.483333 3418.000000 S 328.483333 3418.000000 328.483333 3428.000000 L 328.483333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OK -- TX)[1]"><path d="M 443.633333 2588.000000 L 443.633333 2766.000000 S 443.633333 2776.000000 433.633333 2776.000000 L 300.033333 2776.000000 S 290.033333 2776.000000 290.033333 2786.000000 L 290.033333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(OR -- WA)[0]"><path d="M 948.050000 2042.000000 L 948.050000 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(PA -- WV)[1]"><path d="M 204.400000 3084.000000 L 204.400000 3358.000000 S 204.400000 3368.000000 214.400000 3368.000000 L 329.983333 3368.000000 S 339.983333 3368.000000 339.983333 3378.000000 L 339.983333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(SD -- WY)[2]"><path d="M 767.383333 2042.000000 L 767.383333 2470.000000 S 767.383333 2480.000000 757.383333 2480.000000 L 639.919048 2480.000000 S 629.919048 2480.000000 629.919048 2490.000000 L 629.919048 3358.000000 S 629.919048 3368.000000 639.919048 3368.000000 L 855.335714 3368.000000 S 865.335714 3368.000000 865.335714 3378.000000 L 865.335714 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(TN -- VA)[2]"><path d="M 386.833333 3084.000000 L 386.833333 3121.800000 C 386.833333 3122.200000 387.233333 3121.800000 387.233333 3122.200000 L 387.233333 3260.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(UT -- WY)[1]"><path d="M 891.050000 3084.000000 L 891.050000 3364.857143 C 891.050000 3371.142857 884.764286 3364.857143 884.764286 3371.142857 L 884.764286 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><g id="(VA -- WV)[2]"><path d="M 383.983333 3330.000000 L 383.983333 3363.250000 C 383.983333 3372.750000 374.483333 3363.250000 374.483333 3372.750000 L 374.483333 3506.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#3754514179)" /></g><mask id="3754514179" maskUnits="userSpaceOnUse" x="10" y="10" width="963" height="3566">
 <rect x="10" y="10" width="963" height="3566" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/container_icon_label/dagre/sketch.exp.svg b/e2etests/testdata/todo/container_icon_label/dagre/sketch.exp.svg
index 94a4d7bcd..901fee887 100644
--- a/e2etests/testdata/todo/container_icon_label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_icon_label/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="177" height="626" viewBox="-2 -26 177 626"><rect x="-2.000000" y="-26.000000" width="177.000000" height="626.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 177 626"><svg id="d2-svg" width="177" height="626" viewBox="-2 -26 177 626"><rect x="-2.000000" y="-26.000000" width="177.000000" height="626.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="43.000000" width="173.000000" height="555.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="-5.000000" y="-26.000000" width="64" height="64" /><text x="120.000000" y="30.000000" class="text fill-N1" style="text-anchor:middle;font-size:30px">Big font</text></g><g id="a.a"><g class="shape" ><rect x="20.000000" y="107.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="95.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">a</text></g><g id="a.b"><g class="shape" ><rect x="60.000000" y="337.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="375.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="60.000000" y="503.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="541.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="a.a.a"><g class="shape" ><rect x="60.000000" y="139.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="177.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 86.500000 239.500000 C 86.500000 277.500000 86.500000 297.500000 86.500000 333.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3160218901)" /></g><g id="a.(b -&gt; c)[0]"><path d="M 86.500000 405.500000 C 86.500000 443.500000 86.500000 463.500000 86.500000 499.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3160218901)" /></g><mask id="3160218901" maskUnits="userSpaceOnUse" x="-2" y="-26" width="177" height="626">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="43.000000" width="173.000000" height="555.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="-5.000000" y="-26.000000" width="64" height="64" /><text x="120.000000" y="30.000000" class="text fill-N1" style="text-anchor:middle;font-size:30px">Big font</text></g><g id="a.a"><g class="shape" ><rect x="20.000000" y="107.000000" width="133.000000" height="130.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="95.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">a</text></g><g id="a.b"><g class="shape" ><rect x="60.000000" y="337.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="375.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="60.000000" y="503.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="86.500000" y="541.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="a.a.a"><g class="shape" ><rect x="60.000000" y="139.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.500000" y="177.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 86.500000 239.500000 C 86.500000 277.500000 86.500000 297.500000 86.500000 333.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3160218901)" /></g><g id="a.(b -&gt; c)[0]"><path d="M 86.500000 405.500000 C 86.500000 443.500000 86.500000 463.500000 86.500000 499.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3160218901)" /></g><mask id="3160218901" maskUnits="userSpaceOnUse" x="-2" y="-26" width="177" height="626">
 <rect x="-2" y="-26" width="177" height="626" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg b/e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg
index 59b73aada..fc3608eab 100644
--- a/e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_icon_label/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="257" height="566" viewBox="10 10 257 566"><rect x="10.000000" y="10.000000" width="257.000000" height="566.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 257 566"><svg id="d2-svg" width="257" height="566" viewBox="10 10 257 566"><rect x="10.000000" y="10.000000" width="257.000000" height="566.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="253.000000" height="562.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="17.000000" y="17.000000" width="64" height="64" /><text x="212.000000" y="47.000000" class="text fill-N1" style="text-anchor:middle;font-size:30px">Big font</text></g><g id="a.a"><g class="shape" ><rect x="62.000000" y="86.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="115.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">a</text></g><g id="a.b"><g class="shape" ><rect x="112.000000" y="322.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="360.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="112.000000" y="458.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="496.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="a.a.a"><g class="shape" ><rect x="112.000000" y="136.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="174.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 138.500000 254.000000 L 138.500000 318.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3289018935)" /></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 390.000000 L 138.500000 454.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3289018935)" /></g><mask id="3289018935" maskUnits="userSpaceOnUse" x="10" y="10" width="257" height="566">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="253.000000" height="562.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="17.000000" y="17.000000" width="64" height="64" /><text x="212.000000" y="47.000000" class="text fill-N1" style="text-anchor:middle;font-size:30px">Big font</text></g><g id="a.a"><g class="shape" ><rect x="62.000000" y="86.000000" width="153.000000" height="166.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="115.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">a</text></g><g id="a.b"><g class="shape" ><rect x="112.000000" y="322.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="360.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a.c"><g class="shape" ><rect x="112.000000" y="458.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="496.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="a.a.a"><g class="shape" ><rect x="112.000000" y="136.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="138.500000" y="174.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="a.(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 138.500000 254.000000 L 138.500000 318.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3289018935)" /></g><g id="a.(b -&gt; c)[0]"><path d="M 138.500000 390.000000 L 138.500000 454.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3289018935)" /></g><mask id="3289018935" maskUnits="userSpaceOnUse" x="10" y="10" width="257" height="566">
 <rect x="10" y="10" width="257" height="566" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/container_label_edge_adjustment/dagre/sketch.exp.svg b/e2etests/testdata/todo/container_label_edge_adjustment/dagre/sketch.exp.svg
index 52ee3cb3d..dd9eea68d 100644
--- a/e2etests/testdata/todo/container_label_edge_adjustment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_label_edge_adjustment/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="409" height="502" viewBox="-2 -2 409 502"><rect x="-2.000000" y="-2.000000" width="409.000000" height="502.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 409 502"><svg id="d2-svg" width="409" height="502" viewBox="-2 -2 409 502"><rect x="-2.000000" y="-2.000000" width="409.000000" height="502.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="14.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="40.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><path d="M 66 251 C 66 252 63 254 61 254 C 27 256 1 273 1 293 C 1 315 31 333 68 333 H 324 C 364 333 397 314 397 291 C 397 269 367 251 328 250 C 325 250 323 249 322 247 C 313 225 274 208 227 208 C 197 208 169 215 152 226 C 150 227 147 228 145 227 C 138 226 131 225 123 225 C 93 224 68 236 66 251 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="198.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a container label</text></g><g id="d"><g class="shape" ><rect x="182.000000" y="432.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="209.000000" y="470.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="127.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="240.000000" y="0.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="265.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="351.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="378.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="b.c"><g class="shape" ><rect x="183.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="209.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b.c)[0]"><marker id="mk-3366198419" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" class="connection fill-B1" stroke-width="8" /> </marker><path d="M 40.000000 71.000000 C 40.000000 106.000000 68.500000 184.097041 171.525548 249.516606" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><g id="(b.c -&gt; d)[0]"><path d="M 209.000000 307.500000 C 209.000000 326.100000 209.000000 392.000000 209.000000 419.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><g id="(e -&gt; b.c)[0]"><path d="M 153.000000 71.000000 C 153.000000 106.000000 159.800000 180.100000 181.352907 224.790587" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><g id="(f -&gt; b)[0]"><marker id="mk-925556245" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 265.000000 71.000000 C 265.000000 106.000000 265.000000 126.000000 265.000000 153.000000" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-925556245)" mask="url(#4122629787)" /></g><g id="(g -&gt; b)[0]"><path d="M 377.500000 71.000000 C 377.500000 106.000000 377.600000 145.200000 377.955480 249.000076" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><mask id="4122629787" maskUnits="userSpaceOnUse" x="-2" y="-2" width="409" height="502">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="14.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="40.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><path d="M 66 251 C 66 252 63 254 61 254 C 27 256 1 273 1 293 C 1 315 31 333 68 333 H 324 C 364 333 397 314 397 291 C 397 269 367 251 328 250 C 325 250 323 249 322 247 C 313 225 274 208 227 208 C 197 208 169 215 152 226 C 150 227 147 228 145 227 C 138 226 131 225 123 225 C 93 224 68 236 66 251 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="198.500000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a container label</text></g><g id="d"><g class="shape" ><rect x="182.000000" y="432.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="209.000000" y="470.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="127.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="153.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="240.000000" y="0.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="265.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="351.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="378.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="b.c"><g class="shape" ><rect x="183.000000" y="236.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="209.500000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b.c)[0]"><marker id="mk-3366198419" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" class="connection fill-B1" stroke-width="8" /> </marker><path d="M 40.000000 71.000000 C 40.000000 106.000000 68.500000 184.097041 171.525548 249.516606" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><g id="(b.c -&gt; d)[0]"><path d="M 209.000000 307.500000 C 209.000000 326.100000 209.000000 392.000000 209.000000 419.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><g id="(e -&gt; b.c)[0]"><path d="M 153.000000 71.000000 C 153.000000 106.000000 159.800000 180.100000 181.352907 224.790587" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><g id="(f -&gt; b)[0]"><marker id="mk-925556245" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 265.000000 71.000000 C 265.000000 106.000000 265.000000 126.000000 265.000000 153.000000" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-925556245)" mask="url(#4122629787)" /></g><g id="(g -&gt; b)[0]"><path d="M 377.500000 71.000000 C 377.500000 106.000000 377.600000 145.200000 377.955480 249.000076" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4122629787)" /></g><mask id="4122629787" maskUnits="userSpaceOnUse" x="-2" y="-2" width="409" height="502">
 <rect x="-2" y="-2" width="409" height="502" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/container_label_edge_adjustment/elk/sketch.exp.svg b/e2etests/testdata/todo/container_label_edge_adjustment/elk/sketch.exp.svg
index 03387c65f..4bc568976 100644
--- a/e2etests/testdata/todo/container_label_edge_adjustment/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_label_edge_adjustment/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="275" height="512" viewBox="10 10 275 512"><rect x="10.000000" y="10.000000" width="275.000000" height="512.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 275 512"><svg id="d2-svg" width="275" height="512" viewBox="10 10 275 512"><rect x="10.000000" y="10.000000" width="275.000000" height="512.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><path d="M 52 271 C 52 273 51 275 50 275 C 37 277 27 300 27 327 C 27 356 39 379 53 379 H 153 C 169 379 182 354 182 323 C 182 294 170 270 155 268 C 154 268 153 267 153 264 C 150 234 134 212 116 212 C 104 212 94 221 87 236 C 86 238 85 238 84 238 C 81 236 79 235 75 235 C 62 236 53 251 52 271 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="103.382500" y="302.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a container label</text></g><g id="d"><g class="shape" ><rect x="75.000000" y="454.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.000000" y="492.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="158.000000" y="12.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="183.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="229.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="256.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="b.c"><g class="shape" ><rect x="76.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="102.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b.c)[0]"><marker id="mk-3366198419" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" class="connection fill-B1" stroke-width="8" /> </marker><path d="M 38.500000 83.000000 L 38.500000 108.000000 S 38.500000 118.000000 48.500000 118.000000 L 83.833333 118.000000 S 93.833333 118.000000 93.833333 128.000000 L 93.833333 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><g id="(b.c -&gt; d)[0]"><path d="M 102.666667 334.000000 L 102.666667 441.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><g id="(e -&gt; b.c)[0]"><path d="M 111.500000 83.000000 L 111.500000 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><g id="(f -&gt; b)[0]"><marker id="mk-925556245" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 183.500000 83.000000 L 183.500000 108.000000 S 183.500000 118.000000 173.500000 118.000000 L 131.500000 118.000000 S 121.500000 118.000000 121.552631 127.999861 L 121.931580 200.000180" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-925556245)" mask="url(#4127103521)" /></g><g id="(g -&gt; b)[0]"><path d="M 256.000000 83.000000 L 256.000000 158.000000 S 256.000000 168.000000 246.000000 168.000000 L 141.500000 168.000000 S 131.500000 168.000000 131.400005 177.999500 L 131.129994 205.000650" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><mask id="4127103521" maskUnits="userSpaceOnUse" x="10" y="10" width="275" height="512">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><path d="M 52 271 C 52 273 51 275 50 275 C 37 277 27 300 27 327 C 27 356 39 379 53 379 H 153 C 169 379 182 354 182 323 C 182 294 170 270 155 268 C 154 268 153 267 153 264 C 150 234 134 212 116 212 C 104 212 94 221 87 236 C 86 238 85 238 84 238 C 81 236 79 235 75 235 C 62 236 53 251 52 271 Z" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="103.382500" y="302.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">a container label</text></g><g id="d"><g class="shape" ><rect x="75.000000" y="454.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.000000" y="492.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="158.000000" y="12.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="183.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="229.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="256.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="b.c"><g class="shape" ><rect x="76.000000" y="263.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="102.500000" y="301.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b.c)[0]"><marker id="mk-3366198419" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" class="connection fill-B1" stroke-width="8" /> </marker><path d="M 38.500000 83.000000 L 38.500000 108.000000 S 38.500000 118.000000 48.500000 118.000000 L 83.833333 118.000000 S 93.833333 118.000000 93.833333 128.000000 L 93.833333 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><g id="(b.c -&gt; d)[0]"><path d="M 102.666667 334.000000 L 102.666667 441.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><g id="(e -&gt; b.c)[0]"><path d="M 111.500000 83.000000 L 111.500000 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><g id="(f -&gt; b)[0]"><marker id="mk-925556245" markerWidth="88.000000" markerHeight="56.000000" refX="76.000000" refY="28.000000" viewBox="0.000000 0.000000 88.000000 56.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,28.000000 44.000000,0.000000 88.000000,28.000000 44.000000,56.000000" fill="red" class="connection" stroke-width="8" /> </marker><path d="M 183.500000 83.000000 L 183.500000 108.000000 S 183.500000 118.000000 173.500000 118.000000 L 131.500000 118.000000 S 121.500000 118.000000 121.552631 127.999861 L 121.931580 200.000180" stroke="red" fill="none" class="connection" style="stroke-width:8;" marker-end="url(#mk-925556245)" mask="url(#4127103521)" /></g><g id="(g -&gt; b)[0]"><path d="M 256.000000 83.000000 L 256.000000 158.000000 S 256.000000 168.000000 246.000000 168.000000 L 141.500000 168.000000 S 131.500000 168.000000 131.400005 177.999500 L 131.129994 205.000650" fill="none" class="connection stroke-B1" style="stroke-width:8;" marker-end="url(#mk-3366198419)" mask="url(#4127103521)" /></g><mask id="4127103521" maskUnits="userSpaceOnUse" x="10" y="10" width="275" height="512">
 <rect x="10" y="10" width="275" height="512" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/container_label_edge_adjustment2/dagre/sketch.exp.svg b/e2etests/testdata/todo/container_label_edge_adjustment2/dagre/sketch.exp.svg
index e69303921..3fe7d7567 100644
--- a/e2etests/testdata/todo/container_label_edge_adjustment2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_label_edge_adjustment2/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="136" height="336" viewBox="-2 -2 136 336"><rect x="-2.000000" y="-2.000000" width="136.000000" height="336.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 136 336"><svg id="d2-svg" width="136" height="336" viewBox="-2 -2 136 336"><rect x="-2.000000" y="-2.000000" width="136.000000" height="336.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="40.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="207.000000" width="132.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="66.000000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bar</text></g><g id="y.z"><g class="shape" ><rect x="40.000000" y="236.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.000000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; y)[0]"><marker id="mk-2256124137" markerWidth="22.000000" markerHeight="14.000000" refX="19.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 66.000000 68.000000 C 66.000000 106.000000 66.000000 126.000000 66.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-2256124137)" mask="url(#463785973)" /><text x="80.000000" y="158.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><mask id="463785973" maskUnits="userSpaceOnUse" x="-2" y="-2" width="136" height="336">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="40.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="207.000000" width="132.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="66.000000" y="194.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bar</text></g><g id="y.z"><g class="shape" ><rect x="40.000000" y="236.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.000000" y="274.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; y)[0]"><marker id="mk-2256124137" markerWidth="22.000000" markerHeight="14.000000" refX="19.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 66.000000 68.000000 C 66.000000 106.000000 66.000000 126.000000 66.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-2256124137)" mask="url(#463785973)" /><text x="80.000000" y="158.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><mask id="463785973" maskUnits="userSpaceOnUse" x="-2" y="-2" width="136" height="336">
 <rect x="-2" y="-2" width="136" height="336" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/container_label_edge_adjustment2/elk/sketch.exp.svg b/e2etests/testdata/todo/container_label_edge_adjustment2/elk/sketch.exp.svg
index ce86ef045..08cef59d0 100644
--- a/e2etests/testdata/todo/container_label_edge_adjustment2/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_label_edge_adjustment2/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="156" height="306" viewBox="10 10 156 306"><rect x="10.000000" y="10.000000" width="156.000000" height="306.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 156 306"><svg id="d2-svg" width="156" height="306" viewBox="10 10 156 306"><rect x="10.000000" y="10.000000" width="156.000000" height="306.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -31,27 +31,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="x"><g class="shape" ><rect x="61.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="12.000000" y="148.000000" width="152.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="88.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bar</text></g><g id="y.z"><g class="shape" ><rect x="62.000000" y="198.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.000000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; y)[0]"><marker id="mk-2256124137" markerWidth="22.000000" markerHeight="14.000000" refX="19.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.000000 80.000000 L 88.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-2256124137)" mask="url(#1637840783)" /><text x="102.000000" y="140.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><mask id="1637840783" maskUnits="userSpaceOnUse" x="10" y="10" width="156" height="306">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="x"><g class="shape" ><rect x="61.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="87.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="12.000000" y="148.000000" width="152.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="88.000000" y="181.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">bar</text></g><g id="y.z"><g class="shape" ><rect x="62.000000" y="198.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="88.000000" y="236.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; y)[0]"><marker id="mk-2256124137" markerWidth="22.000000" markerHeight="14.000000" refX="19.000000" refY="7.000000" viewBox="0.000000 0.000000 22.000000 14.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,7.000000 11.000000,0.000000 22.000000,7.000000 11.000000,14.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 88.000000 80.000000 L 88.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-2256124137)" mask="url(#1637840783)" /><text x="102.000000" y="140.000000" class="text-italic fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><mask id="1637840783" maskUnits="userSpaceOnUse" x="10" y="10" width="156" height="306">
 <rect x="10" y="10" width="156" height="306" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg
index 80b419e5c..d157f6f06 100644
--- a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="703" viewBox="-26 50 440 703"><rect x="-26.000000" y="50.000000" width="440.000000" height="703.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 440 703"><svg id="d2-svg" width="440" height="703" viewBox="-26 50 440 703"><rect x="-26.000000" y="50.000000" width="440.000000" height="703.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,31 +17,11 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(a -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-26.000000" y="243.000000" width="326.000000" height="503.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-21.000000" y="248.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="56.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-14.000000" y="342.000000" width="302.000000" height="392.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-9.000000" y="347.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="107.500000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</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="-2.000000" y="441.000000" width="278.000000" height="281.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="3.000000" y="446.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="87.000000" y="462.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="10.000000" y="540.000000" width="254.000000" height="170.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="15.000000" y="545.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="23.000000" y="561.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo.yo"><g class="shape blend" ><rect x="22.000000" y="639.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="644.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="35.000000" y="660.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 358.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[4]"><path d="M 210.000000 287.000000 L 66.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[3]"><path d="M 210.000000 386.000000 L 66.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[2]"><path d="M 210.000000 485.000000 L 66.000000 485.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[1]"><path d="M 210.000000 584.000000 L 66.000000 584.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[0]"><path d="M 210.000000 683.000000 L 66.000000 683.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><mask id="2451886322" maskUnits="userSpaceOnUse" x="-26" y="50" width="440" height="703">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(a -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-26.000000" y="243.000000" width="326.000000" height="503.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-21.000000" y="248.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="56.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-14.000000" y="342.000000" width="302.000000" height="392.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-9.000000" y="347.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="107.500000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</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="-2.000000" y="441.000000" width="278.000000" height="281.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="3.000000" y="446.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="87.000000" y="462.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="10.000000" y="540.000000" width="254.000000" height="170.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="15.000000" y="545.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="23.000000" y="561.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo.yo"><g class="shape blend" ><rect x="22.000000" y="639.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="644.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="35.000000" y="660.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 358.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[4]"><path d="M 210.000000 287.000000 L 66.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[3]"><path d="M 210.000000 386.000000 L 66.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[2]"><path d="M 210.000000 485.000000 L 66.000000 485.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[1]"><path d="M 210.000000 584.000000 L 66.000000 584.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[0]"><path d="M 210.000000 683.000000 L 66.000000 683.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><mask id="2451886322" maskUnits="userSpaceOnUse" x="-26" y="50" width="440" height="703">
 <rect x="-26" y="50" width="440" height="703" fill="white"></rect>
 <rect x="-21.000000" y="248.000000" width="155" height="16" fill="black"></rect>
 <rect x="-9.000000" y="347.000000" width="233" height="16" fill="black"></rect>
 <rect x="3.000000" y="446.000000" width="168" height="16" fill="black"></rect>
 <rect x="15.000000" y="545.000000" width="16" height="16" fill="black"></rect>
 <rect x="27.000000" y="644.000000" width="16" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg
index 80b419e5c..d157f6f06 100644
--- a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="703" viewBox="-26 50 440 703"><rect x="-26.000000" y="50.000000" width="440.000000" height="703.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 440 703"><svg id="d2-svg" width="440" height="703" viewBox="-26 50 440 703"><rect x="-26.000000" y="50.000000" width="440.000000" height="703.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -17,31 +17,11 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(a -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-26.000000" y="243.000000" width="326.000000" height="503.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-21.000000" y="248.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="56.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-14.000000" y="342.000000" width="302.000000" height="392.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-9.000000" y="347.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="107.500000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</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="-2.000000" y="441.000000" width="278.000000" height="281.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="3.000000" y="446.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="87.000000" y="462.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="10.000000" y="540.000000" width="254.000000" height="170.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="15.000000" y="545.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="23.000000" y="561.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo.yo"><g class="shape blend" ><rect x="22.000000" y="639.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="644.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="35.000000" y="660.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 358.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[4]"><path d="M 210.000000 287.000000 L 66.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[3]"><path d="M 210.000000 386.000000 L 66.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[2]"><path d="M 210.000000 485.000000 L 66.000000 485.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[1]"><path d="M 210.000000 584.000000 L 66.000000 584.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[0]"><path d="M 210.000000 683.000000 L 66.000000 683.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><mask id="2451886322" maskUnits="userSpaceOnUse" x="-26" y="50" width="440" height="703">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="b"><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="a"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="c"><g class="shape" ><rect x="312.000000" y="52.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="362.000000" y="90.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(b -- )[0]"><path d="M 62.000000 120.000000 L 62.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(a -- )[0]"><path d="M 212.000000 120.000000 L 212.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="(c -- )[0]"><path d="M 362.000000 120.000000 L 362.000000 752.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2451886322)" /></g><g id="this is a message group"><g class="shape blend" ><rect x="-26.000000" y="243.000000" width="326.000000" height="503.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-21.000000" y="248.000000" width="155.000000" height="21.000000" class=" fill-N5" /><text x="56.500000" y="264.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">this is a message group</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-14.000000" y="342.000000" width="302.000000" height="392.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="-9.000000" y="347.000000" width="233.000000" height="21.000000" class=" fill-N5" /><text x="107.500000" y="363.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">and this is a nested message group</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="-2.000000" y="441.000000" width="278.000000" height="281.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="3.000000" y="446.000000" width="168.000000" height="21.000000" class=" fill-N5" /><text x="87.000000" y="462.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="10.000000" y="540.000000" width="254.000000" height="170.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="15.000000" y="545.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="23.000000" y="561.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo.yo"><g class="shape blend" ><rect x="22.000000" y="639.000000" width="230.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="644.000000" width="16.000000" height="21.000000" class=" fill-N5" /><text x="35.000000" y="660.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 188.000000 L 358.000000 188.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[4]"><path d="M 210.000000 287.000000 L 66.000000 287.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[3]"><path d="M 210.000000 386.000000 L 66.000000 386.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[2]"><path d="M 210.000000 485.000000 L 66.000000 485.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[1]"><path d="M 210.000000 584.000000 L 66.000000 584.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><g id="(a -&gt; b)[0]"><path d="M 210.000000 683.000000 L 66.000000 683.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2451886322)" /></g><mask id="2451886322" maskUnits="userSpaceOnUse" x="-26" y="50" width="440" height="703">
 <rect x="-26" y="50" width="440" height="703" fill="white"></rect>
 <rect x="-21.000000" y="248.000000" width="155" height="16" fill="black"></rect>
 <rect x="-9.000000" y="347.000000" width="233" height="16" fill="black"></rect>
 <rect x="3.000000" y="446.000000" width="168" height="16" fill="black"></rect>
 <rect x="15.000000" y="545.000000" width="16" height="16" fill="black"></rect>
 <rect x="27.000000" y="644.000000" width="16" height="16" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/dagre/sketch.exp.svg b/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/dagre/sketch.exp.svg
index f15c13fea..987bcc6f7 100644
--- a/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="351" height="603" viewBox="0 0 351 603"><rect x="0.000000" y="0.000000" width="351.000000" height="603.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 351 603"><svg id="d2-svg" width="351" height="603" viewBox="0 0 351 603"><rect x="0.000000" y="0.000000" width="351.000000" height="603.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="Office chatter"><g class="shape" ><rect x="0.000000" y="0.000000" width="351.000000" height="603.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="175.500000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Office chatter</text></g><g id="Office chatter.alice"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Alice</text></g><g id="Office chatter.bob"><g class="shape" ><rect x="239.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="289.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bobby</text></g><g id="(Office chatter.alice -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 590.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3639335586)" /></g><g id="(Office chatter.bob -- )[0]"><path d="M 289.000000 156.000000 L 289.000000 590.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3639335586)" /></g><g id="Office chatter.alice.a"><g class="shape" ><rect x="56.000000" y="511.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.bob.a"><g class="shape" ><rect x="283.000000" y="511.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.awkward small talk"><g class="shape blend" ><rect x="10.000000" y="209.000000" width="331.000000" height="339.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="15.000000" y="214.000000" width="130.000000" height="21.000000" class=" fill-N5" /><text x="80.000000" y="230.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">awkward small talk</text></g><g id="Office chatter.awkward small talk.icebreaker attempt"><g class="shape blend" ><rect x="22.000000" y="378.000000" width="307.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="383.000000" width="129.000000" height="21.000000" class=" fill-N5" /><text x="91.500000" y="399.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">icebreaker attempt</text></g><g id="Office chatter.awkward small talk.unfortunate outcome"><g class="shape blend" ><rect x="28.000000" y="477.000000" width="295.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="33.000000" y="482.000000" width="143.000000" height="21.000000" class=" fill-N5" /><text x="104.500000" y="498.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">unfortunate outcome</text></g><g id="Office chatter.(alice -&gt; bob)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 253.000000 L 285.000000 253.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="176.000000" y="259.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">uhm, hi</text></g><g id="Office chatter.(bob -&gt; alice)[0]"><path d="M 287.000000 323.000000 L 66.000000 323.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="176.000000" y="329.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">oh, hello</text></g><g id="Office chatter.(alice -&gt; bob)[0]"><path d="M 64.000000 422.000000 L 285.000000 422.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="175.500000" y="428.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what did you have for lunch?</text></g><g id="Office chatter.(bob.a -&gt; alice.a)[0]"><path d="M 281.000000 521.000000 L 72.000000 521.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="175.500000" y="527.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">that&#39;s personal</text></g><mask id="3639335586" maskUnits="userSpaceOnUse" x="0" y="0" width="351" height="603">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="Office chatter"><g class="shape" ><rect x="0.000000" y="0.000000" width="351.000000" height="603.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="175.500000" y="33.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Office chatter</text></g><g id="Office chatter.alice"><g class="shape" ><rect x="12.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Alice</text></g><g id="Office chatter.bob"><g class="shape" ><rect x="239.000000" y="88.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="289.000000" y="126.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bobby</text></g><g id="(Office chatter.alice -- )[0]"><path d="M 62.000000 156.000000 L 62.000000 590.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3639335586)" /></g><g id="(Office chatter.bob -- )[0]"><path d="M 289.000000 156.000000 L 289.000000 590.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3639335586)" /></g><g id="Office chatter.alice.a"><g class="shape" ><rect x="56.000000" y="511.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.bob.a"><g class="shape" ><rect x="283.000000" y="511.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.awkward small talk"><g class="shape blend" ><rect x="10.000000" y="209.000000" width="331.000000" height="339.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="15.000000" y="214.000000" width="130.000000" height="21.000000" class=" fill-N5" /><text x="80.000000" y="230.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">awkward small talk</text></g><g id="Office chatter.awkward small talk.icebreaker attempt"><g class="shape blend" ><rect x="22.000000" y="378.000000" width="307.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="383.000000" width="129.000000" height="21.000000" class=" fill-N5" /><text x="91.500000" y="399.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">icebreaker attempt</text></g><g id="Office chatter.awkward small talk.unfortunate outcome"><g class="shape blend" ><rect x="28.000000" y="477.000000" width="295.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="33.000000" y="482.000000" width="143.000000" height="21.000000" class=" fill-N5" /><text x="104.500000" y="498.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">unfortunate outcome</text></g><g id="Office chatter.(alice -&gt; bob)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 253.000000 L 285.000000 253.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="176.000000" y="259.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">uhm, hi</text></g><g id="Office chatter.(bob -&gt; alice)[0]"><path d="M 287.000000 323.000000 L 66.000000 323.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="176.000000" y="329.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">oh, hello</text></g><g id="Office chatter.(alice -&gt; bob)[0]"><path d="M 64.000000 422.000000 L 285.000000 422.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="175.500000" y="428.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what did you have for lunch?</text></g><g id="Office chatter.(bob.a -&gt; alice.a)[0]"><path d="M 281.000000 521.000000 L 72.000000 521.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3639335586)" /><text x="175.500000" y="527.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">that&#39;s personal</text></g><mask id="3639335586" maskUnits="userSpaceOnUse" x="0" y="0" width="351" height="603">
 <rect x="0" y="0" width="351" height="603" fill="white"></rect>
 <rect x="15.000000" y="214.000000" width="130" height="16" fill="black"></rect>
 <rect x="27.000000" y="383.000000" width="129" height="16" fill="black"></rect>
@@ -53,4 +33,4 @@
 <rect x="148.000000" y="313.000000" width="56" height="21" fill="black"></rect>
 <rect x="82.000000" y="412.000000" width="187" height="21" fill="black"></rect>
 <rect x="126.000000" y="511.000000" width="99" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/elk/sketch.exp.svg b/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/elk/sketch.exp.svg
index a800dfac4..c209b99ee 100644
--- a/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/sequence_diagram_edge_group_span_field/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="351" height="603" viewBox="12 12 351 603"><rect x="12.000000" y="12.000000" width="351.000000" height="603.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 351 603"><svg id="d2-svg" width="351" height="603" viewBox="12 12 351 603"><rect x="12.000000" y="12.000000" width="351.000000" height="603.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="Office chatter"><g class="shape" ><rect x="12.000000" y="12.000000" width="351.000000" height="603.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="187.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Office chatter</text></g><g id="Office chatter.alice"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Alice</text></g><g id="Office chatter.bob"><g class="shape" ><rect x="251.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="301.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bobby</text></g><g id="(Office chatter.alice -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 602.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2542802847)" /></g><g id="(Office chatter.bob -- )[0]"><path d="M 301.000000 168.000000 L 301.000000 602.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2542802847)" /></g><g id="Office chatter.alice.a"><g class="shape" ><rect x="68.000000" y="523.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.bob.a"><g class="shape" ><rect x="295.000000" y="523.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.awkward small talk"><g class="shape blend" ><rect x="22.000000" y="221.000000" width="331.000000" height="339.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="226.000000" width="130.000000" height="21.000000" class=" fill-N5" /><text x="92.000000" y="242.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">awkward small talk</text></g><g id="Office chatter.awkward small talk.icebreaker attempt"><g class="shape blend" ><rect x="34.000000" y="390.000000" width="307.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="39.000000" y="395.000000" width="129.000000" height="21.000000" class=" fill-N5" /><text x="103.500000" y="411.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">icebreaker attempt</text></g><g id="Office chatter.awkward small talk.unfortunate outcome"><g class="shape blend" ><rect x="40.000000" y="489.000000" width="295.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="45.000000" y="494.000000" width="143.000000" height="21.000000" class=" fill-N5" /><text x="116.500000" y="510.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">unfortunate outcome</text></g><g id="Office chatter.(alice -&gt; bob)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 265.000000 L 297.000000 265.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="188.000000" y="271.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">uhm, hi</text></g><g id="Office chatter.(bob -&gt; alice)[0]"><path d="M 299.000000 335.000000 L 78.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="188.000000" y="341.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">oh, hello</text></g><g id="Office chatter.(alice -&gt; bob)[0]"><path d="M 76.000000 434.000000 L 297.000000 434.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="187.500000" y="440.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what did you have for lunch?</text></g><g id="Office chatter.(bob.a -&gt; alice.a)[0]"><path d="M 293.000000 533.000000 L 84.000000 533.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="187.500000" y="539.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">that&#39;s personal</text></g><mask id="2542802847" maskUnits="userSpaceOnUse" x="12" y="12" width="351" height="603">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="Office chatter"><g class="shape" ><rect x="12.000000" y="12.000000" width="351.000000" height="603.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="187.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">Office chatter</text></g><g id="Office chatter.alice"><g class="shape" ><rect x="24.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="74.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Alice</text></g><g id="Office chatter.bob"><g class="shape" ><rect x="251.000000" y="100.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="301.000000" y="138.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">Bobby</text></g><g id="(Office chatter.alice -- )[0]"><path d="M 74.000000 168.000000 L 74.000000 602.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2542802847)" /></g><g id="(Office chatter.bob -- )[0]"><path d="M 301.000000 168.000000 L 301.000000 602.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2542802847)" /></g><g id="Office chatter.alice.a"><g class="shape" ><rect x="68.000000" y="523.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.bob.a"><g class="shape" ><rect x="295.000000" y="523.000000" width="12.000000" height="30.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g></g><g id="Office chatter.awkward small talk"><g class="shape blend" ><rect x="22.000000" y="221.000000" width="331.000000" height="339.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="27.000000" y="226.000000" width="130.000000" height="21.000000" class=" fill-N5" /><text x="92.000000" y="242.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">awkward small talk</text></g><g id="Office chatter.awkward small talk.icebreaker attempt"><g class="shape blend" ><rect x="34.000000" y="390.000000" width="307.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="39.000000" y="395.000000" width="129.000000" height="21.000000" class=" fill-N5" /><text x="103.500000" y="411.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">icebreaker attempt</text></g><g id="Office chatter.awkward small talk.unfortunate outcome"><g class="shape blend" ><rect x="40.000000" y="489.000000" width="295.000000" height="59.000000" class=" stroke-B1 fill-N5" style="stroke-width:0;" /></g><rect x="45.000000" y="494.000000" width="143.000000" height="21.000000" class=" fill-N5" /><text x="116.500000" y="510.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">unfortunate outcome</text></g><g id="Office chatter.(alice -&gt; bob)[1]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 265.000000 L 297.000000 265.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="188.000000" y="271.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">uhm, hi</text></g><g id="Office chatter.(bob -&gt; alice)[0]"><path d="M 299.000000 335.000000 L 78.000000 335.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="188.000000" y="341.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">oh, hello</text></g><g id="Office chatter.(alice -&gt; bob)[0]"><path d="M 76.000000 434.000000 L 297.000000 434.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="187.500000" y="440.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">what did you have for lunch?</text></g><g id="Office chatter.(bob.a -&gt; alice.a)[0]"><path d="M 293.000000 533.000000 L 84.000000 533.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2542802847)" /><text x="187.500000" y="539.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">that&#39;s personal</text></g><mask id="2542802847" maskUnits="userSpaceOnUse" x="12" y="12" width="351" height="603">
 <rect x="12" y="12" width="351" height="603" fill="white"></rect>
 <rect x="27.000000" y="226.000000" width="130" height="16" fill="black"></rect>
 <rect x="39.000000" y="395.000000" width="129" height="16" fill="black"></rect>
@@ -53,4 +33,4 @@
 <rect x="160.000000" y="325.000000" width="56" height="21" fill="black"></rect>
 <rect x="94.000000" y="424.000000" width="187" height="21" fill="black"></rect>
 <rect x="138.000000" y="523.000000" width="99" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg b/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
index 83f5b0de9..e490702cf 100644
--- a/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2092" height="2470" viewBox="-2 0 2092 2470"><rect x="-2.000000" y="0.000000" width="2092.000000" height="2470.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2092 2470"><svg id="d2-svg" width="2092" height="2470" viewBox="-2 0 2092 2470"><rect x="-2.000000" y="0.000000" width="2092.000000" height="2470.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -45,27 +45,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -815,4 +795,4 @@
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="containers.circle container"><g class="shape" ><ellipse rx="104.000000" ry="160.000000" cx="124.000000" cy="266.000000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="124.000000" y="94.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">circle container</text></g><g id="containers.diamond container"><g class="shape" ><path d="M 352 426 C 351 426 351 426 350 425 L 249 269 C 248 267 248 265 249 263 L 350 107 C 351 105 353 105 354 107 L 455 263 C 456 265 456 267 455 269 L 354 425 C 353 426 353 426 352 426 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="352.000000" y="94.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">diamond container</text></g><g id="containers.oval container"><g class="shape" ><ellipse rx="104.000000" ry="160.000000" cx="580.000000" cy="266.000000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="580.000000" y="94.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">oval container</text></g><g id="containers.hexagon container"><g class="shape" ><path d="M 756 106 L 704 266 L 756 426 L 860 426 L 912 266 L 860 106 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="808.000000" y="94.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">hexagon container</text></g><g id="containers.circle container.diamond"><g class="shape" ><path d="M 124 298 C 124 298 123 298 123 298 L 60 267 C 59 267 59 266 60 266 L 123 234 C 124 234 125 234 125 234 L 187 265 C 188 265 188 266 187 266 L 125 298 C 125 298 124 298 124 298 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="124.000000" y="271.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="containers.diamond container.circle"><g class="shape" ><ellipse rx="64.000000" ry="64.000000" cx="352.000000" cy="266.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="352.000000" y="271.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="containers.oval container.hexagon"><g class="shape" ><path d="M 548 234 L 516 266 L 548 298 L 612 298 L 644 266 L 612 234 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="580.000000" y="271.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="containers.hexagon container.oval"><g class="shape" ><ellipse rx="64.000000" ry="32.000000" cx="808.000000" cy="266.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="808.000000" y="271.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="(cloud -&gt; class)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1228.000000 357.000000 C 1228.000000 395.800000 1228.000000 416.000000 1228.000000 431.000000 C 1228.000000 446.000000 1228.000000 556.000000 1228.000000 752.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#840608126)" /></g><g id="(class -&gt; tall cylinder)[0]"><path d="M 1228.000000 1158.000000 C 1228.000000 1356.000000 1228.000000 1416.000000 1228.000000 1452.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#840608126)" /></g><g id="(tall cylinder -&gt; users)[0]"><path d="M 1228.000000 1970.000000 C 1228.000000 2008.000000 1228.000000 2028.000000 1228.000000 2064.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#840608126)" /></g><g id="(container -&gt; text)[0]"><path d="M 1888.000000 263.000000 C 1888.000000 377.000000 1888.000000 416.000000 1888.000000 431.000000 C 1888.000000 446.000000 1888.000000 516.000000 1888.000000 552.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#840608126)" /></g><g id="(text -&gt; code)[0]"><path d="M 1888.000000 1358.000000 C 1888.000000 1396.000000 1888.000000 1437.200000 1888.000000 1558.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#840608126)" /></g><g id="(code -&gt; small code)[0]"><path d="M 1888.000000 1864.000000 C 1888.000000 1986.800000 1888.000000 2061.500000 1888.000000 2231.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#840608126)" /></g><mask id="840608126" maskUnits="userSpaceOnUse" x="-2" y="0" width="2092" height="2470">
 <rect x="-2" y="0" width="2092" height="2470" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg b/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
index 05f7d0f11..4f4198308 100644
--- a/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2172" height="2254" viewBox="10 10 2172 2254"><rect x="10.000000" y="10.000000" width="2172.000000" height="2254.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2172 2254"><svg id="d2-svg" width="2172" height="2254" viewBox="10 10 2172 2254"><rect x="10.000000" y="10.000000" width="2172.000000" height="2254.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -45,27 +45,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -815,4 +795,4 @@
 </text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve">fmt.<tspan fill="#990000" class="text-mono-bold">Printf</tspan>(<tspan fill="#dd1144">&quot;%d&quot;</tspan>,&#160;b)</text></g></g></g><g id="containers.circle container"><g class="shape" ><ellipse rx="114.000000" ry="82.000000" cx="176.000000" cy="176.000000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="176.000000" y="148.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">circle container</text></g><g id="containers.diamond container"><g class="shape" ><path d="M 424 290 C 423 290 423 290 422 289 L 311 178 C 310 177 310 175 311 174 L 422 63 C 423 62 425 62 426 63 L 537 174 C 538 175 538 177 537 178 L 426 289 C 425 290 425 290 424 290 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="424.000000" y="148.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">diamond container</text></g><g id="containers.oval container"><g class="shape" ><ellipse rx="114.000000" ry="82.000000" cx="672.000000" cy="176.000000" class="shape stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="672.000000" y="148.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">oval container</text></g><g id="containers.hexagon container"><g class="shape" ><path d="M 863 94 L 806 176 L 863 258 L 977 258 L 1034 176 L 977 94 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="920.000000" y="150.333333" class="text fill-N1" style="text-anchor:middle;font-size:24px">hexagon container</text></g><g id="containers.circle container.diamond"><g class="shape" ><path d="M 176 208 C 176 208 175 208 175 208 L 112 177 C 111 177 111 176 112 176 L 175 144 C 176 144 177 144 177 144 L 239 175 C 240 175 240 176 239 176 L 177 208 C 177 208 176 208 176 208 Z" class=" stroke-B1 fill-N4" style="stroke-width:2;" /></g><text x="176.000000" y="181.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diamond</text></g><g id="containers.diamond container.circle"><g class="shape" ><ellipse rx="64.000000" ry="64.000000" cx="424.000000" cy="176.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="424.000000" y="181.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">circle</text></g><g id="containers.oval container.hexagon"><g class="shape" ><path d="M 640 144 L 608 176 L 640 208 L 704 208 L 736 176 L 704 144 Z" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="672.000000" y="181.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">hexagon</text></g><g id="containers.hexagon container.oval"><g class="shape" ><ellipse rx="64.000000" ry="32.000000" cx="920.000000" cy="176.000000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="920.000000" y="181.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">oval</text></g><g id="(cloud -&gt; class)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1360.000000 341.000000 L 1360.000000 606.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4216968840)" /></g><g id="(class -&gt; tall cylinder)[0]"><path d="M 1360.000000 1012.000000 L 1360.000000 1276.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4216968840)" /></g><g id="(tall cylinder -&gt; users)[0]"><path d="M 1360.000000 1794.000000 L 1360.000000 1858.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4216968840)" /></g><g id="(container -&gt; text)[0]"><path d="M 1980.000000 342.000000 L 1980.000000 406.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4216968840)" /></g><g id="(text -&gt; code)[0]"><path d="M 1980.000000 1212.000000 L 1980.000000 1382.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4216968840)" /></g><g id="(code -&gt; small code)[0]"><path d="M 1980.000000 1688.000000 L 1980.000000 1858.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#4216968840)" /></g><mask id="4216968840" maskUnits="userSpaceOnUse" x="10" y="10" width="2172" height="2254">
 <rect x="10" y="10" width="2172" height="2254" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/chinese/dagre/sketch.exp.svg b/e2etests/testdata/unicode/chinese/dagre/sketch.exp.svg
index 3462aeb38..2a294bb26 100644
--- a/e2etests/testdata/unicode/chinese/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/chinese/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="314" viewBox="-2 -2 230 314"><rect x="-2.000000" y="-2.000000" width="230.000000" height="314.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 314"><svg id="d2-svg" width="230" height="314" viewBox="-2 -2 230 314"><rect x="-2.000000" y="-2.000000" width="230.000000" height="314.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -793,4 +773,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="0.000000" y="244.000000" width="226.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="113.000000" y="282.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">所以，即使夏天很热</text></g><g id="(poem -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 113.000000 146.000000 C 113.000000 184.000000 113.000000 204.000000 113.000000 240.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3129070880)" /></g><mask id="3129070880" maskUnits="userSpaceOnUse" x="-2" y="-2" width="230" height="314">
 <rect x="-2" y="-2" width="230" height="314" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/chinese/elk/sketch.exp.svg b/e2etests/testdata/unicode/chinese/elk/sketch.exp.svg
index 163695781..875e788dc 100644
--- a/e2etests/testdata/unicode/chinese/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/chinese/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" height="284" viewBox="10 10 230 284"><rect x="10.000000" y="10.000000" width="230.000000" height="284.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 284"><svg id="d2-svg" width="230" height="284" viewBox="10 10 230 284"><rect x="10.000000" y="10.000000" width="230.000000" height="284.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -793,4 +773,4 @@
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="12.000000" y="226.000000" width="226.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="125.000000" y="264.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">所以，即使夏天很热</text></g><g id="(poem -&gt; a)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 125.000000 158.000000 L 125.000000 222.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1610858052)" /></g><mask id="1610858052" maskUnits="userSpaceOnUse" x="10" y="10" width="230" height="284">
 <rect x="10" y="10" width="230" height="284" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/emojis/dagre/sketch.exp.svg b/e2etests/testdata/unicode/emojis/dagre/sketch.exp.svg
index 9bdf3b8a3..c9eb8c886 100644
--- a/e2etests/testdata/unicode/emojis/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/emojis/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1138" height="236" viewBox="-2 -2 1138 236"><rect x="-2.000000" y="-2.000000" width="1138.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1138 236"><svg id="d2-svg" width="1138" height="236" viewBox="-2 -2 1138 236"><rect x="-2.000000" y="-2.000000" width="1138.000000" height="236.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">🙈🙈🙈🙈🙈🙈🙈🙈</text></g><g id="✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊"><g class="shape" ><rect x="265.000000" y="0.000000" width="833.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="681.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊</text></g><g id="☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️"><g class="shape" ><rect x="229.000000" y="166.000000" width="905.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="681.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️</text></g><g id="(✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊ -&gt; ☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 681.500000 68.000000 C 681.500000 106.000000 681.500000 126.000000 681.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3085657068)" /></g><mask id="3085657068" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1138" height="236">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">🙈🙈🙈🙈🙈🙈🙈🙈</text></g><g id="✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊"><g class="shape" ><rect x="265.000000" y="0.000000" width="833.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="681.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊</text></g><g id="☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️"><g class="shape" ><rect x="229.000000" y="166.000000" width="905.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="681.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️</text></g><g id="(✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊ -&gt; ☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 681.500000 68.000000 C 681.500000 106.000000 681.500000 126.000000 681.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3085657068)" /></g><mask id="3085657068" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1138" height="236">
 <rect x="-2" y="-2" width="1138" height="236" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/emojis/elk/sketch.exp.svg b/e2etests/testdata/unicode/emojis/elk/sketch.exp.svg
index 9021215d2..113526382 100644
--- a/e2etests/testdata/unicode/emojis/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/emojis/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1098" height="206" viewBox="10 10 1098 206"><rect x="10.000000" y="10.000000" width="1098.000000" height="206.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1098 206"><svg id="d2-svg" width="1098" height="206" viewBox="10 10 1098 206"><rect x="10.000000" y="10.000000" width="1098.000000" height="206.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">🙈🙈🙈🙈🙈🙈🙈🙈</text></g><g id="✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊"><g class="shape" ><rect x="237.000000" y="12.000000" width="833.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="653.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊</text></g><g id="☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️"><g class="shape" ><rect x="201.000000" y="148.000000" width="905.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="653.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️</text></g><g id="(✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊ -&gt; ☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 653.500000 80.000000 L 653.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3206762414)" /></g><mask id="3206762414" maskUnits="userSpaceOnUse" x="10" y="10" width="1098" height="206">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">🙈🙈🙈🙈🙈🙈🙈🙈</text></g><g id="✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊"><g class="shape" ><rect x="237.000000" y="12.000000" width="833.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="653.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊</text></g><g id="☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️"><g class="shape" ><rect x="201.000000" y="148.000000" width="905.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="653.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️</text></g><g id="(✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊ -&gt; ☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 653.500000 80.000000 L 653.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3206762414)" /></g><mask id="3206762414" maskUnits="userSpaceOnUse" x="10" y="10" width="1098" height="206">
 <rect x="10" y="10" width="1098" height="206" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/japanese-basic/dagre/sketch.exp.svg b/e2etests/testdata/unicode/japanese-basic/dagre/sketch.exp.svg
index 46df5cf15..d568d3fbe 100644
--- a/e2etests/testdata/unicode/japanese-basic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/japanese-basic/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="70" viewBox="-2 -2 250 70"><rect x="-2.000000" y="-2.000000" width="250.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 250 70"><svg id="d2-svg" width="250" height="70" viewBox="-2 -2 250 70"><rect x="-2.000000" y="-2.000000" width="250.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="246.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="123.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ああああああああああ</text></g><mask id="885085492" maskUnits="userSpaceOnUse" x="-2" y="-2" width="250" height="70">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="246.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="123.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ああああああああああ</text></g><mask id="885085492" maskUnits="userSpaceOnUse" x="-2" y="-2" width="250" height="70">
 <rect x="-2" y="-2" width="250" height="70" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/japanese-basic/elk/sketch.exp.svg b/e2etests/testdata/unicode/japanese-basic/elk/sketch.exp.svg
index 508c2921e..cb99e841e 100644
--- a/e2etests/testdata/unicode/japanese-basic/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/japanese-basic/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="70" viewBox="10 10 250 70"><rect x="10.000000" y="10.000000" width="250.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 250 70"><svg id="d2-svg" width="250" height="70" viewBox="10 10 250 70"><rect x="10.000000" y="10.000000" width="250.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="246.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="135.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ああああああああああ</text></g><mask id="3826722188" maskUnits="userSpaceOnUse" x="10" y="10" width="250" height="70">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="246.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="135.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ああああああああああ</text></g><mask id="3826722188" maskUnits="userSpaceOnUse" x="10" y="10" width="250" height="70">
 <rect x="10" y="10" width="250" height="70" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/japanese-full/dagre/sketch.exp.svg b/e2etests/testdata/unicode/japanese-full/dagre/sketch.exp.svg
index cb3a46b25..d3cce79ef 100644
--- a/e2etests/testdata/unicode/japanese-full/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/japanese-full/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1386" height="338" viewBox="-2 -2 1386 338"><rect x="-2.000000" y="-2.000000" width="1386.000000" height="338.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1386 338"><svg id="d2-svg" width="1386" height="338" viewBox="-2 -2 1386 338"><rect x="-2.000000" y="-2.000000" width="1386.000000" height="338.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="1382.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="691.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="691.000000" dy="0.000000">ある日、トマトが道を歩いていたら、道路の向こうからキュウリがやって来ました。</tspan><tspan x="691.000000" dy="17.666667">トマトは驚いて尋ねました。</tspan><tspan x="691.000000" dy="17.666667">「キュウリさん、どうしてあなたはここにいるのですか？」 キュウリは答えました。「あなたと同じ理由でここにいます。サラダになるために。」</tspan></text></g><g id="b"><g class="shape" ><rect x="8.000000" y="219.000000" width="1367.000000" height="115.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="691.500000" y="296.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:55px">「バナナは皮を剥いて食べるものです。」</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 691.000000 100.000000 C 691.000000 146.400000 691.000000 170.700000 691.000000 215.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#15270276)" /><text x="691.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">「バカは死ななきゃ治らない。」</text></g><mask id="15270276" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1386" height="338">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="1382.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="691.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="691.000000" dy="0.000000">ある日、トマトが道を歩いていたら、道路の向こうからキュウリがやって来ました。</tspan><tspan x="691.000000" dy="17.666667">トマトは驚いて尋ねました。</tspan><tspan x="691.000000" dy="17.666667">「キュウリさん、どうしてあなたはここにいるのですか？」 キュウリは答えました。「あなたと同じ理由でここにいます。サラダになるために。」</tspan></text></g><g id="b"><g class="shape" ><rect x="8.000000" y="219.000000" width="1367.000000" height="115.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="691.500000" y="296.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:55px">「バナナは皮を剥いて食べるものです。」</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 691.000000 100.000000 C 691.000000 146.400000 691.000000 170.700000 691.000000 215.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#15270276)" /><text x="691.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">「バカは死ななきゃ治らない。」</text></g><mask id="15270276" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1386" height="338">
 <rect x="-2" y="-2" width="1386" height="338" fill="white"></rect>
 <rect x="547.000000" y="148.000000" width="289" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/japanese-full/elk/sketch.exp.svg b/e2etests/testdata/unicode/japanese-full/elk/sketch.exp.svg
index 9b75b15d6..beabad034 100644
--- a/e2etests/testdata/unicode/japanese-full/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/japanese-full/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1386" height="378" viewBox="10 10 1386 378"><rect x="10.000000" y="10.000000" width="1386.000000" height="378.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1386 378"><svg id="d2-svg" width="1386" height="378" viewBox="10 10 1386 378"><rect x="10.000000" y="10.000000" width="1386.000000" height="378.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="1382.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="703.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="703.000000" dy="0.000000">ある日、トマトが道を歩いていたら、道路の向こうからキュウリがやって来ました。</tspan><tspan x="703.000000" dy="17.666667">トマトは驚いて尋ねました。</tspan><tspan x="703.000000" dy="17.666667">「キュウリさん、どうしてあなたはここにいるのですか？」 キュウリは答えました。「あなたと同じ理由でここにいます。サラダになるために。」</tspan></text></g><g id="b"><g class="shape" ><rect x="19.000000" y="271.000000" width="1367.000000" height="115.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="702.500000" y="348.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:55px">「バナナは皮を剥いて食べるものです。」</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 703.000000 112.000000 L 703.000000 267.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1641311119)" /><text x="703.500000" y="196.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">「バカは死ななきゃ治らない。」</text></g><mask id="1641311119" maskUnits="userSpaceOnUse" x="10" y="10" width="1386" height="378">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="1382.000000" height="98.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="703.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="703.000000" dy="0.000000">ある日、トマトが道を歩いていたら、道路の向こうからキュウリがやって来ました。</tspan><tspan x="703.000000" dy="17.666667">トマトは驚いて尋ねました。</tspan><tspan x="703.000000" dy="17.666667">「キュウリさん、どうしてあなたはここにいるのですか？」 キュウリは答えました。「あなたと同じ理由でここにいます。サラダになるために。」</tspan></text></g><g id="b"><g class="shape" ><rect x="19.000000" y="271.000000" width="1367.000000" height="115.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="702.500000" y="348.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:55px">「バナナは皮を剥いて食べるものです。」</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 703.000000 112.000000 L 703.000000 267.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#1641311119)" /><text x="703.500000" y="196.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">「バカは死ななきゃ治らない。」</text></g><mask id="1641311119" maskUnits="userSpaceOnUse" x="10" y="10" width="1386" height="378">
 <rect x="10" y="10" width="1386" height="378" fill="white"></rect>
 <rect x="559.000000" y="180.000000" width="289" height="21" fill="black"></rect>
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/japanese-mixed/dagre/sketch.exp.svg b/e2etests/testdata/unicode/japanese-mixed/dagre/sketch.exp.svg
index 278954943..337e3d7b2 100644
--- a/e2etests/testdata/unicode/japanese-mixed/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/japanese-mixed/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3963" height="1039" viewBox="-2 -2 3963 1039"><rect x="-2.000000" y="-2.000000" width="3963.000000" height="1039.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3963 1039"><svg id="d2-svg" width="3963" height="1039" viewBox="-2 -2 3963 1039"><rect x="-2.000000" y="-2.000000" width="3963.000000" height="1039.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="1646.000000" y="0.000000" width="668.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="3959.000000" height="171.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1979.500000" y="288.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:100px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="c"><g class="shape" ><rect x="1817.000000" y="437.000000" width="326.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="475.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">今日はTokyoでsushiを食べました</text></g><g id="d"><g class="shape" ><rect x="888.000000" y="603.000000" width="2184.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="668.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:43px">先日、Shibuyaで友達とshoppingを楽😊しんだ後、ramen屋でdelicious😊なラーメンを食べた。</text></g><g id="e"><g class="shape" ><rect x="1877.000000" y="803.000000" width="206.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="841.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">English English English</text></g><g id="f"><g class="shape" ><rect x="1897.000000" y="969.000000" width="165.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1979.500000" y="1007.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">先日先日先日</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1979.500000 68.000000 C 1979.500000 106.000000 1979.500000 126.000000 1979.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(b -&gt; c)[0]"><path d="M 1979.500000 339.000000 C 1979.500000 377.000000 1979.500000 397.000000 1979.500000 433.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(c -&gt; d)[0]"><path d="M 1979.500000 505.000000 C 1979.500000 543.000000 1979.500000 563.000000 1979.500000 599.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(d -&gt; e)[0]"><path d="M 1979.500000 705.000000 C 1979.500000 743.000000 1979.500000 763.000000 1979.500000 799.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(e -&gt; f)[0]"><path d="M 1979.500000 871.000000 C 1979.500000 909.000000 1979.500000 929.000000 1979.500000 965.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><mask id="3496153510" maskUnits="userSpaceOnUse" x="-2" y="-2" width="3963" height="1039">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="1646.000000" y="0.000000" width="668.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="3959.000000" height="171.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1979.500000" y="288.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:100px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="c"><g class="shape" ><rect x="1817.000000" y="437.000000" width="326.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="475.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">今日はTokyoでsushiを食べました</text></g><g id="d"><g class="shape" ><rect x="888.000000" y="603.000000" width="2184.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="668.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:43px">先日、Shibuyaで友達とshoppingを楽😊しんだ後、ramen屋でdelicious😊なラーメンを食べた。</text></g><g id="e"><g class="shape" ><rect x="1877.000000" y="803.000000" width="206.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1980.000000" y="841.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">English English English</text></g><g id="f"><g class="shape" ><rect x="1897.000000" y="969.000000" width="165.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1979.500000" y="1007.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">先日先日先日</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1979.500000 68.000000 C 1979.500000 106.000000 1979.500000 126.000000 1979.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(b -&gt; c)[0]"><path d="M 1979.500000 339.000000 C 1979.500000 377.000000 1979.500000 397.000000 1979.500000 433.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(c -&gt; d)[0]"><path d="M 1979.500000 505.000000 C 1979.500000 543.000000 1979.500000 563.000000 1979.500000 599.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(d -&gt; e)[0]"><path d="M 1979.500000 705.000000 C 1979.500000 743.000000 1979.500000 763.000000 1979.500000 799.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><g id="(e -&gt; f)[0]"><path d="M 1979.500000 871.000000 C 1979.500000 909.000000 1979.500000 929.000000 1979.500000 965.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#3496153510)" /></g><mask id="3496153510" maskUnits="userSpaceOnUse" x="-2" y="-2" width="3963" height="1039">
 <rect x="-2" y="-2" width="3963" height="1039" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/japanese-mixed/elk/sketch.exp.svg b/e2etests/testdata/unicode/japanese-mixed/elk/sketch.exp.svg
index 96c89078d..4bcac3dcc 100644
--- a/e2etests/testdata/unicode/japanese-mixed/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/japanese-mixed/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3963" height="889" viewBox="10 10 3963 889"><rect x="10.000000" y="10.000000" width="3963.000000" height="889.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3963 889"><svg id="d2-svg" width="3963" height="889" viewBox="10 10 3963 889"><rect x="10.000000" y="10.000000" width="3963.000000" height="889.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="1657.000000" y="12.000000" width="668.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="3959.000000" height="171.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.500000" y="270.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:100px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="c"><g class="shape" ><rect x="1828.000000" y="389.000000" width="326.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="427.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">今日はTokyoでsushiを食べました</text></g><g id="d"><g class="shape" ><rect x="899.000000" y="525.000000" width="2184.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="590.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:43px">先日、Shibuyaで友達とshoppingを楽😊しんだ後、ramen屋でdelicious😊なラーメンを食べた。</text></g><g id="e"><g class="shape" ><rect x="1888.000000" y="695.000000" width="206.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="733.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">English English English</text></g><g id="f"><g class="shape" ><rect x="1909.000000" y="831.000000" width="165.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.500000" y="869.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">先日先日先日</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1991.500000 80.000000 L 1991.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(b -&gt; c)[0]"><path d="M 1991.500000 321.000000 L 1991.500000 385.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(c -&gt; d)[0]"><path d="M 1991.500000 457.000000 L 1991.500000 521.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(d -&gt; e)[0]"><path d="M 1991.500000 627.000000 L 1991.500000 691.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(e -&gt; f)[0]"><path d="M 1991.500000 763.000000 L 1991.500000 827.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><mask id="915273390" maskUnits="userSpaceOnUse" x="10" y="10" width="3963" height="889">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="1657.000000" y="12.000000" width="668.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="148.000000" width="3959.000000" height="171.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.500000" y="270.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:100px">トマトが赤くなったのはなぜですか？Because it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶</text></g><g id="c"><g class="shape" ><rect x="1828.000000" y="389.000000" width="326.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="427.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">今日はTokyoでsushiを食べました</text></g><g id="d"><g class="shape" ><rect x="899.000000" y="525.000000" width="2184.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="590.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:43px">先日、Shibuyaで友達とshoppingを楽😊しんだ後、ramen屋でdelicious😊なラーメンを食べた。</text></g><g id="e"><g class="shape" ><rect x="1888.000000" y="695.000000" width="206.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.000000" y="733.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">English English English</text></g><g id="f"><g class="shape" ><rect x="1909.000000" y="831.000000" width="165.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1991.500000" y="869.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">先日先日先日</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 1991.500000 80.000000 L 1991.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(b -&gt; c)[0]"><path d="M 1991.500000 321.000000 L 1991.500000 385.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(c -&gt; d)[0]"><path d="M 1991.500000 457.000000 L 1991.500000 521.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(d -&gt; e)[0]"><path d="M 1991.500000 627.000000 L 1991.500000 691.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><g id="(e -&gt; f)[0]"><path d="M 1991.500000 763.000000 L 1991.500000 827.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#915273390)" /></g><mask id="915273390" maskUnits="userSpaceOnUse" x="10" y="10" width="3963" height="889">
 <rect x="10" y="10" width="3963" height="889" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/korean/dagre/sketch.exp.svg b/e2etests/testdata/unicode/korean/dagre/sketch.exp.svg
index eadc8849c..6fb073dca 100644
--- a/e2etests/testdata/unicode/korean/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/korean/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="209" height="70" viewBox="-2 -2 209 70"><rect x="-2.000000" y="-2.000000" width="209.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 209 70"><svg id="d2-svg" width="209" height="70" viewBox="-2 -2 209 70"><rect x="-2.000000" y="-2.000000" width="209.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">고생끝에낙이온다</text></g><mask id="993946991" maskUnits="userSpaceOnUse" x="-2" y="-2" width="209" height="70">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">고생끝에낙이온다</text></g><mask id="993946991" maskUnits="userSpaceOnUse" x="-2" y="-2" width="209" height="70">
 <rect x="-2" y="-2" width="209" height="70" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/korean/elk/sketch.exp.svg b/e2etests/testdata/unicode/korean/elk/sketch.exp.svg
index 14b7192ed..3b9260629 100644
--- a/e2etests/testdata/unicode/korean/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/korean/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="209" height="70" viewBox="10 10 209 70"><rect x="10.000000" y="10.000000" width="209.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 209 70"><svg id="d2-svg" width="209" height="70" viewBox="10 10 209 70"><rect x="10.000000" y="10.000000" width="209.000000" height="70.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">고생끝에낙이온다</text></g><mask id="385498295" maskUnits="userSpaceOnUse" x="10" y="10" width="209" height="70">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="205.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">고생끝에낙이온다</text></g><mask id="385498295" maskUnits="userSpaceOnUse" x="10" y="10" width="209" height="70">
 <rect x="10" y="10" width="209" height="70" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/mixed-language-2/dagre/sketch.exp.svg b/e2etests/testdata/unicode/mixed-language-2/dagre/sketch.exp.svg
index 582be6093..96d2a441c 100644
--- a/e2etests/testdata/unicode/mixed-language-2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/mixed-language-2/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3296" height="568" viewBox="-2 -2 3296 568"><rect x="-2.000000" y="-2.000000" width="3296.000000" height="568.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 3296 568"><svg id="d2-svg" width="3296" height="568" viewBox="-2 -2 3296 568"><rect x="-2.000000" y="-2.000000" width="3296.000000" height="568.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="31.000000" y="0.000000" width="240.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="151.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">我 (wǒ) - Mandarin Chinese</text></g><g id="b"><g class="shape" ><rect x="30.000000" y="166.000000" width="241.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="150.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaai dii) - Lao</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="332.000000" width="301.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="150.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ជំរាបសួរ (jomreab suor) - Khmer</text></g><g id="d"><g class="shape" ><rect x="29.000000" y="498.000000" width="244.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="151.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">สวัสดี (sà-wàt-dii) - Thai</text></g><g id="e"><g class="shape" ><rect x="336.000000" y="0.000000" width="237.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaidee) - Lao</text></g><g id="f"><g class="shape" ><rect x="331.000000" y="166.000000" width="247.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ဟယ်လို (helaou) - Burmese</text></g><g id="g"><g class="shape" ><rect x="367.000000" y="332.000000" width="176.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="455.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mari (まり) - Ainu</text></g><g id="h"><g class="shape" ><rect x="368.000000" y="498.000000" width="173.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cào (草) - Zhuang</text></g><g id="i"><g class="shape" ><rect x="633.000000" y="0.000000" width="282.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">күнтізбе (kúntízbe) - Kazakh</text></g><g id="j"><g class="shape" ><rect x="662.000000" y="166.000000" width="224.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">բարև (barev) - Armenian</text></g><g id="k"><g class="shape" ><rect x="642.000000" y="332.000000" width="265.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">монгол (mongol) - Mongolian</text></g><g id="l"><g class="shape" ><rect x="675.000000" y="498.000000" width="199.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mila (میلا) - Uyghur</text></g><g id="m"><g class="shape" ><rect x="975.000000" y="0.000000" width="255.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1102.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">નમસ્તે (namaste) - Gujarati</text></g><g id="n"><g class="shape" ><rect x="996.000000" y="166.000000" width="213.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1102.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">漢字 (kanji) - Japanese</text></g><g id="o"><g class="shape" ><rect x="1024.000000" y="332.000000" width="158.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1103.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">위 (wi) - Korean</text></g><g id="p"><g class="shape" ><rect x="984.000000" y="498.000000" width="238.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1103.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">吾哥 (ngǔgāi) - Cantonese</text></g><g id="&#34;မင်္ဂလာပါ (mingalaba) - Burmese&#34;"><g class="shape" ><rect x="1290.000000" y="0.000000" width="307.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1443.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">မင်္ဂလာပါ (mingalaba) - Burmese</text></g><g id="&#34;сайн уу (sain uu) - Mongolian&#34;"><g class="shape" ><rect x="1657.000000" y="0.000000" width="264.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1789.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">сайн уу (sain uu) - Mongolian</text></g><g id="&#34;ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi&#34;"><g class="shape" ><rect x="1981.000000" y="0.000000" width="328.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2145.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi</text></g><g id="&#34;你吃了吗 (ní chī le ma) - Mandarin Chinese&#34;"><g class="shape" ><rect x="2369.000000" y="0.000000" width="370.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2554.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">你吃了吗 (ní chī le ma) - Mandarin Chinese</text></g><g id="&#34;饭 (fan) - Zhuang&#34;"><g class="shape" ><rect x="2799.000000" y="0.000000" width="167.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2882.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">饭 (fan) - Zhuang</text></g><g id="مەن سىزنى ياخشى ئۈمىد ق"><g class="shape" ><rect x="3026.000000" y="0.000000" width="266.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="3159.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">مەن سىزنى ياخشى ئۈمىد ق</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 150.500000 68.000000 C 150.500000 106.000000 150.500000 126.000000 150.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(b -&gt; c)[0]"><path d="M 150.500000 234.000000 C 150.500000 272.000000 150.500000 292.000000 150.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(c -&gt; d)[0]"><path d="M 150.500000 400.000000 C 150.500000 438.000000 150.500000 458.000000 150.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(e -&gt; f)[0]"><path d="M 454.500000 68.000000 C 454.500000 106.000000 454.500000 126.000000 454.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(f -&gt; g)[0]"><path d="M 454.500000 234.000000 C 454.500000 272.000000 454.500000 292.000000 454.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(g -&gt; h)[0]"><path d="M 454.500000 400.000000 C 454.500000 438.000000 454.500000 458.000000 454.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(i -&gt; j)[0]"><path d="M 774.000000 68.000000 C 774.000000 106.000000 774.000000 126.000000 774.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(j -&gt; k)[0]"><path d="M 774.000000 234.000000 C 774.000000 272.000000 774.000000 292.000000 774.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(k -&gt; l)[0]"><path d="M 774.000000 400.000000 C 774.000000 438.000000 774.000000 458.000000 774.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(m -&gt; n)[0]"><path d="M 1102.500000 68.000000 C 1102.500000 106.000000 1102.500000 126.000000 1102.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(n -&gt; o)[0]"><path d="M 1102.500000 234.000000 C 1102.500000 272.000000 1102.500000 292.000000 1102.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(o -&gt; p)[0]"><path d="M 1102.500000 400.000000 C 1102.500000 438.000000 1102.500000 458.000000 1102.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><mask id="658054005" maskUnits="userSpaceOnUse" x="-2" y="-2" width="3296" height="568">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="31.000000" y="0.000000" width="240.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="151.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">我 (wǒ) - Mandarin Chinese</text></g><g id="b"><g class="shape" ><rect x="30.000000" y="166.000000" width="241.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="150.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaai dii) - Lao</text></g><g id="c"><g class="shape" ><rect x="0.000000" y="332.000000" width="301.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="150.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ជំរាបសួរ (jomreab suor) - Khmer</text></g><g id="d"><g class="shape" ><rect x="29.000000" y="498.000000" width="244.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="151.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">สวัสดี (sà-wàt-dii) - Thai</text></g><g id="e"><g class="shape" ><rect x="336.000000" y="0.000000" width="237.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaidee) - Lao</text></g><g id="f"><g class="shape" ><rect x="331.000000" y="166.000000" width="247.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ဟယ်လို (helaou) - Burmese</text></g><g id="g"><g class="shape" ><rect x="367.000000" y="332.000000" width="176.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="455.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mari (まり) - Ainu</text></g><g id="h"><g class="shape" ><rect x="368.000000" y="498.000000" width="173.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="454.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cào (草) - Zhuang</text></g><g id="i"><g class="shape" ><rect x="633.000000" y="0.000000" width="282.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">күнтізбе (kúntízbe) - Kazakh</text></g><g id="j"><g class="shape" ><rect x="662.000000" y="166.000000" width="224.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">բարև (barev) - Armenian</text></g><g id="k"><g class="shape" ><rect x="642.000000" y="332.000000" width="265.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">монгол (mongol) - Mongolian</text></g><g id="l"><g class="shape" ><rect x="675.000000" y="498.000000" width="199.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="774.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mila (میلا) - Uyghur</text></g><g id="m"><g class="shape" ><rect x="975.000000" y="0.000000" width="255.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1102.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">નમસ્તે (namaste) - Gujarati</text></g><g id="n"><g class="shape" ><rect x="996.000000" y="166.000000" width="213.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1102.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">漢字 (kanji) - Japanese</text></g><g id="o"><g class="shape" ><rect x="1024.000000" y="332.000000" width="158.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1103.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">위 (wi) - Korean</text></g><g id="p"><g class="shape" ><rect x="984.000000" y="498.000000" width="238.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1103.000000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">吾哥 (ngǔgāi) - Cantonese</text></g><g id="&#34;မင်္ဂလာပါ (mingalaba) - Burmese&#34;"><g class="shape" ><rect x="1290.000000" y="0.000000" width="307.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1443.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">မင်္ဂလာပါ (mingalaba) - Burmese</text></g><g id="&#34;сайн уу (sain uu) - Mongolian&#34;"><g class="shape" ><rect x="1657.000000" y="0.000000" width="264.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1789.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">сайн уу (sain uu) - Mongolian</text></g><g id="&#34;ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi&#34;"><g class="shape" ><rect x="1981.000000" y="0.000000" width="328.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2145.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi</text></g><g id="&#34;你吃了吗 (ní chī le ma) - Mandarin Chinese&#34;"><g class="shape" ><rect x="2369.000000" y="0.000000" width="370.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2554.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">你吃了吗 (ní chī le ma) - Mandarin Chinese</text></g><g id="&#34;饭 (fan) - Zhuang&#34;"><g class="shape" ><rect x="2799.000000" y="0.000000" width="167.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2882.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">饭 (fan) - Zhuang</text></g><g id="مەن سىزنى ياخشى ئۈمىد ق"><g class="shape" ><rect x="3026.000000" y="0.000000" width="266.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="3159.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">مەن سىزنى ياخشى ئۈمىد ق</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 150.500000 68.000000 C 150.500000 106.000000 150.500000 126.000000 150.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(b -&gt; c)[0]"><path d="M 150.500000 234.000000 C 150.500000 272.000000 150.500000 292.000000 150.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(c -&gt; d)[0]"><path d="M 150.500000 400.000000 C 150.500000 438.000000 150.500000 458.000000 150.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(e -&gt; f)[0]"><path d="M 454.500000 68.000000 C 454.500000 106.000000 454.500000 126.000000 454.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(f -&gt; g)[0]"><path d="M 454.500000 234.000000 C 454.500000 272.000000 454.500000 292.000000 454.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(g -&gt; h)[0]"><path d="M 454.500000 400.000000 C 454.500000 438.000000 454.500000 458.000000 454.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(i -&gt; j)[0]"><path d="M 774.000000 68.000000 C 774.000000 106.000000 774.000000 126.000000 774.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(j -&gt; k)[0]"><path d="M 774.000000 234.000000 C 774.000000 272.000000 774.000000 292.000000 774.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(k -&gt; l)[0]"><path d="M 774.000000 400.000000 C 774.000000 438.000000 774.000000 458.000000 774.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(m -&gt; n)[0]"><path d="M 1102.500000 68.000000 C 1102.500000 106.000000 1102.500000 126.000000 1102.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(n -&gt; o)[0]"><path d="M 1102.500000 234.000000 C 1102.500000 272.000000 1102.500000 292.000000 1102.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><g id="(o -&gt; p)[0]"><path d="M 1102.500000 400.000000 C 1102.500000 438.000000 1102.500000 458.000000 1102.500000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#658054005)" /></g><mask id="658054005" maskUnits="userSpaceOnUse" x="-2" y="-2" width="3296" height="568">
 <rect x="-2" y="-2" width="3296" height="568" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/mixed-language-2/elk/sketch.exp.svg b/e2etests/testdata/unicode/mixed-language-2/elk/sketch.exp.svg
index 123d6f848..7f275b7a3 100644
--- a/e2etests/testdata/unicode/mixed-language-2/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/mixed-language-2/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2936" height="478" viewBox="10 10 2936 478"><rect x="10.000000" y="10.000000" width="2936.000000" height="478.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 2936 478"><svg id="d2-svg" width="2936" height="478" viewBox="10 10 2936 478"><rect x="10.000000" y="10.000000" width="2936.000000" height="478.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="a"><g class="shape" ><rect x="42.000000" y="12.000000" width="240.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">我 (wǒ) - Mandarin Chinese</text></g><g id="b"><g class="shape" ><rect x="42.000000" y="148.000000" width="241.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaai dii) - Lao</text></g><g id="c"><g class="shape" ><rect x="12.000000" y="284.000000" width="301.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ជំរាបសួរ (jomreab suor) - Khmer</text></g><g id="d"><g class="shape" ><rect x="40.000000" y="420.000000" width="244.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">สวัสดี (sà-wàt-dii) - Thai</text></g><g id="e"><g class="shape" ><rect x="308.000000" y="12.000000" width="237.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaidee) - Lao</text></g><g id="f"><g class="shape" ><rect x="303.000000" y="148.000000" width="247.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ဟယ်လို (helaou) - Burmese</text></g><g id="g"><g class="shape" ><rect x="338.000000" y="284.000000" width="176.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.000000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mari (まり) - Ainu</text></g><g id="h"><g class="shape" ><rect x="340.000000" y="420.000000" width="173.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cào (草) - Zhuang</text></g><g id="i"><g class="shape" ><rect x="565.000000" y="12.000000" width="282.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="706.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">күнтізбе (kúntízbe) - Kazakh</text></g><g id="j"><g class="shape" ><rect x="594.000000" y="148.000000" width="224.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="706.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">բարև (barev) - Armenian</text></g><g id="k"><g class="shape" ><rect x="573.000000" y="284.000000" width="265.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="705.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">монгол (mongol) - Mongolian</text></g><g id="l"><g class="shape" ><rect x="606.000000" y="420.000000" width="199.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="705.500000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mila (میلا) - Uyghur</text></g><g id="m"><g class="shape" ><rect x="867.000000" y="12.000000" width="255.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">નમસ્તે (namaste) - Gujarati</text></g><g id="n"><g class="shape" ><rect x="888.000000" y="148.000000" width="213.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">漢字 (kanji) - Japanese</text></g><g id="o"><g class="shape" ><rect x="915.000000" y="284.000000" width="158.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.000000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">위 (wi) - Korean</text></g><g id="p"><g class="shape" ><rect x="875.000000" y="420.000000" width="238.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.000000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">吾哥 (ngǔgāi) - Cantonese</text></g><g id="&#34;မင်္ဂလာပါ (mingalaba) - Burmese&#34;"><g class="shape" ><rect x="1142.000000" y="12.000000" width="307.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1295.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">မင်္ဂလာပါ (mingalaba) - Burmese</text></g><g id="&#34;сайн уу (sain uu) - Mongolian&#34;"><g class="shape" ><rect x="1469.000000" y="12.000000" width="264.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1601.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">сайн уу (sain uu) - Mongolian</text></g><g id="&#34;ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi&#34;"><g class="shape" ><rect x="1753.000000" y="12.000000" width="328.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1917.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi</text></g><g id="&#34;你吃了吗 (ní chī le ma) - Mandarin Chinese&#34;"><g class="shape" ><rect x="2101.000000" y="12.000000" width="370.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2286.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">你吃了吗 (ní chī le ma) - Mandarin Chinese</text></g><g id="&#34;饭 (fan) - Zhuang&#34;"><g class="shape" ><rect x="2491.000000" y="12.000000" width="167.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2574.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">饭 (fan) - Zhuang</text></g><g id="مەن سىزنى ياخشى ئۈمىد ق"><g class="shape" ><rect x="2678.000000" y="12.000000" width="266.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2811.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">مەن سىزنى ياخشى ئۈمىد ق</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 162.500000 80.000000 L 162.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(b -&gt; c)[0]"><path d="M 162.500000 216.000000 L 162.500000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(c -&gt; d)[0]"><path d="M 162.500000 352.000000 L 162.500000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(e -&gt; f)[0]"><path d="M 426.500000 80.000000 L 426.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(f -&gt; g)[0]"><path d="M 426.500000 216.000000 L 426.500000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(g -&gt; h)[0]"><path d="M 426.500000 352.000000 L 426.500000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(i -&gt; j)[0]"><path d="M 706.000000 80.000000 L 706.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(j -&gt; k)[0]"><path d="M 706.000000 216.000000 L 706.000000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(k -&gt; l)[0]"><path d="M 706.000000 352.000000 L 706.000000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(m -&gt; n)[0]"><path d="M 994.500000 80.000000 L 994.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(n -&gt; o)[0]"><path d="M 994.500000 216.000000 L 994.500000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(o -&gt; p)[0]"><path d="M 994.500000 352.000000 L 994.500000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><mask id="553854533" maskUnits="userSpaceOnUse" x="10" y="10" width="2936" height="478">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="a"><g class="shape" ><rect x="42.000000" y="12.000000" width="240.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">我 (wǒ) - Mandarin Chinese</text></g><g id="b"><g class="shape" ><rect x="42.000000" y="148.000000" width="241.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaai dii) - Lao</text></g><g id="c"><g class="shape" ><rect x="12.000000" y="284.000000" width="301.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ជំរាបសួរ (jomreab suor) - Khmer</text></g><g id="d"><g class="shape" ><rect x="40.000000" y="420.000000" width="244.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="162.000000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">สวัสดี (sà-wàt-dii) - Thai</text></g><g id="e"><g class="shape" ><rect x="308.000000" y="12.000000" width="237.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ສະບາຍດີ (sabaidee) - Lao</text></g><g id="f"><g class="shape" ><rect x="303.000000" y="148.000000" width="247.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ဟယ်လို (helaou) - Burmese</text></g><g id="g"><g class="shape" ><rect x="338.000000" y="284.000000" width="176.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.000000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mari (まり) - Ainu</text></g><g id="h"><g class="shape" ><rect x="340.000000" y="420.000000" width="173.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="426.500000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">cào (草) - Zhuang</text></g><g id="i"><g class="shape" ><rect x="565.000000" y="12.000000" width="282.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="706.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">күнтізбе (kúntízbe) - Kazakh</text></g><g id="j"><g class="shape" ><rect x="594.000000" y="148.000000" width="224.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="706.000000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">բարև (barev) - Armenian</text></g><g id="k"><g class="shape" ><rect x="573.000000" y="284.000000" width="265.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="705.500000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">монгол (mongol) - Mongolian</text></g><g id="l"><g class="shape" ><rect x="606.000000" y="420.000000" width="199.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="705.500000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mila (میلا) - Uyghur</text></g><g id="m"><g class="shape" ><rect x="867.000000" y="12.000000" width="255.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">નમસ્તે (namaste) - Gujarati</text></g><g id="n"><g class="shape" ><rect x="888.000000" y="148.000000" width="213.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">漢字 (kanji) - Japanese</text></g><g id="o"><g class="shape" ><rect x="915.000000" y="284.000000" width="158.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.000000" y="322.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">위 (wi) - Korean</text></g><g id="p"><g class="shape" ><rect x="875.000000" y="420.000000" width="238.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="994.000000" y="458.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">吾哥 (ngǔgāi) - Cantonese</text></g><g id="&#34;မင်္ဂလာပါ (mingalaba) - Burmese&#34;"><g class="shape" ><rect x="1142.000000" y="12.000000" width="307.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1295.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">မင်္ဂလာပါ (mingalaba) - Burmese</text></g><g id="&#34;сайн уу (sain uu) - Mongolian&#34;"><g class="shape" ><rect x="1469.000000" y="12.000000" width="264.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1601.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">сайн уу (sain uu) - Mongolian</text></g><g id="&#34;ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi&#34;"><g class="shape" ><rect x="1753.000000" y="12.000000" width="328.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="1917.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ (sat sri akal) - Punjabi</text></g><g id="&#34;你吃了吗 (ní chī le ma) - Mandarin Chinese&#34;"><g class="shape" ><rect x="2101.000000" y="12.000000" width="370.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2286.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">你吃了吗 (ní chī le ma) - Mandarin Chinese</text></g><g id="&#34;饭 (fan) - Zhuang&#34;"><g class="shape" ><rect x="2491.000000" y="12.000000" width="167.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2574.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">饭 (fan) - Zhuang</text></g><g id="مەن سىزنى ياخشى ئۈمىد ق"><g class="shape" ><rect x="2678.000000" y="12.000000" width="266.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="2811.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">مەن سىزنى ياخشى ئۈمىد ق</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 162.500000 80.000000 L 162.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(b -&gt; c)[0]"><path d="M 162.500000 216.000000 L 162.500000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(c -&gt; d)[0]"><path d="M 162.500000 352.000000 L 162.500000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(e -&gt; f)[0]"><path d="M 426.500000 80.000000 L 426.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(f -&gt; g)[0]"><path d="M 426.500000 216.000000 L 426.500000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(g -&gt; h)[0]"><path d="M 426.500000 352.000000 L 426.500000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(i -&gt; j)[0]"><path d="M 706.000000 80.000000 L 706.000000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(j -&gt; k)[0]"><path d="M 706.000000 216.000000 L 706.000000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(k -&gt; l)[0]"><path d="M 706.000000 352.000000 L 706.000000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(m -&gt; n)[0]"><path d="M 994.500000 80.000000 L 994.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(n -&gt; o)[0]"><path d="M 994.500000 216.000000 L 994.500000 280.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><g id="(o -&gt; p)[0]"><path d="M 994.500000 352.000000 L 994.500000 416.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#553854533)" /></g><mask id="553854533" maskUnits="userSpaceOnUse" x="10" y="10" width="2936" height="478">
 <rect x="10" y="10" width="2936" height="478" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/mixed-language/dagre/sketch.exp.svg b/e2etests/testdata/unicode/mixed-language/dagre/sketch.exp.svg
index bee153f2e..20b589bd8 100644
--- a/e2etests/testdata/unicode/mixed-language/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/mixed-language/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1004" height="268" viewBox="-2 -2 1004 268"><rect x="-2.000000" y="-2.000000" width="1004.000000" height="268.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1004 268"><svg id="d2-svg" width="1004" height="268" viewBox="-2 -2 1004 268"><rect x="-2.000000" y="-2.000000" width="1004.000000" height="268.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -791,4 +771,4 @@
 </div></foreignObject></g></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 355.964855 98.699922 C 250.767677 138.000000 224.000000 158.000000 224.000000 194.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2187704431)" /></g><g id="(a -&gt; c)[0]"><path d="M 622.035145 98.699922 C 727.232323 138.000000 754.000000 158.200000 754.000000 195.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2187704431)" /></g><mask id="2187704431" maskUnits="userSpaceOnUse" x="-2" y="-2" width="1004" height="268">
 <rect x="-2" y="-2" width="1004" height="268" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/mixed-language/elk/sketch.exp.svg b/e2etests/testdata/unicode/mixed-language/elk/sketch.exp.svg
index 6199c5857..981516431 100644
--- a/e2etests/testdata/unicode/mixed-language/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/mixed-language/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="964" height="248" viewBox="10 10 964 248"><rect x="10.000000" y="10.000000" width="964.000000" height="248.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 964 248"><svg id="d2-svg" width="964" height="248" viewBox="10 10 964 248"><rect x="10.000000" y="10.000000" width="964.000000" height="248.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
@@ -24,27 +24,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><style type="text/css">.md em,
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><style type="text/css">.md em,
 .md dfn {
   font-family: "font-italic";
 }
@@ -791,4 +771,4 @@
 </div></foreignObject></g></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 236.000000 112.000000 L 236.000000 186.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2212244532)" /></g><g id="(a -&gt; c)[0]"><path d="M 378.666667 112.000000 L 378.666667 140.000000 S 378.666667 150.000000 388.666667 150.000000 L 716.000000 150.000000 S 726.000000 150.000000 726.000000 160.000000 L 726.000000 186.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2212244532)" /></g><mask id="2212244532" maskUnits="userSpaceOnUse" x="10" y="10" width="964" height="248">
 <rect x="10" y="10" width="964" height="248" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/with-style/dagre/sketch.exp.svg b/e2etests/testdata/unicode/with-style/dagre/sketch.exp.svg
index 090545692..5997ecf8e 100644
--- a/e2etests/testdata/unicode/with-style/dagre/sketch.exp.svg
+++ b/e2etests/testdata/unicode/with-style/dagre/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="215" height="96" viewBox="-15 -15 215 96"><rect x="-15.000000" y="-15.000000" width="215.000000" height="96.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 215 96"><svg id="d2-svg" width="215" height="96" viewBox="-15 -15 215 96"><rect x="-15.000000" y="-15.000000" width="215.000000" height="96.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="おやすみなさい"><g class="shape" ><rect x="0.000000" y="0.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="5.000000" y="5.000000" width="175.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /></g><text x="92.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="3361144730" maskUnits="userSpaceOnUse" x="-15" y="-15" width="215" height="96">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="おやすみなさい"><g class="shape" ><rect x="0.000000" y="0.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="5.000000" y="5.000000" width="175.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /></g><text x="92.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="3361144730" maskUnits="userSpaceOnUse" x="-15" y="-15" width="215" height="96">
 <rect x="-15" y="-15" width="215" height="96" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/unicode/with-style/elk/sketch.exp.svg b/e2etests/testdata/unicode/with-style/elk/sketch.exp.svg
index 499f604fb..ede0552c5 100644
--- a/e2etests/testdata/unicode/with-style/elk/sketch.exp.svg
+++ b/e2etests/testdata/unicode/with-style/elk/sketch.exp.svg
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="215" height="96" viewBox="-3 -3 215 96"><rect x="-3.000000" y="-3.000000" width="215.000000" height="96.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 215 96"><svg id="d2-svg" width="215" height="96" viewBox="-3 -3 215 96"><rect x="-3.000000" y="-3.000000" width="215.000000" height="96.000000" class=" fill-N7" /><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }
@@ -17,27 +17,7 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-  if (document.documentElement.getAttribute("id") !== "d2-svg") {
-    return;
-  }
-  const svgEl = document.documentElement;
-  let width = parseInt(svgEl.getAttribute("width"), 10);
-  let height = parseInt(svgEl.getAttribute("height"), 10);
-  let ratio;
-  if (width > height) {
-    if (width > window.innerWidth) {
-      ratio = window.innerWidth / width;
-    }
-  } else if (height > window.innerHeight) {
-    ratio = window.innerHeight / height;
-  }
-  if (ratio) {
-    svgEl.setAttribute("width", width * ratio - 16);
-    svgEl.setAttribute("height", height * ratio - 16);
-  }
-});
-]]></script><g id="おやすみなさい"><g class="shape" ><rect x="12.000000" y="12.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="17.000000" y="17.000000" width="175.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /></g><text x="104.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="580601010" maskUnits="userSpaceOnUse" x="-3" y="-3" width="215" height="96">
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><g id="おやすみなさい"><g class="shape" ><rect x="12.000000" y="12.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="17.000000" y="17.000000" width="175.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /></g><text x="104.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="580601010" maskUnits="userSpaceOnUse" x="-3" y="-3" width="215" height="96">
 <rect x="-3" y="-3" width="215" height="96" fill="white"></rect>
 
-</mask></svg>
\ No newline at end of file
+</mask></svg></svg>
\ No newline at end of file