diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index 3899ec4f7..27eb33bdc 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -1,9 +1,11 @@
 #### Features 🚀
 
 - Crow foot notation is now supported. [#578](https://github.com/terrastruct/d2/pull/578)
+- Exported SVGs also fit to screen on open. [#601](https://github.com/terrastruct/d2/pull/601)
 
 #### Improvements 🧹
 
 #### Bugfixes ⛑️
 
 - Appendix seperator line no longer added to PNG export when appendix doesn't exist. [#582](https://github.com/terrastruct/d2/pull/582)
+- Watch mode only fits to screen on initial load. [#601](https://github.com/terrastruct/d2/pull/601)
diff --git a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
index 5b2e6de56..efb2c8aba 100644
--- a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1597" height="835" viewBox="-102 -102 1597 835"><style type="text/css">
@@ -23,7 +24,27 @@ width="1597" height="835" viewBox="-102 -102 1597 835"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
   <pattern id="streaks"
            x="0" y="0" width="100" height="100"
            patternUnits="userSpaceOnUse" >
diff --git a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
index 64dcdfce3..fa9cb40e1 100644
--- a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="319" height="556" viewBox="-102 -102 319 556"><style type="text/css">
@@ -23,7 +24,27 @@ width="319" height="556" viewBox="-102 -102 319 556"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
   <pattern id="streaks"
            x="0" y="0" width="100" height="100"
            patternUnits="userSpaceOnUse" >
diff --git a/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg b/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
index aefb722c2..c2cd49cfc 100644
--- a/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="452" height="756" viewBox="-102 -102 452 756"><style type="text/css">
@@ -23,7 +24,27 @@ width="452" height="756" viewBox="-102 -102 452 756"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
   <pattern id="streaks"
            x="0" y="0" width="100" height="100"
            patternUnits="userSpaceOnUse" >
diff --git a/d2renderers/d2sketch/testdata/class/sketch.exp.svg b/d2renderers/d2sketch/testdata/class/sketch.exp.svg
index cd594c963..013a036f7 100644
--- a/d2renderers/d2sketch/testdata/class/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/class/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="626" height="572" viewBox="-102 -102 626 572"><style type="text/css">
@@ -23,7 +24,27 @@ width="626" height="572" viewBox="-102 -102 626 572"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
   <pattern id="streaks"
            x="0" y="0" width="100" height="100"
            patternUnits="userSpaceOnUse" >
diff --git a/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg b/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
index 87e3a7763..5bc3c0273 100644
--- a/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="319" height="556" viewBox="-102 -102 319 556"><style type="text/css">
@@ -23,7 +24,27 @@ width="319" height="556" viewBox="-102 -102 319 556"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
   <pattern id="streaks"
            x="0" y="0" width="100" height="100"
            patternUnits="userSpaceOnUse" >
diff --git a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
index 809406b67..faf736cb5 100644
--- a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1029" height="664" viewBox="-102 -102 1029 664"><style type="text/css">
@@ -23,7 +24,27 @@ width="1029" height="664" viewBox="-102 -102 1029 664"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
   <pattern id="streaks"
            x="0" y="0" width="100" height="100"
            patternUnits="userSpaceOnUse" >
diff --git a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
index ec449734e..3988c521e 100644
--- a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="3458" height="2451" viewBox="-102 -102 3458 2451"><style type="text/css">
@@ -23,7 +24,27 @@ width="3458" height="2451" viewBox="-102 -102 3458 2451"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 2dab2538e..b307fd5d2 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1963" height="2341" viewBox="-177 -49 1963 2341"><style type="text/css">
@@ -18,7 +19,27 @@ width="1963" height="2341" viewBox="-177 -49 1963 2341"><style type="text/css">
 }
 
 ]]>
-</style><g id="customer"><g class="shape" ><path d="M 193 181 H 24 V 179.2093 C 24 157.7209 42.5578 138.3488 71.7555 129.0698 C 55.672 121.5814 46.022 109.3721 46.022 96.0233 C 46.022 73.3953 73.9824 55 108.3763 55 C 142.7702 55 170.7306 73.3953 170.7306 96.0233 C 170.7306 109.3721 161.328 121.4186 144.9971 129.2326 C 174.1948 138.5117 192.7526 157.8838 192.7526 179.3721 V 181 H 193 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="108.500000" y="202.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">customer</text></g><g id="issuer"><g class="shape" ><rect x="284" y="76" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="359.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">issuer</text></g><g id="store"><g class="shape" ><rect x="534" y="76" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="609.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">store</text><g transform="translate(668 60)" 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="778" y="76" width="162" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="859.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">acquirer</text><g transform="translate(924 60)" 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'm not sure what this is</title></g><g id="network"><g class="shape" ><rect x="1029" y="76" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1109.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">network</text></g><g id="customer bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="1284" y="53" width="150" height="128" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1359.000000" y="202.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">customer bank</text></g><g id="store bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="1534" y="53" width="150" height="128" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1609.000000" y="202.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">store bank</text></g><g id="(customer -- )[0]"><path d="M 108.500000 209.000000 L 108.500000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(issuer -- )[0]"><path d="M 359.000000 204.000000 L 359.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(store -- )[0]"><path d="M 609.000000 204.000000 L 609.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(acquirer -- )[0]"><path d="M 859.000000 204.000000 L 859.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(network -- )[0]"><path d="M 1109.000000 204.000000 L 1109.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(customer bank -- )[0]"><path d="M 1359.000000 209.000000 L 1359.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(store bank -- )[0]"><path d="M 1609.000000 209.000000 L 1609.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="customer.internal"><g class="shape" ><rect x="102" y="576" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="initial transaction"><g class="shape blend" ><rect x="58" y="292" width="600" height="210" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="124.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">initial transaction</text></g><g id="payment processor behind the scenes"><g class="shape blend" ><rect x="285" y="1328" width="1398" height="624" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="419.000000" y="1349.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">payment processor behind the scenes</text></g><g id="payment processor behind the scenes.simplified"><g class="shape blend" ><rect x="309" y="1588" width="1350" height="340" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="349.500000" y="1609.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">simplified</text></g><g id="(customer -&gt; store)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 110.500000 332.000000 L 605.000000 332.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="358.500000" y="338.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1 banana please</text></g><g id="(store -&gt; customer)[0]"><path d="M 607.000000 462.000000 L 112.500000 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="358.500000" y="468.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">$10 dollars</text></g><g id="customer.(internal -&gt; internal)[0]"><path d="M 116.500000 592.000000 L 198.500000 592.000000 S 208.500000 592.000000 208.500000 602.000000 L 208.500000 662.000000 S 208.500000 672.000000 198.500000 672.000000 L 118.500000 672.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="209.000000" y="638.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">thinking: wow, inflation</text></g><g id="(customer.internal -&gt; customer bank)[0]"><path d="M 116.500000 722.000000 L 1355.000000 722.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="737.000000" y="728.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">checks bank account</text></g><g id="(customer bank -&gt; customer.internal)[0]"><path d="M 1357.000000 852.000000 L 118.500000 852.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="736.500000" y="858.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Savings: $11</text></g><g id="(customer -&gt; store)[1]"><path d="M 110.500000 1238.000000 L 605.000000 1238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="358.500000" y="1244.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">I can do that, here&#39;s my card</text></g><g id="(store -&gt; acquirer)[0]"><path d="M 611.000000 1368.000000 L 855.000000 1368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="734.000000" y="1374.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Run this card</text></g><g id="(acquirer -&gt; network)[0]"><path d="M 861.000000 1498.000000 L 1105.000000 1498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="984.500000" y="1504.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Process to card issuer</text></g><g id="(network -&gt; issuer)[0]"><path d="M 1107.000000 1628.000000 L 363.000000 1628.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="734.000000" y="1634.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Process this payment</text></g><g id="(issuer -&gt; customer bank)[0]"><path d="M 361.000000 1758.000000 L 1355.000000 1758.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="859.500000" y="1764.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">$10 debit</text></g><g id="(acquirer -&gt; store bank)[0]"><path d="M 861.000000 1888.000000 L 1605.000000 1888.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="1234.500000" y="1894.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">$10 credit</text></g><g id="customer.An error in judgement is about to occur"><g class="shape" ><path d="M -74.5 982 H 271.1836 C 272.3544 982 273.479 982.4563 274.3189 983.272 L 290.6353 999.12 C 291.5077 999.9674 292 1001.1318 292 1002.348 V 1107.5 C 292 1107.7761 291.7761 1108 291.5 1108 H -74.5 C -74.7761 1108 -75 1107.7761 -75 1107.5 V 982.5 C -75 982.2239 -74.7761 982 -74.5 982 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 290.918 1108 H -73.918 C -74.5672 1108 -75 1107.5671 -75 1106.9178 V 983.0822 C -75 982.4329 -74.5672 982 -73.918 982 H 270.3607 C 271.0099 982 271.4427 982.4329 271.4427 983.0822 V 1000.1808 C 271.4427 1001.4794 272.3083 1002.5616 273.823 1002.5616 H 290.918 C 291.5672 1002.5616 292 1002.9945 292 1003.6436 V 1106.9178 C 291 1107.5671 291.5672 1108 290.918 1108 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="108.500000" y="1048.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">An error in judgement is about to occur</text></g><mask id="3529629303" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1963" height="2167">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 193 181 H 24 V 179.2093 C 24 157.7209 42.5578 138.3488 71.7555 129.0698 C 55.672 121.5814 46.022 109.3721 46.022 96.0233 C 46.022 73.3953 73.9824 55 108.3763 55 C 142.7702 55 170.7306 73.3953 170.7306 96.0233 C 170.7306 109.3721 161.328 121.4186 144.9971 129.2326 C 174.1948 138.5117 192.7526 157.8838 192.7526 179.3721 V 181 H 193 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="108.500000" y="202.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">customer</text></g><g id="issuer"><g class="shape" ><rect x="284" y="76" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="359.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">issuer</text></g><g id="store"><g class="shape" ><rect x="534" y="76" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="609.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">store</text><g transform="translate(668 60)" 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="778" y="76" width="162" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="859.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">acquirer</text><g transform="translate(924 60)" 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'm not sure what this is</title></g><g id="network"><g class="shape" ><rect x="1029" y="76" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1109.000000" y="142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">network</text></g><g id="customer bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="1284" y="53" width="150" height="128" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1359.000000" y="202.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">customer bank</text></g><g id="store bank"><g class="shape" ><image href="https://cdn-icons-png.flaticon.com/512/858/858170.png" x="1534" y="53" width="150" height="128" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1609.000000" y="202.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">store bank</text></g><g id="(customer -- )[0]"><path d="M 108.500000 209.000000 L 108.500000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(issuer -- )[0]"><path d="M 359.000000 204.000000 L 359.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(store -- )[0]"><path d="M 609.000000 204.000000 L 609.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(acquirer -- )[0]"><path d="M 859.000000 204.000000 L 859.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(network -- )[0]"><path d="M 1109.000000 204.000000 L 1109.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(customer bank -- )[0]"><path d="M 1359.000000 209.000000 L 1359.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="(store bank -- )[0]"><path d="M 1609.000000 209.000000 L 1609.000000 2017.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3529629303)"/></g><g id="customer.internal"><g class="shape" ><rect x="102" y="576" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="initial transaction"><g class="shape blend" ><rect x="58" y="292" width="600" height="210" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="124.000000" y="313.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">initial transaction</text></g><g id="payment processor behind the scenes"><g class="shape blend" ><rect x="285" y="1328" width="1398" height="624" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="419.000000" y="1349.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">payment processor behind the scenes</text></g><g id="payment processor behind the scenes.simplified"><g class="shape blend" ><rect x="309" y="1588" width="1350" height="340" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="349.500000" y="1609.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">simplified</text></g><g id="(customer -&gt; store)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 110.500000 332.000000 L 605.000000 332.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="358.500000" y="338.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1 banana please</text></g><g id="(store -&gt; customer)[0]"><path d="M 607.000000 462.000000 L 112.500000 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="358.500000" y="468.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">$10 dollars</text></g><g id="customer.(internal -&gt; internal)[0]"><path d="M 116.500000 592.000000 L 198.500000 592.000000 S 208.500000 592.000000 208.500000 602.000000 L 208.500000 662.000000 S 208.500000 672.000000 198.500000 672.000000 L 118.500000 672.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="209.000000" y="638.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">thinking: wow, inflation</text></g><g id="(customer.internal -&gt; customer bank)[0]"><path d="M 116.500000 722.000000 L 1355.000000 722.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="737.000000" y="728.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">checks bank account</text></g><g id="(customer bank -&gt; customer.internal)[0]"><path d="M 1357.000000 852.000000 L 118.500000 852.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="736.500000" y="858.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Savings: $11</text></g><g id="(customer -&gt; store)[1]"><path d="M 110.500000 1238.000000 L 605.000000 1238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="358.500000" y="1244.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">I can do that, here&#39;s my card</text></g><g id="(store -&gt; acquirer)[0]"><path d="M 611.000000 1368.000000 L 855.000000 1368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="734.000000" y="1374.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Run this card</text></g><g id="(acquirer -&gt; network)[0]"><path d="M 861.000000 1498.000000 L 1105.000000 1498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="984.500000" y="1504.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Process to card issuer</text></g><g id="(network -&gt; issuer)[0]"><path d="M 1107.000000 1628.000000 L 363.000000 1628.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="734.000000" y="1634.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Process this payment</text></g><g id="(issuer -&gt; customer bank)[0]"><path d="M 361.000000 1758.000000 L 1355.000000 1758.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="859.500000" y="1764.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">$10 debit</text></g><g id="(acquirer -&gt; store bank)[0]"><path d="M 861.000000 1888.000000 L 1605.000000 1888.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3529629303)"/><text class="text-italic" x="1234.500000" y="1894.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">$10 credit</text></g><g id="customer.An error in judgement is about to occur"><g class="shape" ><path d="M -74.5 982 H 271.1836 C 272.3544 982 273.479 982.4563 274.3189 983.272 L 290.6353 999.12 C 291.5077 999.9674 292 1001.1318 292 1002.348 V 1107.5 C 292 1107.7761 291.7761 1108 291.5 1108 H -74.5 C -74.7761 1108 -75 1107.7761 -75 1107.5 V 982.5 C -75 982.2239 -74.7761 982 -74.5 982 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 290.918 1108 H -73.918 C -74.5672 1108 -75 1107.5671 -75 1106.9178 V 983.0822 C -75 982.4329 -74.5672 982 -73.918 982 H 270.3607 C 271.0099 982 271.4427 982.4329 271.4427 983.0822 V 1000.1808 C 271.4427 1001.4794 272.3083 1002.5616 273.823 1002.5616 H 290.918 C 291.5672 1002.5616 292 1002.9945 292 1003.6436 V 1106.9178 C 291 1107.5671 291.5672 1108 290.918 1108 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="108.500000" y="1048.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">An error in judgement is about to occur</text></g><mask id="3529629303" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1963" height="2167">
 <rect x="-100" y="-100" width="1963" height="2167" fill="white"></rect>
 <rect x="63.000000" y="297.000000" width="122" height="21" fill="black"></rect>
 <rect x="290.000000" y="1333.000000" width="258" height="21" fill="black"></rect>
diff --git a/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
index 7aab3a9ee..a988f90be 100644
--- a/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="565" height="803" viewBox="-102 -118 565 803"><style type="text/css">
@@ -18,7 +19,27 @@ width="565" height="803" viewBox="-102 -118 565 803"><style type="text/css">
 }
 
 ]]>
-</style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
 knowing I can't make my satellite dish PAYMENTS!</title><g transform="translate(66 210)" 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-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3307079837)"/></g><mask id="3307079837" maskUnits="userSpaceOnUse" x="-100" y="-100" width="334" height="572">
 <rect x="-100" y="-100" width="334" height="572" fill="white"></rect>
 
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 ea2e073c0..c847eef18 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="566" height="751" viewBox="-102 -118 566 751"><style type="text/css">
@@ -18,7 +19,27 @@ width="566" height="751" viewBox="-102 -118 566 751"><style type="text/css">
 }
 
 ]]>
-</style><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210)" 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,
 knowing I can't make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3421969999)"/></g><mask id="3421969999" maskUnits="userSpaceOnUse" x="-100" y="-100" width="334" height="572">
 <rect x="-100" y="-100" width="334" height="572" fill="white"></rect>
 
diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 2f7f931f0..678f0c2ae 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -74,6 +74,7 @@ func setViewbox(writer io.Writer, diagram *d2target.Diagram, pad int) (width int
 	// TODO background stuff. e.g. dotted, grid, colors
 	fmt.Fprintf(writer, `<?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="%d" height="%d" viewBox="%d %d %d %d">`, w, h, tl.X-pad, tl.Y-pad, w, h)
@@ -1096,6 +1097,9 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
 	buf.WriteString(`]]></style>`)
 }
 
+//go:embed fitToScreen.js
+var fitToScreenScript string
+
 // TODO minify output at end
 func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	var sketchRunner *d2sketch.Runner
@@ -1124,6 +1128,10 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 ]]>
 </style>`, styleCSS, styleCSS2))
 
+	// this script won't run in --watch mode because script tags are ignored when added via el.innerHTML = element
+	// https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
+	buf.WriteString(fmt.Sprintf(`<script type="application/javascript"><![CDATA[%s]]></script>`, fitToScreenScript))
+
 	hasMarkdown := false
 	for _, s := range diagram.Shapes {
 		if s.Label != "" && s.Type == d2target.ShapeText {
diff --git a/d2renderers/d2svg/fitToScreen.js b/d2renderers/d2svg/fitToScreen.js
new file mode 100644
index 000000000..51e6d6ea4
--- /dev/null
+++ b/d2renderers/d2svg/fitToScreen.js
@@ -0,0 +1,20 @@
+window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } else if (height > window.innerHeight) {
+    ratio = window.innerHeight / height;
+  }
+  if (ratio) {
+    svgEl.setAttribute("width", width * ratio - 16);
+    svgEl.setAttribute("height", height * ratio - 16);
+  }
+});
diff --git a/docs/assets/flow.svg b/docs/assets/flow.svg
index 01f73045c..fbb675e9e 100644
--- a/docs/assets/flow.svg
+++ b/docs/assets/flow.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="485" height="1908" viewBox="-100 -100 485 1908"><style type="text/css">
diff --git a/docs/examples/chess/dia.svg b/docs/examples/chess/dia.svg
index ed6b0108a..bb3915edb 100644
--- a/docs/examples/chess/dia.svg
+++ b/docs/examples/chess/dia.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="741" height="1330" viewBox="-100 -100 741 1330"><style type="text/css">
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 01e6a9fac..5815a5190 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2352" height="441" viewBox="-102 -102 2352 441"><style type="text/css">
@@ -18,7 +19,27 @@ width="2352" height="441" viewBox="-102 -102 2352 441"><style type="text/css">
 }
 
 ]]>
-</style><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="2148" height="237" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1074.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="644" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="778.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1122" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1187.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1462" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1571.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1889" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1966.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 437.500000 118.500000 C 518.300000 118.500000 559.900000 118.500000 639.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="540.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 915.500000 118.500000 C 996.300000 118.500000 1037.900000 118.500000 1117.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1018.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1257.500000 118.500000 C 1336.300000 118.500000 1377.900000 118.500000 1457.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1357.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1682.500000 118.500000 C 1763.300000 118.500000 1804.900000 118.500000 1884.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1784.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2571260716" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2352" height="441">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="2148" height="237" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1074.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="105" y="50" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="644" y="50" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="778.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="1122" y="50" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1187.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1462" y="50" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1571.000000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1889" y="50" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1966.500000" y="125.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 437.500000 118.500000 C 518.300000 118.500000 559.900000 118.500000 639.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="540.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 915.500000 118.500000 C 996.300000 118.500000 1037.900000 118.500000 1117.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1018.000000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1257.500000 118.500000 C 1336.300000 118.500000 1377.900000 118.500000 1457.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1357.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1682.500000 118.500000 C 1763.300000 118.500000 1804.900000 118.500000 1884.500000 118.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2571260716)"/><text class="text-italic" x="1784.500000" y="124.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="2571260716" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2352" height="441">
 <rect x="-100" y="-100" width="2352" height="441" fill="white"></rect>
 <rect x="513.000000" y="108.000000" width="54" height="21" fill="black"></rect>
 <rect x="949.000000" y="108.000000" width="138" height="21" fill="black"></rect>
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 f6b7a4730..5fb575b7c 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2097" height="491" viewBox="-90 -90 2097 491"><style type="text/css">
@@ -18,7 +19,27 @@ width="2097" height="491" viewBox="-90 -90 2097 491"><style type="text/css">
 }
 
 ]]>
-</style><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="1893" height="287" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="958.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="511" y="87" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="645.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="958" y="87" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1023.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1248" y="87" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1357.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1675" y="87" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1752.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 419.000000 155.500000 L 507.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="464.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 782.000000 155.500000 L 954.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="869.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1093.000000 155.500000 L 1244.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1168.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1468.000000 155.500000 L 1671.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1570.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1960525210" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2097" height="491">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="1893" height="287" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="958.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="511" y="87" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="645.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="958" y="87" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1023.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="1248" y="87" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1357.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="1675" y="87" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1752.500000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 419.000000 155.500000 L 507.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="464.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 782.000000 155.500000 L 954.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="869.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Builds zip &amp; pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 1093.000000 155.500000 L 1244.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1168.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 1468.000000 155.500000 L 1671.000000 155.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1960525210)"/><text class="text-italic" x="1570.500000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Changes the live lambdas</text></g><mask id="1960525210" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2097" height="491">
 <rect x="-100" y="-100" width="2097" height="491" fill="white"></rect>
 <rect x="437.000000" y="145.000000" width="54" height="21" fill="black"></rect>
 <rect x="800.000000" y="145.000000" width="138" height="21" fill="black"></rect>
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 2ff433a1f..c9fcffb75 100644
--- a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1431" height="572" viewBox="-102 -102 1431 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="1431" height="572" viewBox="-102 -102 1431 572"><style type="text/css">
 }
 
 ]]>
-</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><mask id="4049001157" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1431" height="572">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><mask id="4049001157" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1431" height="572">
 <rect x="-100" y="-100" width="1431" height="572" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 06dda78ad..726f95d7b 100644
--- a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1231" height="572" viewBox="-90 -90 1231 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="1231" height="572" viewBox="-90 -90 1231 572"><style type="text/css">
 }
 
 ]]>
-</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="12" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="87.500000" dy="0.000000">ninety</tspan><tspan x="87.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="183" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="258.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="354" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="435.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="435.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="536" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="613.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="715" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="786.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="710" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="787.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="884" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="961.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 613.000000 156.000000 L 613.000000 194.000000 S 613.000000 204.000000 623.000000 204.000000 L 741.250000 204.000000 S 751.250000 204.000000 751.250000 214.000000 L 751.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 787.000000 156.000000 L 787.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 961.500000 156.000000 L 961.500000 194.000000 S 961.500000 204.000000 951.500000 204.000000 L 832.750000 204.000000 S 822.750000 204.000000 822.750000 214.000000 L 822.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><mask id="3106414556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1231" height="572">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="87.500000" dy="0.000000">ninety</tspan><tspan x="87.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="183" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="258.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="354" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="435.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="435.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="435.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="536" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="613.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="715" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="786.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="710" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="787.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="884" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="961.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 613.000000 156.000000 L 613.000000 194.000000 S 613.000000 204.000000 623.000000 204.000000 L 741.250000 204.000000 S 751.250000 204.000000 751.250000 214.000000 L 751.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 787.000000 156.000000 L 787.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 961.500000 156.000000 L 961.500000 194.000000 S 961.500000 204.000000 951.500000 204.000000 L 832.750000 204.000000 S 822.750000 204.000000 822.750000 214.000000 L 822.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3106414556)"/></g><mask id="3106414556" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1231" height="572">
 <rect x="-100" y="-100" width="1231" height="572" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
index fb098ef76..d256d0cb8 100644
--- a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1534" height="1692" viewBox="-102 -102 1534 1692"><style type="text/css">
@@ -18,7 +19,27 @@ width="1534" height="1692" viewBox="-102 -102 1534 1692"><style type="text/css">
 }
 
 ]]>
-</style><g id="build_workflow"><g class="shape" ><rect x="0" y="0" width="430" height="1488" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="215.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="470" y="0" width="371" height="849" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="655.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="881" y="0" width="369" height="849" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1065.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="50" y="73" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.000000" y="148.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="81" y="356" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="431.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="150" y="639" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="714.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="106" y="995" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.000000" y="1070.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="138" y="1278" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="1353.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="520" y="73" width="271" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="655.500000" y="148.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="521" y="356" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="655.500000" y="431.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="578" y="639" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="655.500000" y="714.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="947" y="73" width="238" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1066.000000" y="148.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="931" y="356" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1065.500000" y="431.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="988" y="639" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1065.500000" y="714.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 215.000000 212.000000 C 215.000000 268.400000 215.000000 297.600000 215.000000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.500000" y="290.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 215.000000 495.000000 C 215.000000 551.400000 215.000000 580.600000 215.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.000000" y="573.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 215.000000 780.000000 C 215.000000 834.400000 215.000000 936.600000 215.000000 991.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.500000" y="893.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 215.000000 1134.000000 C 215.000000 1190.400000 215.000000 1219.600000 215.000000 1274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.500000" y="1212.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 655.500000 212.000000 C 655.500000 268.400000 655.500000 297.600000 655.500000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="656.000000" y="290.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 655.500000 495.000000 C 655.500000 551.400000 655.500000 580.600000 655.500000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="655.500000" y="533.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E"><tspan x="655.500000" dy="0.000000">Builds zip</tspan><tspan x="655.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="655.500000" dy="21.200000"> </tspan><tspan x="655.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="655.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 1065.500000 212.000000 C 1065.500000 268.400000 1065.500000 297.600000 1065.500000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="1065.500000" y="290.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">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 1065.500000 495.000000 C 1065.500000 551.400000 1065.500000 580.600000 1065.500000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="1065.500000" y="573.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">test</text></g><mask id="550366479" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1534" height="1692">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="430" height="1488" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="215.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="470" y="0" width="371" height="849" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="655.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="881" y="0" width="369" height="849" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1065.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="50" y="73" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.000000" y="148.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="81" y="356" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="431.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="150" y="639" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="714.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="106" y="995" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.000000" y="1070.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="138" y="1278" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="215.500000" y="1353.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="520" y="73" width="271" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="655.500000" y="148.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="521" y="356" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="655.500000" y="431.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="578" y="639" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="655.500000" y="714.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="947" y="73" width="238" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1066.000000" y="148.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="931" y="356" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1065.500000" y="431.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="988" y="639" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1065.500000" y="714.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 215.000000 212.000000 C 215.000000 268.400000 215.000000 297.600000 215.000000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.500000" y="290.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 215.000000 495.000000 C 215.000000 551.400000 215.000000 580.600000 215.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.000000" y="573.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 215.000000 780.000000 C 215.000000 834.400000 215.000000 936.600000 215.000000 991.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.500000" y="893.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 215.000000 1134.000000 C 215.000000 1190.400000 215.000000 1219.600000 215.000000 1274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="215.500000" y="1212.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 655.500000 212.000000 C 655.500000 268.400000 655.500000 297.600000 655.500000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="656.000000" y="290.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 655.500000 495.000000 C 655.500000 551.400000 655.500000 580.600000 655.500000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="655.500000" y="533.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E"><tspan x="655.500000" dy="0.000000">Builds zip</tspan><tspan x="655.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="655.500000" dy="21.200000"> </tspan><tspan x="655.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="655.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 1065.500000 212.000000 C 1065.500000 268.400000 1065.500000 297.600000 1065.500000 352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="1065.500000" y="290.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">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 1065.500000 495.000000 C 1065.500000 551.400000 1065.500000 580.600000 1065.500000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#550366479)"/><text class="text-italic" x="1065.500000" y="573.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">test</text></g><mask id="550366479" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1534" height="1692">
 <rect x="-100" y="-100" width="1534" height="1692" fill="white"></rect>
 <rect x="182.000000" y="270.000000" width="67" height="26" fill="black"></rect>
 <rect x="119.000000" y="553.000000" width="192" height="26" fill="black"></rect>
diff --git a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
index f1e943e74..4395498b0 100644
--- a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1829" height="1303" viewBox="-90 -90 1829 1303"><style type="text/css">
@@ -18,7 +19,27 @@ width="1829" height="1303" viewBox="-90 -90 1829 1303"><style type="text/css">
 }
 
 ]]>
-</style><g id="build_workflow"><g class="shape" ><rect x="12" y="12" width="480" height="1099" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="252.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="512" y="175" width="421" height="773" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="722.500000" y="208.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="953" y="215" width="684" height="693" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1295.000000" y="248.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="117" y="290" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="365.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="186" y="493" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="568.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="143" y="696" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="771.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="174" y="899" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="974.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="587" y="250" width="271" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="722.500000" y="325.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="588" y="453" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="722.500000" y="528.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="645" y="736" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="722.500000" y="811.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="1175" y="290" width="238" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.000000" y="365.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="1160" y="493" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.500000" y="568.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="1217" y="696" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.500000" y="771.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 252.000000 226.000000 L 252.000000 286.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.500000" y="264.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 252.000000 429.000000 L 252.000000 489.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.000000" y="467.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 252.000000 634.000000 L 252.000000 692.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.500000" y="670.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 252.000000 835.000000 L 252.000000 895.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.500000" y="873.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 722.500000 389.000000 L 722.500000 449.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="723.000000" y="427.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 722.500000 592.000000 L 722.500000 732.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="722.500000" y="630.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E"><tspan x="722.500000" dy="0.000000">Builds zip</tspan><tspan x="722.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="722.500000" dy="21.200000"> </tspan><tspan x="722.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="722.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 1294.500000 429.000000 L 1294.500000 489.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="1294.500000" y="467.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">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 1294.500000 632.000000 L 1294.500000 692.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="1294.500000" y="670.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">test</text></g><mask id="359812323" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1829" height="1303">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="480" height="1099" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="252.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-build.yaml</text></g><g id="deploy_workflow"><g class="shape" ><rect x="512" y="175" width="421" height="773" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="722.500000" y="208.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">lambda-deploy.yaml</text></g><g id="apollo_workflow"><g class="shape" ><rect x="953" y="215" width="684" height="693" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1295.000000" y="248.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">apollo-deploy.yaml</text></g><g id="build_workflow.push"><g class="shape" ><rect x="87" y="87" width="330" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="162.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Push to main branch</text></g><g id="build_workflow.GHA"><g class="shape" ><rect x="117" y="290" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="365.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="build_workflow.S3"><g class="shape" ><rect x="186" y="493" width="131" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="568.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">S3</text></g><g id="build_workflow.Terraform"><g class="shape" ><rect x="143" y="696" width="218" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="771.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Terraform</text></g><g id="build_workflow.AWS"><g class="shape" ><rect x="174" y="899" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="974.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="deploy_workflow.manual"><g class="shape" ><rect x="587" y="250" width="271" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="722.500000" y="325.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Manual Trigger</text></g><g id="deploy_workflow.GHA"><g class="shape" ><rect x="588" y="453" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="722.500000" y="528.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="deploy_workflow.AWS"><g class="shape" ><rect x="645" y="736" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="722.500000" y="811.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="apollo_workflow.apollo"><g class="shape" ><rect x="1175" y="290" width="238" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.000000" y="365.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">Apollo Repo</text></g><g id="apollo_workflow.GHA"><g class="shape" ><rect x="1160" y="493" width="269" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.500000" y="568.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">GitHub Actions</text></g><g id="apollo_workflow.AWS"><g class="shape" ><rect x="1217" y="696" width="155" height="137" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.500000" y="771.000000" style="text-anchor:middle;font-size:25px;fill:#0A0F25">AWS</text></g><g id="build_workflow.(push -&gt; GHA)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 252.000000 226.000000 L 252.000000 286.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.500000" y="264.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Triggers</text></g><g id="build_workflow.(GHA -&gt; S3)[0]"><path d="M 252.000000 429.000000 L 252.000000 489.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.000000" y="467.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Builds zip and pushes it</text></g><g id="build_workflow.(S3 &lt;-&gt; Terraform)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 252.000000 634.000000 L 252.000000 692.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.500000" y="670.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Pulls zip to deploy</text></g><g id="build_workflow.(Terraform -&gt; AWS)[0]"><path d="M 252.000000 835.000000 L 252.000000 895.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="252.500000" y="873.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Changes live lambdas</text></g><g id="deploy_workflow.(manual -&gt; GHA)[0]"><path d="M 722.500000 389.000000 L 722.500000 449.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="723.000000" y="427.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">Launches</text></g><g id="deploy_workflow.(GHA -&gt; AWS)[0]"><path d="M 722.500000 592.000000 L 722.500000 732.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="722.500000" y="630.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E"><tspan x="722.500000" dy="0.000000">Builds zip</tspan><tspan x="722.500000" dy="21.200000">pushes them to S3.</tspan><tspan x="722.500000" dy="21.200000"> </tspan><tspan x="722.500000" dy="21.200000">Deploys lambdas</tspan><tspan x="722.500000" dy="21.200000">using Terraform</tspan></text></g><g id="apollo_workflow.(apollo -&gt; GHA)[0]"><path d="M 1294.500000 429.000000 L 1294.500000 489.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="1294.500000" y="467.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">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 1294.500000 632.000000 L 1294.500000 692.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#359812323)"/><text class="text-italic" x="1294.500000" y="670.000000" style="text-anchor:middle;font-size:20px;fill:#676C7E">test</text></g><mask id="359812323" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1829" height="1303">
 <rect x="-100" y="-100" width="1829" height="1303" fill="white"></rect>
 <rect x="219.000000" y="244.000000" width="67" height="26" fill="black"></rect>
 <rect x="156.000000" y="447.000000" width="192" height="26" fill="black"></rect>
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 b3d4e44ed..41697315e 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
@@ -18,7 +19,27 @@ width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
 }
 
 ]]>
-</style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188" y="14" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;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="1654899612" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188" y="14" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;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="1654899612" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
 <rect x="-100" y="-100" width="492" height="332" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[]]></style></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 2f96851de..2ca3fb21b 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
@@ -18,7 +19,27 @@ width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
 }
 
 ]]>
-</style><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160" y="26" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;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="124328945" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160" y="26" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;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="124328945" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
 <rect x="-100" y="-100" width="452" height="332" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[]]></style></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 7fedf0258..373f07923 100644
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1540" height="578" viewBox="-102 -102 1540 578"><style type="text/css">
@@ -18,7 +19,27 @@ width="1540" height="578" viewBox="-102 -102 1540 578"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
index 48cb9d71a..bf2f0c60b 100644
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1350" height="633" viewBox="-90 -90 1350 633"><style type="text/css">
@@ -18,7 +19,27 @@ width="1350" height="633" viewBox="-90 -90 1350 633"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg b/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
index 192e116cb..abfc62dfd 100644
--- a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="366" height="552" viewBox="-100 -100 366 552"><style type="text/css">
@@ -18,7 +19,27 @@ width="366" height="552" viewBox="-100 -100 366 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="A"><g class="shape" ><rect x="13" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><mask id="3774985050" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><mask id="3774985050" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
 <rect x="-100" y="-100" width="366" height="552" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
index 748491a3a..810e7a840 100644
--- a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="366" height="552" viewBox="-88 -88 366 552"><style type="text/css">
@@ -18,7 +19,27 @@ width="366" height="552" viewBox="-88 -88 366 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="A"><g class="shape" ><rect x="25" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><mask id="1550694221" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><mask id="1550694221" maskUnits="userSpaceOnUse" x="-100" y="-100" width="366" height="552">
 <rect x="-100" y="-100" width="366" height="552" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 3645b0eb0..df46d764c 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1286" height="548" viewBox="-102 -102 1286 548"><style type="text/css">
@@ -18,7 +19,27 @@ width="1286" height="548" viewBox="-102 -102 1286 548"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="27.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="36.000000" x2="1082.000000" y2="36.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="136" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="136.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="163.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="341" y="272" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="272.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="299.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="0" y="0" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="541.000000" y="27.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="0.000000" y1="36.000000" x2="1082.000000" y2="36.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="341" y="136" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="136.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="163.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="341" y="272" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="341.000000" y="272.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="361.000000" y="299.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="351.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="392.000000" y="331.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
 <text class="text" x="722.000000" y="331.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="341.000000" y1="344.000000" x2="742.000000" y2="344.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 541.000000 38.000000 C 541.000000 76.000000 541.000000 96.000000 541.000000 132.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 541.000000 174.000000 C 541.000000 212.000000 541.000000 232.000000 541.000000 268.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4293455829)"/></g><mask id="4293455829" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
 <rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>
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 faf29d2c6..e974ba8f4 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1286" height="548" viewBox="-90 -90 1286 548"><style type="text/css">
@@ -18,7 +19,27 @@ width="1286" height="548" viewBox="-90 -90 1286 548"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="39.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="48.000000" x2="1094.000000" y2="48.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="148" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="148.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="175.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="352" y="284" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="284.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="311.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="12" y="12" width="1082" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="1082.000000" height="36.000000" fill="#0A0F25" /><text class="text-mono" x="553.000000" y="39.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer</text><line x1="12.000000" y1="48.000000" x2="1094.000000" y2="48.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><g id="table"><g class="shape" ><rect class="shape" x="352" y="148" width="401" height="36" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="148.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="175.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text></g></g><g id="table with short col"><g class="shape" ><rect class="shape" x="352" y="284" width="401" height="72" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="352.000000" y="284.000000" width="401.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="372.000000" y="311.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">RefreshAuthorizationPolicyCache</text><text class="text" x="362.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">ok</text>
 <text class="text" x="403.000000" y="343.000000" style="text-anchor:start;font-size:20px;fill:#676C7E"></text>
 <text class="text" x="733.000000" y="343.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="352.000000" y1="356.000000" x2="753.000000" y2="356.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(class -&gt; table)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 553.000000 50.000000 L 553.000000 144.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><g id="(table -&gt; table with short col)[0]"><path d="M 553.000000 186.000000 L 553.000000 280.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2684059959)"/></g><mask id="2684059959" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1286" height="548">
 <rect x="-100" y="-100" width="1286" height="548" fill="white"></rect>
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 55f09fa57..70f3449d4 100644
--- a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="394" height="356" viewBox="-102 -102 394 356"><style type="text/css">
@@ -18,7 +19,27 @@ width="394" height="356" viewBox="-102 -102 394 356"><style type="text/css">
 }
 
 ]]>
-</style><g id="my network"><g class="shape" ><rect x="0" y="0" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="63.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="95.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3050687478" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="63.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="95.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="3050687478" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
 <rect x="-100" y="-100" width="394" height="356" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 9b7fb33a2..c0072a72c 100644
--- a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="394" height="356" viewBox="-90 -90 394 356"><style type="text/css">
@@ -18,7 +19,27 @@ width="394" height="356" viewBox="-90 -90 394 356"><style type="text/css">
 }
 
 ]]>
-</style><g id="my network"><g class="shape" ><rect x="12" y="12" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="75.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="107.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="2671818094" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="190" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg?fuga=1&amp;hoge" x="75.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="107.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">my network</text></g><mask id="2671818094" maskUnits="userSpaceOnUse" x="-100" y="-100" width="394" height="356">
 <rect x="-100" y="-100" width="394" height="356" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 6782c7775..88123c8c3 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="648" height="1340" viewBox="-100 -100 648 1340"><style type="text/css">
@@ -18,7 +19,27 @@ width="648" height="1340" viewBox="-100 -100 648 1340"><style type="text/css">
 }
 
 ]]>
-</style><g id="foo"><g class="shape" ><rect x="0" y="0" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="0" y="620" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="653.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="274" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 224.000000 521.000000 C 224.000000 560.000000 224.000000 580.000000 224.000000 617.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="(foo.a -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foo.b -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.c -- )[0]"><path d="M 99.000000 858.000000 L 99.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.d -- )[0]"><path d="M 349.000000 858.000000 L 349.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 101.000000 986.000000 L 345.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><mask id="625948739" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="0" y="620" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="224.000000" y="653.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="24" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="274" y="730" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 224.000000 521.000000 C 224.000000 560.000000 224.000000 580.000000 224.000000 617.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="(foo.a -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foo.b -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 495.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.c -- )[0]"><path d="M 99.000000 858.000000 L 99.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="(foobar.d -- )[0]"><path d="M 349.000000 858.000000 L 349.000000 1115.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#625948739)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 101.000000 986.000000 L 345.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#625948739)"/></g><mask id="625948739" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
 <rect x="-100" y="-100" width="648" height="1340" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 4da5a4a8e..0a3c9a326 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="648" height="1340" viewBox="-88 -88 648 1340"><style type="text/css">
@@ -18,7 +19,27 @@ width="648" height="1340" viewBox="-88 -88 648 1340"><style type="text/css">
 }
 
 ]]>
-</style><g id="foo"><g class="shape" ><rect x="12" y="12" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="12" y="632" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="665.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="36" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="286" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 236.000000 533.000000 L 236.000000 629.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="(foo.a -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foo.b -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.c -- )[0]"><path d="M 111.000000 870.000000 L 111.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.d -- )[0]"><path d="M 361.000000 870.000000 L 361.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 113.000000 998.000000 L 357.000000 998.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><mask id="3235423664" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foo</text></g><g id="foobar"><g class="shape" ><rect x="12" y="632" width="448" height="520" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="236.000000" y="665.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">foobar</text></g><g id="foo.a"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="foo.b"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="foobar.c"><g class="shape" ><rect x="36" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="foobar.d"><g class="shape" ><rect x="286" y="742" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="808.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(foo -&gt; foobar)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 236.000000 533.000000 L 236.000000 629.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="(foo.a -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foo.b -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.c -- )[0]"><path d="M 111.000000 870.000000 L 111.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="(foobar.d -- )[0]"><path d="M 361.000000 870.000000 L 361.000000 1127.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3235423664)"/></g><g id="foo.(a -&gt; b)[0]"><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><g id="foobar.(c -&gt; d)[0]"><path d="M 113.000000 998.000000 L 357.000000 998.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3235423664)"/></g><mask id="3235423664" maskUnits="userSpaceOnUse" x="-100" y="-100" width="648" height="1340">
 <rect x="-100" y="-100" width="648" height="1340" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 75de14b2c..babe9c027 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
@@ -18,7 +19,27 @@ width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
 <rect x="-100" y="-100" width="604" height="458" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 75de14b2c..babe9c027 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
@@ -18,7 +19,27 @@ width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="-100" y="-100" width="604" height="458">
 <rect x="-100" y="-100" width="604" height="458" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 d75534e19..28e51963b 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
@@ -18,7 +19,27 @@ width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
 <rect x="-100" y="-100" width="377" height="798" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 d75534e19..28e51963b 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
@@ -18,7 +19,27 @@ width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="-100" y="-100" width="377" height="798">
 <rect x="-100" y="-100" width="377" height="798" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 5d2840144..a4d3dde94 100644
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css">
@@ -18,7 +19,27 @@ width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css">
 }
 
 ]]>
-</style><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
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 7693f399d..64d4c4cbd 100644
--- a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css">
@@ -18,7 +19,27 @@ width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css">
 }
 
 ]]>
-</style><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
 <text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
 <text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
 <text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
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 0c32095a8..fafa910ca 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
@@ -18,7 +19,27 @@ width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="402.000000" y="120.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="10.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
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 d219cbe58..66bf10875 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="626" height="1028" viewBox="-90 -90 626 1028"><style type="text/css">
@@ -18,7 +19,27 @@ width="626" height="1028" viewBox="-90 -90 626 1028"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="414.000000" y="132.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="22.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
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 9cd22a917..42f38a32d 100644
--- a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="490" height="556" viewBox="-102 -102 490 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="490" height="556" viewBox="-102 -102 490 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><mask id="1704832080" maskUnits="userSpaceOnUse" x="-100" y="-100" width="490" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><mask id="1704832080" maskUnits="userSpaceOnUse" x="-100" y="-100" width="490" height="556">
 <rect x="-100" y="-100" width="490" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 683bbcb14..ec09757e1 100644
--- a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="450" height="556" viewBox="-90 -90 450 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="450" height="556" viewBox="-90 -90 450 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="30" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><mask id="1488396738" maskUnits="userSpaceOnUse" x="-100" y="-100" width="450" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="30" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1488396738)"/></g><mask id="1488396738" maskUnits="userSpaceOnUse" x="-100" y="-100" width="450" height="556">
 <rect x="-100" y="-100" width="450" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
index 318814369..d319496eb 100644
--- a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><mask id="2910090598" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><mask id="2910090598" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
 <rect x="-100" y="-100" width="317" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
index 4276ffc13..c229739c4 100644
--- a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="556" viewBox="-90 -90 317 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="556" viewBox="-90 -90 317 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><mask id="26378777" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><mask id="26378777" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
 <rect x="-100" y="-100" width="317" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 9fc68d9e7..7500e7a98 100644
--- a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="418" height="756" viewBox="-102 -102 418 756"><style type="text/css">
@@ -18,7 +19,27 @@ width="418" height="756" viewBox="-102 -102 418 756"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="1" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><mask id="2635509857" maskUnits="userSpaceOnUse" x="-100" y="-100" width="418" height="756">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><mask id="2635509857" maskUnits="userSpaceOnUse" x="-100" y="-100" width="418" height="756">
 <rect x="-100" y="-100" width="418" height="756" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 dd95216d7..a3825d736 100644
--- a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="468" height="866" viewBox="-90 -90 468 866"><style type="text/css">
@@ -18,7 +19,27 @@ width="468" height="866" viewBox="-90 -90 468 866"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="143.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3058194229)"/></g><mask id="3058194229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="468" height="866">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="143.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3058194229)"/></g><mask id="3058194229" maskUnits="userSpaceOnUse" x="-100" y="-100" width="468" height="866">
 <rect x="-100" y="-100" width="468" height="866" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg b/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
index 5cbb962b9..719702277 100644
--- a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#894944389)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="894944389" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#894944389)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="894944389" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="556">
 <rect x="-100" y="-100" width="317" height="556" fill="white"></rect>
 <rect x="40.000000" y="166.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg b/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
index 2e354f9a1..eb2141940 100644
--- a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="677" viewBox="-90 -90 317 677"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="677" viewBox="-90 -90 317 677"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#501621412)"/><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="501621412" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="677">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#501621412)"/><text class="text-italic" x="68.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="501621412" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="677">
 <rect x="-100" y="-100" width="317" height="677" fill="white"></rect>
 <rect x="52.000000" y="238.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg b/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
index 243722dc6..5169c50f1 100644
--- a/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
+++ b/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
@@ -18,7 +19,27 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
 }
 
 ]]>
-</style><mask id="121760133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="-100" y="-100" width="200" height="200">
 <rect x="-100" y="-100" width="200" height="200" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[]]></style></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 243722dc6..5169c50f1 100644
--- a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
+++ b/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
@@ -18,7 +19,27 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
 }
 
 ]]>
-</style><mask id="121760133" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="-100" y="-100" width="200" height="200">
 <rect x="-100" y="-100" width="200" height="200" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[]]></style></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 bbd89890d..da44f0f40 100644
--- a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
@@ -18,7 +19,27 @@ width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 16.5 489 H 134.1836 C 135.3544 489 136.479 489.4563 137.3189 490.272 L 153.6353 506.12 C 154.5077 506.9674 155 508.1318 155 509.348 V 614.5 C 155 614.7761 154.7761 615 154.5 615 H 16.5 C 16.2239 615 16 614.7761 16 614.5 V 489.5 C 16 489.2239 16.2239 489 16.5 489 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 153.918 615 H 17.082 C 16.4328 615 16 614.5671 16 613.9178 V 490.0822 C 16 489.4329 16.4328 489 17.082 489 H 133.3607 C 134.0099 489 134.4427 489.4329 134.4427 490.0822 V 507.1808 C 134.4427 508.4794 135.3083 509.5616 136.823 509.5616 H 153.918 C 154.5672 509.5616 155 509.9945 155 510.6436 V 613.9178 C 154 614.5671 154.5672 615 153.918 615 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="85.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 257 0 L 435 0 L 409 126 L 231 126 L 231 126 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 245 348.5231 L 245 240 L 422 240 L 422 348.5231 C 392.5 325.2206 363 325.2206 333.5 348.5231 C 304 371.8256 274.5 371.8256 245 348.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 251 513 C 251 489 324.8 489 333 489 C 341.2 489 415 489 415 513 V 591 C 415 615 341.2 615 333 615 C 324.8 615 251 615 251 591 V 513 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 251 513 C 251 537 324.8 537 333 537 C 341.2 537 415 537 415 513" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 519 0 H 620 C 644 0 644 56.7 644 63 C 644 69.3 644 126 620 126 H 519 C 495 126 495 69.3 495 63 C 495 56.7 495 0 519 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 620 0 C 596 0 596 56.7 596 63 C 596 69.3 596 126 620 126" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="557.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 488 240 L 569.5 240 L 569.5 274 L 651 274 L 651 366 L 488 366 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="569.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 502 489 L 603 489 L 638 552 L 603 615 L 502 615 L 537 552 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="570.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 729 0 V 81 H 806.5 V 126 L 836.5 81 H 884 V 0 H 729 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="43.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 726 240 H 902 C 897.95 240 887 274.02 887 303 C 887 331.98 897.95 366 902 366 H 726 C 721.95 366 711 331.98 711 303 C 711 274.02 721.95 240 726 240 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 883 615 H 730 V 613.2093 C 730 591.7209 746.8009 572.3488 773.2343 563.0698 C 758.6735 555.5814 749.937 543.3721 749.937 530.0233 C 749.937 507.3953 775.2504 489 806.388 489 C 837.5256 489 862.839 507.3953 862.839 530.0233 C 862.839 543.3721 854.3266 555.4186 839.5418 563.2326 C 865.9752 572.5117 882.7761 591.8838 882.7761 613.3721 V 615 H 883 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 1030 126 C 1029.3455 126 1028.9091 125.8362 1028.4727 125.5085 L 946.6545 64.2289 C 945.7818 63.5735 945.7818 62.5904 946.6545 61.935 L 1028.4727 0.4915 C 1029.3454 -0.1639 1030.6545 -0.1639 1031.5272 0.4915 L 1113.3454 61.9349 C 1114.2181 62.5903 1114.2181 63.5734 1113.3454 64.2288 L 1031.5273 125.5085 C 1031.0909 125.8362 1030.6545 126 1030 126 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1030.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="1030.000000" cy="303.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="1030.000000" cy="552.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1215.25 0 L 1174 62.9278 L 1215.25 126 L 1297.75 126 L 1339 62.9278 L 1297.75 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1207.9638 284.0477 C 1207.9638 285.3862 1206.9978 286.7245 1206.032 286.7245 C 1193.7169 288.3974 1184.0579 305.4626 1184.0579 326.2083 C 1184.0579 348.2925 1194.9242 366.0267 1208.6883 366.0267 H 1302.1385 C 1316.8685 366.0267 1328.9421 346.954 1328.9421 323.8661 C 1328.9421 301.7819 1317.8341 283.3784 1303.8289 282.0401 C 1302.8629 282.0401 1301.8971 281.0362 1301.6556 279.3633 C 1298.5164 256.9447 1284.0278 240.2142 1267.1249 240.2142 C 1256.0171 240.2142 1246.1166 247.241 1239.8385 258.283 C 1239.114 259.6215 1237.9067 259.9562 1237.1823 259.6215 C 1234.7675 258.283 1232.1115 257.6139 1229.2137 257.6139 C 1218.1058 257.2791 1208.9297 268.9904 1207.9638 284.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(square -&gt; page)[0]"><path d="M 85.500000 382.000000 C 85.500000 420.000000 85.600000 441.800000 85.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 333.000000 128.000000 C 333.000000 166.000000 333.000000 188.800000 333.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 333.000000 351.000000 C 333.000000 413.800000 333.000000 441.800000 333.000000 485.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(queue -&gt; package)[0]"><path d="M 569.019999 127.999900 C 569.400000 166.000000 569.600000 188.800000 569.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(package -&gt; step)[0]"><path d="M 569.015625 367.999939 C 569.400000 417.200000 569.600000 441.800000 569.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 806.980001 127.999900 C 806.600000 166.000000 806.600000 188.800000 806.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 806.015625 367.999939 C 806.400000 417.200000 806.600000 441.800000 806.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 1030.000000 128.000000 C 1030.000000 166.000000 1030.000000 188.800000 1030.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 1030.000000 368.000000 C 1030.000000 417.200000 1030.000000 440.000000 1030.000000 476.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1256.019999 127.999900 C 1256.400000 166.000000 1256.600000 189.200000 1256.969698 238.000115" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><mask id="3282225909" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1543" height="828">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 16.5 489 H 134.1836 C 135.3544 489 136.479 489.4563 137.3189 490.272 L 153.6353 506.12 C 154.5077 506.9674 155 508.1318 155 509.348 V 614.5 C 155 614.7761 154.7761 615 154.5 615 H 16.5 C 16.2239 615 16 614.7761 16 614.5 V 489.5 C 16 489.2239 16.2239 489 16.5 489 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 153.918 615 H 17.082 C 16.4328 615 16 614.5671 16 613.9178 V 490.0822 C 16 489.4329 16.4328 489 17.082 489 H 133.3607 C 134.0099 489 134.4427 489.4329 134.4427 490.0822 V 507.1808 C 134.4427 508.4794 135.3083 509.5616 136.823 509.5616 H 153.918 C 154.5672 509.5616 155 509.9945 155 510.6436 V 613.9178 C 154 614.5671 154.5672 615 153.918 615 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="85.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 257 0 L 435 0 L 409 126 L 231 126 L 231 126 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 245 348.5231 L 245 240 L 422 240 L 422 348.5231 C 392.5 325.2206 363 325.2206 333.5 348.5231 C 304 371.8256 274.5 371.8256 245 348.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 251 513 C 251 489 324.8 489 333 489 C 341.2 489 415 489 415 513 V 591 C 415 615 341.2 615 333 615 C 324.8 615 251 615 251 591 V 513 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 251 513 C 251 537 324.8 537 333 537 C 341.2 537 415 537 415 513" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 519 0 H 620 C 644 0 644 56.7 644 63 C 644 69.3 644 126 620 126 H 519 C 495 126 495 69.3 495 63 C 495 56.7 495 0 519 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 620 0 C 596 0 596 56.7 596 63 C 596 69.3 596 126 620 126" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="557.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 488 240 L 569.5 240 L 569.5 274 L 651 274 L 651 366 L 488 366 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="569.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 502 489 L 603 489 L 638 552 L 603 615 L 502 615 L 537 552 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="570.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 729 0 V 81 H 806.5 V 126 L 836.5 81 H 884 V 0 H 729 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="43.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 726 240 H 902 C 897.95 240 887 274.02 887 303 C 887 331.98 897.95 366 902 366 H 726 C 721.95 366 711 331.98 711 303 C 711 274.02 721.95 240 726 240 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 883 615 H 730 V 613.2093 C 730 591.7209 746.8009 572.3488 773.2343 563.0698 C 758.6735 555.5814 749.937 543.3721 749.937 530.0233 C 749.937 507.3953 775.2504 489 806.388 489 C 837.5256 489 862.839 507.3953 862.839 530.0233 C 862.839 543.3721 854.3266 555.4186 839.5418 563.2326 C 865.9752 572.5117 882.7761 591.8838 882.7761 613.3721 V 615 H 883 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 1030 126 C 1029.3455 126 1028.9091 125.8362 1028.4727 125.5085 L 946.6545 64.2289 C 945.7818 63.5735 945.7818 62.5904 946.6545 61.935 L 1028.4727 0.4915 C 1029.3454 -0.1639 1030.6545 -0.1639 1031.5272 0.4915 L 1113.3454 61.9349 C 1114.2181 62.5903 1114.2181 63.5734 1113.3454 64.2288 L 1031.5273 125.5085 C 1031.0909 125.8362 1030.6545 126 1030 126 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1030.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="1030.000000" cy="303.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="1030.000000" cy="552.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1215.25 0 L 1174 62.9278 L 1215.25 126 L 1297.75 126 L 1339 62.9278 L 1297.75 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1207.9638 284.0477 C 1207.9638 285.3862 1206.9978 286.7245 1206.032 286.7245 C 1193.7169 288.3974 1184.0579 305.4626 1184.0579 326.2083 C 1184.0579 348.2925 1194.9242 366.0267 1208.6883 366.0267 H 1302.1385 C 1316.8685 366.0267 1328.9421 346.954 1328.9421 323.8661 C 1328.9421 301.7819 1317.8341 283.3784 1303.8289 282.0401 C 1302.8629 282.0401 1301.8971 281.0362 1301.6556 279.3633 C 1298.5164 256.9447 1284.0278 240.2142 1267.1249 240.2142 C 1256.0171 240.2142 1246.1166 247.241 1239.8385 258.283 C 1239.114 259.6215 1237.9067 259.9562 1237.1823 259.6215 C 1234.7675 258.283 1232.1115 257.6139 1229.2137 257.6139 C 1218.1058 257.2791 1208.9297 268.9904 1207.9638 284.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(square -&gt; page)[0]"><path d="M 85.500000 382.000000 C 85.500000 420.000000 85.600000 441.800000 85.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 333.000000 128.000000 C 333.000000 166.000000 333.000000 188.800000 333.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 333.000000 351.000000 C 333.000000 413.800000 333.000000 441.800000 333.000000 485.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(queue -&gt; package)[0]"><path d="M 569.019999 127.999900 C 569.400000 166.000000 569.600000 188.800000 569.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(package -&gt; step)[0]"><path d="M 569.015625 367.999939 C 569.400000 417.200000 569.600000 441.800000 569.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 806.980001 127.999900 C 806.600000 166.000000 806.600000 188.800000 806.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 806.015625 367.999939 C 806.400000 417.200000 806.600000 441.800000 806.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 1030.000000 128.000000 C 1030.000000 166.000000 1030.000000 188.800000 1030.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 1030.000000 368.000000 C 1030.000000 417.200000 1030.000000 440.000000 1030.000000 476.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1256.019999 127.999900 C 1256.400000 166.000000 1256.600000 189.200000 1256.969698 238.000115" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3282225909)"/></g><mask id="3282225909" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1543" height="828">
 <rect x="-100" y="-100" width="1543" height="828" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
index bfa1fd633..aec28417d 100644
--- a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
@@ -18,7 +19,27 @@ width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><rect x="12" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="20" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 28.5 492 H 146.1836 C 147.3544 492 148.479 492.4563 149.3189 493.272 L 165.6353 509.12 C 166.5077 509.9674 167 511.1318 167 512.348 V 617.5 C 167 617.7761 166.7761 618 166.5 618 H 28.5 C 28.2239 618 28 617.7761 28 617.5 V 492.5 C 28 492.2239 28.2239 492 28.5 492 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 618 H 29.082 C 28.4328 618 28 617.5671 28 616.9178 V 493.0822 C 28 492.4329 28.4328 492 29.082 492 H 145.3607 C 146.0099 492 146.4427 492.4329 146.4427 493.0822 V 510.1808 C 146.4427 511.4794 147.3083 512.5616 148.823 512.5616 H 165.918 C 166.5672 512.5616 167 512.9945 167 513.6436 V 616.9178 C 166 617.5671 166.5672 618 165.918 618 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 229 12 L 407 12 L 381 138 L 203 138 L 203 138 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 216 360.5231 L 216 252 L 393 252 L 393 360.5231 C 363.5 337.2206 334 337.2206 304.5 360.5231 C 275 383.8256 245.5 383.8256 216 360.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="304.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 223 516 C 223 492 296.8 492 305 492 C 313.2 492 387 492 387 516 V 594 C 387 618 313.2 618 305 618 C 296.8 618 223 618 223 594 V 516 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 223 516 C 223 540 296.8 540 305 540 C 313.2 540 387 540 387 516" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 451 12 H 552 C 576 12 576 68.7 576 75 C 576 81.3 576 138 552 138 H 451 C 427 138 427 81.3 427 75 C 427 68.7 427 12 451 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 552 12 C 528 12 528 68.7 528 75 C 528 81.3 528 138 552 138" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="489.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 420 252 L 501.5 252 L 501.5 286 L 583 286 L 583 378 L 420 378 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 433 492 L 534 492 L 569 555 L 534 618 L 433 618 L 468 555 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 621 12 V 93 H 698.5 V 138 L 728.5 93 H 776 V 12 H 621 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="55.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 618 252 H 794 C 789.95 252 779 286.02 779 315 C 779 343.98 789.95 378 794 378 H 618 C 613.95 378 603 343.98 603 315 C 603 286.02 613.95 252 618 252 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 775 618 H 622 V 616.2093 C 622 594.7209 638.8009 575.3488 665.2343 566.0698 C 650.6735 558.5814 641.937 546.3721 641.937 533.0233 C 641.937 510.3953 667.2504 492 698.388 492 C 729.5256 492 754.839 510.3953 754.839 533.0233 C 754.839 546.3721 746.3266 558.4186 731.5418 566.2326 C 757.9752 575.5117 774.7761 594.8838 774.7761 616.3721 V 618 H 775 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 882 138 C 881.3455 138 880.9091 137.8362 880.4727 137.5085 L 798.6545 76.2289 C 797.7818 75.5735 797.7818 74.5904 798.6545 73.935 L 880.4727 12.4915 C 881.3454 11.8361 882.6545 11.8361 883.5272 12.4915 L 965.3454 73.9349 C 966.2181 74.5903 966.2181 75.5734 965.3454 76.2288 L 883.5273 137.5085 C 883.0909 137.8362 882.6545 138 882 138 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="882.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="882.000000" cy="315.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="882.000000" cy="564.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1027.25 12 L 986 74.9278 L 1027.25 138 L 1109.75 138 L 1151 74.9278 L 1109.75 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1019.9638 282.0477 C 1019.9638 283.3862 1018.9978 284.7245 1018.032 284.7245 C 1005.7169 286.3974 996.0579 303.4626 996.0579 324.2083 C 996.0579 346.2925 1006.9242 364.0267 1020.6883 364.0267 H 1114.1385 C 1128.8685 364.0267 1140.9421 344.954 1140.9421 321.8661 C 1140.9421 299.7819 1129.8341 281.3784 1115.8289 280.0401 C 1114.8629 280.0401 1113.8971 279.0362 1113.6556 277.3633 C 1110.5164 254.9447 1096.0278 238.2142 1079.1249 238.2142 C 1068.0171 238.2142 1058.1166 245.241 1051.8385 256.283 C 1051.114 257.6215 1049.9067 257.9562 1049.1823 257.6215 C 1046.7675 256.283 1044.1115 255.6139 1041.2137 255.6139 C 1030.1058 255.2791 1020.9297 266.9904 1019.9638 282.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(square -&gt; page)[0]"><path d="M 97.510000 393.999975 L 97.980000 488.000050" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 305.017543 139.999923 L 305.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 305.000000 363.000000 L 305.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(queue -&gt; package)[0]"><path d="M 501.017543 139.999923 L 501.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(package -&gt; step)[0]"><path d="M 501.017543 379.999923 L 501.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 699.000000 140.000000 L 699.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 698.017543 379.999923 L 698.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 882.000000 140.000000 L 882.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 882.000000 380.000000 L 882.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1068.019607 139.999904 L 1068.960786 236.000192" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><mask id="2040754890" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1343" height="828">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="20" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 28.5 492 H 146.1836 C 147.3544 492 148.479 492.4563 149.3189 493.272 L 165.6353 509.12 C 166.5077 509.9674 167 511.1318 167 512.348 V 617.5 C 167 617.7761 166.7761 618 166.5 618 H 28.5 C 28.2239 618 28 617.7761 28 617.5 V 492.5 C 28 492.2239 28.2239 492 28.5 492 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 618 H 29.082 C 28.4328 618 28 617.5671 28 616.9178 V 493.0822 C 28 492.4329 28.4328 492 29.082 492 H 145.3607 C 146.0099 492 146.4427 492.4329 146.4427 493.0822 V 510.1808 C 146.4427 511.4794 147.3083 512.5616 148.823 512.5616 H 165.918 C 166.5672 512.5616 167 512.9945 167 513.6436 V 616.9178 C 166 617.5671 166.5672 618 165.918 618 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 229 12 L 407 12 L 381 138 L 203 138 L 203 138 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 216 360.5231 L 216 252 L 393 252 L 393 360.5231 C 363.5 337.2206 334 337.2206 304.5 360.5231 C 275 383.8256 245.5 383.8256 216 360.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="304.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 223 516 C 223 492 296.8 492 305 492 C 313.2 492 387 492 387 516 V 594 C 387 618 313.2 618 305 618 C 296.8 618 223 618 223 594 V 516 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 223 516 C 223 540 296.8 540 305 540 C 313.2 540 387 540 387 516" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 451 12 H 552 C 576 12 576 68.7 576 75 C 576 81.3 576 138 552 138 H 451 C 427 138 427 81.3 427 75 C 427 68.7 427 12 451 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 552 12 C 528 12 528 68.7 528 75 C 528 81.3 528 138 552 138" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="489.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 420 252 L 501.5 252 L 501.5 286 L 583 286 L 583 378 L 420 378 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 433 492 L 534 492 L 569 555 L 534 618 L 433 618 L 468 555 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 621 12 V 93 H 698.5 V 138 L 728.5 93 H 776 V 12 H 621 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="55.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 618 252 H 794 C 789.95 252 779 286.02 779 315 C 779 343.98 789.95 378 794 378 H 618 C 613.95 378 603 343.98 603 315 C 603 286.02 613.95 252 618 252 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 775 618 H 622 V 616.2093 C 622 594.7209 638.8009 575.3488 665.2343 566.0698 C 650.6735 558.5814 641.937 546.3721 641.937 533.0233 C 641.937 510.3953 667.2504 492 698.388 492 C 729.5256 492 754.839 510.3953 754.839 533.0233 C 754.839 546.3721 746.3266 558.4186 731.5418 566.2326 C 757.9752 575.5117 774.7761 594.8838 774.7761 616.3721 V 618 H 775 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 882 138 C 881.3455 138 880.9091 137.8362 880.4727 137.5085 L 798.6545 76.2289 C 797.7818 75.5735 797.7818 74.5904 798.6545 73.935 L 880.4727 12.4915 C 881.3454 11.8361 882.6545 11.8361 883.5272 12.4915 L 965.3454 73.9349 C 966.2181 74.5903 966.2181 75.5734 965.3454 76.2288 L 883.5273 137.5085 C 883.0909 137.8362 882.6545 138 882 138 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="882.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="882.000000" cy="315.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="882.000000" cy="564.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1027.25 12 L 986 74.9278 L 1027.25 138 L 1109.75 138 L 1151 74.9278 L 1109.75 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1019.9638 282.0477 C 1019.9638 283.3862 1018.9978 284.7245 1018.032 284.7245 C 1005.7169 286.3974 996.0579 303.4626 996.0579 324.2083 C 996.0579 346.2925 1006.9242 364.0267 1020.6883 364.0267 H 1114.1385 C 1128.8685 364.0267 1140.9421 344.954 1140.9421 321.8661 C 1140.9421 299.7819 1129.8341 281.3784 1115.8289 280.0401 C 1114.8629 280.0401 1113.8971 279.0362 1113.6556 277.3633 C 1110.5164 254.9447 1096.0278 238.2142 1079.1249 238.2142 C 1068.0171 238.2142 1058.1166 245.241 1051.8385 256.283 C 1051.114 257.6215 1049.9067 257.9562 1049.1823 257.6215 C 1046.7675 256.283 1044.1115 255.6139 1041.2137 255.6139 C 1030.1058 255.2791 1020.9297 266.9904 1019.9638 282.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(square -&gt; page)[0]"><path d="M 97.510000 393.999975 L 97.980000 488.000050" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 305.017543 139.999923 L 305.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 305.000000 363.000000 L 305.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(queue -&gt; package)[0]"><path d="M 501.017543 139.999923 L 501.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(package -&gt; step)[0]"><path d="M 501.017543 379.999923 L 501.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 699.000000 140.000000 L 699.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 698.017543 379.999923 L 698.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 882.000000 140.000000 L 882.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 882.000000 380.000000 L 882.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1068.019607 139.999904 L 1068.960786 236.000192" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2040754890)"/></g><mask id="2040754890" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1343" height="828">
 <rect x="-100" y="-100" width="1343" height="828" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 dbd505e76..4be842b8e 100644
--- a/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
@@ -18,7 +19,27 @@ width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><rect x="10" y="-10" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="19" y="216" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 26.5 479 H 144.1836 C 145.3544 479 146.479 479.4563 147.3189 480.272 L 163.6353 496.12 C 164.5077 496.9674 165 498.1318 165 499.348 V 604.5 C 165 604.7761 164.7761 605 164.5 605 H 26.5 C 26.2239 605 26 604.7761 26 604.5 V 479.5 C 26 479.2239 26.2239 479 26.5 479 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 163.918 605 H 27.082 C 26.4328 605 26 604.5671 26 603.9178 V 480.0822 C 26 479.4329 26.4328 479 27.082 479 H 143.3607 C 144.0099 479 144.4427 479.4329 144.4427 480.0822 V 497.1808 C 144.4427 498.4794 145.3083 499.5616 146.823 499.5616 H 163.918 C 164.5672 499.5616 165 499.9945 165 500.6436 V 603.9178 C 164 604.5671 164.5672 605 163.918 605 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 16.5 489 H 134.1836 C 135.3544 489 136.479 489.4563 137.3189 490.272 L 153.6353 506.12 C 154.5077 506.9674 155 508.1318 155 509.348 V 614.5 C 155 614.7761 154.7761 615 154.5 615 H 16.5 C 16.2239 615 16 614.7761 16 614.5 V 489.5 C 16 489.2239 16.2239 489 16.5 489 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 153.918 615 H 17.082 C 16.4328 615 16 614.5671 16 613.9178 V 490.0822 C 16 489.4329 16.4328 489 17.082 489 H 133.3607 C 134.0099 489 134.4427 489.4329 134.4427 490.0822 V 507.1808 C 134.4427 508.4794 135.3083 509.5616 136.823 509.5616 H 153.918 C 154.5672 509.5616 155 509.9945 155 510.6436 V 613.9178 C 154 614.5671 154.5672 615 153.918 615 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="85.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 267 -10 L 445 -10 L 419 116 L 241 116 L 241 116 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 257 0 L 435 0 L 409 126 L 231 126 L 231 126 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 255 338.5231 L 255 230 L 432 230 L 432 338.5231 C 402.5 315.2206 373 315.2206 343.5 338.5231 C 314 361.8256 284.5 361.8256 255 338.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 245 348.5231 L 245 240 L 422 240 L 422 348.5231 C 392.5 325.2206 363 325.2206 333.5 348.5231 C 304 371.8256 274.5 371.8256 245 348.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 261 503 C 261 479 334.8 479 343 479 C 351.2 479 425 479 425 503 V 581 C 425 605 351.2 605 343 605 C 334.8 605 261 605 261 581 V 503 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 261 503 C 261 527 334.8 527 343 527 C 351.2 527 425 527 425 503" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 251 513 C 251 489 324.8 489 333 489 C 341.2 489 415 489 415 513 V 591 C 415 615 341.2 615 333 615 C 324.8 615 251 615 251 591 V 513 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 251 513 C 251 537 324.8 537 333 537 C 341.2 537 415 537 415 513" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 529 -10 H 630 C 654 -10 654 46.7 654 53 C 654 59.3 654 116 630 116 H 529 C 505 116 505 59.3 505 53 C 505 46.7 505 -10 529 -10 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 630 -10 C 606 -10 606 46.7 606 53 C 606 59.3 606 116 630 116" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 519 0 H 620 C 644 0 644 56.7 644 63 C 644 69.3 644 126 620 126 H 519 C 495 126 495 69.3 495 63 C 495 56.7 495 0 519 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 620 0 C 596 0 596 56.7 596 63 C 596 69.3 596 126 620 126" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="557.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 498 230 L 579.5 230 L 579.5 264 L 661 264 L 661 356 L 498 356 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 488 240 L 569.5 240 L 569.5 274 L 651 274 L 651 366 L 488 366 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="569.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 512 479 L 613 479 L 648 542 L 613 605 L 512 605 L 547 542 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 502 489 L 603 489 L 638 552 L 603 615 L 502 615 L 537 552 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="570.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 739 -10 V 71 H 816.5 V 116 L 846.5 71 H 894 V -10 H 739 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 729 0 V 81 H 806.5 V 126 L 836.5 81 H 884 V 0 H 729 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="43.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 736 230 H 912 C 907.95 230 897 264.02 897 293 C 897 321.98 907.95 356 912 356 H 736 C 731.95 356 721 321.98 721 293 C 721 264.02 731.95 230 736 230 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 726 240 H 902 C 897.95 240 887 274.02 887 303 C 887 331.98 897.95 366 902 366 H 726 C 721.95 366 711 331.98 711 303 C 711 274.02 721.95 240 726 240 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 893 605 H 740 V 603.2093 C 740 581.7209 756.8009 562.3488 783.2343 553.0698 C 768.6735 545.5814 759.937 533.3721 759.937 520.0233 C 759.937 497.3953 785.2504 479 816.388 479 C 847.5256 479 872.839 497.3953 872.839 520.0233 C 872.839 533.3721 864.3266 545.4186 849.5418 553.2326 C 875.9752 562.5117 892.7761 581.8838 892.7761 603.3721 V 605 H 893 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 883 615 H 730 V 613.2093 C 730 591.7209 746.8009 572.3488 773.2343 563.0698 C 758.6735 555.5814 749.937 543.3721 749.937 530.0233 C 749.937 507.3953 775.2504 489 806.388 489 C 837.5256 489 862.839 507.3953 862.839 530.0233 C 862.839 543.3721 854.3266 555.4186 839.5418 563.2326 C 865.9752 572.5117 882.7761 591.8838 882.7761 613.3721 V 615 H 883 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 1040 116 C 1039.3455 116 1038.9091 115.8362 1038.4727 115.5085 L 956.6545 54.2289 C 955.7818 53.5735 955.7818 52.5904 956.6545 51.935 L 1038.4727 -9.5085 C 1039.3454 -10.1639 1040.6545 -10.1639 1041.5272 -9.5085 L 1123.3454 51.9349 C 1124.2181 52.5903 1124.2181 53.5734 1123.3454 54.2288 L 1041.5273 115.5085 C 1041.0909 115.8362 1040.6545 116 1040 116 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1030 126 C 1029.3455 126 1028.9091 125.8362 1028.4727 125.5085 L 946.6545 64.2289 C 945.7818 63.5735 945.7818 62.5904 946.6545 61.935 L 1028.4727 0.4915 C 1029.3454 -0.1639 1030.6545 -0.1639 1031.5272 0.4915 L 1113.3454 61.9349 C 1114.2181 62.5903 1114.2181 63.5734 1113.3454 64.2288 L 1031.5273 125.5085 C 1031.0909 125.8362 1030.6545 126 1030 126 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1030.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="1040.000000" cy="293.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="1030.000000" cy="303.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="1040.000000" cy="542.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="1030.000000" cy="552.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1225.25 -10 L 1184 52.9278 L 1225.25 116 L 1307.75 116 L 1349 52.9278 L 1307.75 -10 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1215.25 0 L 1174 62.9278 L 1215.25 126 L 1297.75 126 L 1339 62.9278 L 1297.75 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1217.9638 274.0477 C 1217.9638 275.3862 1216.9978 276.7245 1216.032 276.7245 C 1203.7169 278.3974 1194.0579 295.4626 1194.0579 316.2083 C 1194.0579 338.2925 1204.9242 356.0267 1218.6883 356.0267 H 1312.1385 C 1326.8685 356.0267 1338.9421 336.954 1338.9421 313.8661 C 1338.9421 291.7819 1327.8341 273.3784 1313.8289 272.0401 C 1312.8629 272.0401 1311.8971 271.0362 1311.6556 269.3633 C 1308.5164 246.9447 1294.0278 230.2142 1277.1249 230.2142 C 1266.0171 230.2142 1256.1166 237.241 1249.8385 248.283 C 1249.114 249.6215 1247.9067 249.9562 1247.1823 249.6215 C 1244.7675 248.283 1242.1115 247.6139 1239.2137 247.6139 C 1228.1058 247.2791 1218.9297 258.9904 1217.9638 274.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1207.9638 284.0477 C 1207.9638 285.3862 1206.9978 286.7245 1206.032 286.7245 C 1193.7169 288.3974 1184.0579 305.4626 1184.0579 326.2083 C 1184.0579 348.2925 1194.9242 366.0267 1208.6883 366.0267 H 1302.1385 C 1316.8685 366.0267 1328.9421 346.954 1328.9421 323.8661 C 1328.9421 301.7819 1317.8341 283.3784 1303.8289 282.0401 C 1302.8629 282.0401 1301.8971 281.0362 1301.6556 279.3633 C 1298.5164 256.9447 1284.0278 240.2142 1267.1249 240.2142 C 1256.0171 240.2142 1246.1166 247.241 1239.8385 258.283 C 1239.114 259.6215 1237.9067 259.9562 1237.1823 259.6215 C 1234.7675 258.283 1232.1115 257.6139 1229.2137 257.6139 C 1218.1058 257.2791 1208.9297 268.9904 1207.9638 284.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(square -&gt; page)[0]"><path d="M 85.500000 382.000000 C 85.500000 420.000000 85.600000 441.800000 85.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 333.000000 128.000000 C 333.000000 166.000000 333.000000 188.800000 333.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 333.000000 351.000000 C 333.000000 413.800000 333.000000 441.800000 333.000000 485.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(queue -&gt; package)[0]"><path d="M 569.019999 127.999900 C 569.400000 166.000000 569.600000 188.800000 569.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(package -&gt; step)[0]"><path d="M 569.015625 367.999939 C 569.400000 417.200000 569.600000 441.800000 569.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 806.980001 127.999900 C 806.600000 166.000000 806.600000 188.800000 806.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 806.015625 367.999939 C 806.400000 417.200000 806.600000 441.800000 806.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 1030.000000 128.000000 C 1030.000000 166.000000 1030.000000 188.800000 1030.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 1030.000000 368.000000 C 1030.000000 417.200000 1030.000000 440.000000 1030.000000 476.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1256.019999 127.999900 C 1256.400000 166.000000 1256.600000 189.200000 1256.969698 238.000115" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><mask id="2523181634" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1543" height="828">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="-10" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="19" y="216" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 26.5 479 H 144.1836 C 145.3544 479 146.479 479.4563 147.3189 480.272 L 163.6353 496.12 C 164.5077 496.9674 165 498.1318 165 499.348 V 604.5 C 165 604.7761 164.7761 605 164.5 605 H 26.5 C 26.2239 605 26 604.7761 26 604.5 V 479.5 C 26 479.2239 26.2239 479 26.5 479 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 163.918 605 H 27.082 C 26.4328 605 26 604.5671 26 603.9178 V 480.0822 C 26 479.4329 26.4328 479 27.082 479 H 143.3607 C 144.0099 479 144.4427 479.4329 144.4427 480.0822 V 497.1808 C 144.4427 498.4794 145.3083 499.5616 146.823 499.5616 H 163.918 C 164.5672 499.5616 165 499.9945 165 500.6436 V 603.9178 C 164 604.5671 164.5672 605 163.918 605 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 16.5 489 H 134.1836 C 135.3544 489 136.479 489.4563 137.3189 490.272 L 153.6353 506.12 C 154.5077 506.9674 155 508.1318 155 509.348 V 614.5 C 155 614.7761 154.7761 615 154.5 615 H 16.5 C 16.2239 615 16 614.7761 16 614.5 V 489.5 C 16 489.2239 16.2239 489 16.5 489 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 153.918 615 H 17.082 C 16.4328 615 16 614.5671 16 613.9178 V 490.0822 C 16 489.4329 16.4328 489 17.082 489 H 133.3607 C 134.0099 489 134.4427 489.4329 134.4427 490.0822 V 507.1808 C 134.4427 508.4794 135.3083 509.5616 136.823 509.5616 H 153.918 C 154.5672 509.5616 155 509.9945 155 510.6436 V 613.9178 C 154 614.5671 154.5672 615 153.918 615 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="85.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 267 -10 L 445 -10 L 419 116 L 241 116 L 241 116 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 257 0 L 435 0 L 409 126 L 231 126 L 231 126 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 255 338.5231 L 255 230 L 432 230 L 432 338.5231 C 402.5 315.2206 373 315.2206 343.5 338.5231 C 314 361.8256 284.5 361.8256 255 338.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 245 348.5231 L 245 240 L 422 240 L 422 348.5231 C 392.5 325.2206 363 325.2206 333.5 348.5231 C 304 371.8256 274.5 371.8256 245 348.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 261 503 C 261 479 334.8 479 343 479 C 351.2 479 425 479 425 503 V 581 C 425 605 351.2 605 343 605 C 334.8 605 261 605 261 581 V 503 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 261 503 C 261 527 334.8 527 343 527 C 351.2 527 425 527 425 503" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 251 513 C 251 489 324.8 489 333 489 C 341.2 489 415 489 415 513 V 591 C 415 615 341.2 615 333 615 C 324.8 615 251 615 251 591 V 513 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 251 513 C 251 537 324.8 537 333 537 C 341.2 537 415 537 415 513" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="333.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 529 -10 H 630 C 654 -10 654 46.7 654 53 C 654 59.3 654 116 630 116 H 529 C 505 116 505 59.3 505 53 C 505 46.7 505 -10 529 -10 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 630 -10 C 606 -10 606 46.7 606 53 C 606 59.3 606 116 630 116" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 519 0 H 620 C 644 0 644 56.7 644 63 C 644 69.3 644 126 620 126 H 519 C 495 126 495 69.3 495 63 C 495 56.7 495 0 519 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 620 0 C 596 0 596 56.7 596 63 C 596 69.3 596 126 620 126" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="557.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 498 230 L 579.5 230 L 579.5 264 L 661 264 L 661 356 L 498 356 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 488 240 L 569.5 240 L 569.5 274 L 651 274 L 651 366 L 488 366 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="569.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 512 479 L 613 479 L 648 542 L 613 605 L 512 605 L 547 542 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 502 489 L 603 489 L 638 552 L 603 615 L 502 615 L 537 552 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="570.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 739 -10 V 71 H 816.5 V 116 L 846.5 71 H 894 V -10 H 739 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 729 0 V 81 H 806.5 V 126 L 836.5 81 H 884 V 0 H 729 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="43.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 736 230 H 912 C 907.95 230 897 264.02 897 293 C 897 321.98 907.95 356 912 356 H 736 C 731.95 356 721 321.98 721 293 C 721 264.02 731.95 230 736 230 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 726 240 H 902 C 897.95 240 887 274.02 887 303 C 887 331.98 897.95 366 902 366 H 726 C 721.95 366 711 331.98 711 303 C 711 274.02 721.95 240 726 240 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 893 605 H 740 V 603.2093 C 740 581.7209 756.8009 562.3488 783.2343 553.0698 C 768.6735 545.5814 759.937 533.3721 759.937 520.0233 C 759.937 497.3953 785.2504 479 816.388 479 C 847.5256 479 872.839 497.3953 872.839 520.0233 C 872.839 533.3721 864.3266 545.4186 849.5418 553.2326 C 875.9752 562.5117 892.7761 581.8838 892.7761 603.3721 V 605 H 893 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 883 615 H 730 V 613.2093 C 730 591.7209 746.8009 572.3488 773.2343 563.0698 C 758.6735 555.5814 749.937 543.3721 749.937 530.0233 C 749.937 507.3953 775.2504 489 806.388 489 C 837.5256 489 862.839 507.3953 862.839 530.0233 C 862.839 543.3721 854.3266 555.4186 839.5418 563.2326 C 865.9752 572.5117 882.7761 591.8838 882.7761 613.3721 V 615 H 883 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="806.500000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 1040 116 C 1039.3455 116 1038.9091 115.8362 1038.4727 115.5085 L 956.6545 54.2289 C 955.7818 53.5735 955.7818 52.5904 956.6545 51.935 L 1038.4727 -9.5085 C 1039.3454 -10.1639 1040.6545 -10.1639 1041.5272 -9.5085 L 1123.3454 51.9349 C 1124.2181 52.5903 1124.2181 53.5734 1123.3454 54.2288 L 1041.5273 115.5085 C 1041.0909 115.8362 1040.6545 116 1040 116 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1030 126 C 1029.3455 126 1028.9091 125.8362 1028.4727 125.5085 L 946.6545 64.2289 C 945.7818 63.5735 945.7818 62.5904 946.6545 61.935 L 1028.4727 0.4915 C 1029.3454 -0.1639 1030.6545 -0.1639 1031.5272 0.4915 L 1113.3454 61.9349 C 1114.2181 62.5903 1114.2181 63.5734 1113.3454 64.2288 L 1031.5273 125.5085 C 1031.0909 125.8362 1030.6545 126 1030 126 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1030.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="1040.000000" cy="293.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="1030.000000" cy="303.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="1040.000000" cy="542.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="1030.000000" cy="552.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1030.000000" y="555.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1225.25 -10 L 1184 52.9278 L 1225.25 116 L 1307.75 116 L 1349 52.9278 L 1307.75 -10 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1215.25 0 L 1174 62.9278 L 1215.25 126 L 1297.75 126 L 1339 62.9278 L 1297.75 0 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1217.9638 274.0477 C 1217.9638 275.3862 1216.9978 276.7245 1216.032 276.7245 C 1203.7169 278.3974 1194.0579 295.4626 1194.0579 316.2083 C 1194.0579 338.2925 1204.9242 356.0267 1218.6883 356.0267 H 1312.1385 C 1326.8685 356.0267 1338.9421 336.954 1338.9421 313.8661 C 1338.9421 291.7819 1327.8341 273.3784 1313.8289 272.0401 C 1312.8629 272.0401 1311.8971 271.0362 1311.6556 269.3633 C 1308.5164 246.9447 1294.0278 230.2142 1277.1249 230.2142 C 1266.0171 230.2142 1256.1166 237.241 1249.8385 248.283 C 1249.114 249.6215 1247.9067 249.9562 1247.1823 249.6215 C 1244.7675 248.283 1242.1115 247.6139 1239.2137 247.6139 C 1228.1058 247.2791 1218.9297 258.9904 1217.9638 274.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1207.9638 284.0477 C 1207.9638 285.3862 1206.9978 286.7245 1206.032 286.7245 C 1193.7169 288.3974 1184.0579 305.4626 1184.0579 326.2083 C 1184.0579 348.2925 1194.9242 366.0267 1208.6883 366.0267 H 1302.1385 C 1316.8685 366.0267 1328.9421 346.954 1328.9421 323.8661 C 1328.9421 301.7819 1317.8341 283.3784 1303.8289 282.0401 C 1302.8629 282.0401 1301.8971 281.0362 1301.6556 279.3633 C 1298.5164 256.9447 1284.0278 240.2142 1267.1249 240.2142 C 1256.0171 240.2142 1246.1166 247.241 1239.8385 258.283 C 1239.114 259.6215 1237.9067 259.9562 1237.1823 259.6215 C 1234.7675 258.283 1232.1115 257.6139 1229.2137 257.6139 C 1218.1058 257.2791 1208.9297 268.9904 1207.9638 284.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1256.500000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(square -&gt; page)[0]"><path d="M 85.500000 382.000000 C 85.500000 420.000000 85.600000 441.800000 85.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 333.000000 128.000000 C 333.000000 166.000000 333.000000 188.800000 333.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 333.000000 351.000000 C 333.000000 413.800000 333.000000 441.800000 333.000000 485.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(queue -&gt; package)[0]"><path d="M 569.019999 127.999900 C 569.400000 166.000000 569.600000 188.800000 569.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(package -&gt; step)[0]"><path d="M 569.015625 367.999939 C 569.400000 417.200000 569.600000 441.800000 569.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 806.980001 127.999900 C 806.600000 166.000000 806.600000 188.800000 806.968751 236.000122" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 806.015625 367.999939 C 806.400000 417.200000 806.600000 441.800000 806.966103 485.000144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 1030.000000 128.000000 C 1030.000000 166.000000 1030.000000 188.800000 1030.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 1030.000000 368.000000 C 1030.000000 417.200000 1030.000000 440.000000 1030.000000 476.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1256.019999 127.999900 C 1256.400000 166.000000 1256.600000 189.200000 1256.969698 238.000115" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2523181634)"/></g><mask id="2523181634" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1543" height="828">
 <rect x="-100" y="-100" width="1543" height="828" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 0fc775f9f..fb9269af1 100644
--- a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
@@ -18,7 +19,27 @@ width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><rect x="22" y="2" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="12" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="30" y="228" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="20" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 38.5 482 H 156.1836 C 157.3544 482 158.479 482.4563 159.3189 483.272 L 175.6353 499.12 C 176.5077 499.9674 177 501.1318 177 502.348 V 607.5 C 177 607.7761 176.7761 608 176.5 608 H 38.5 C 38.2239 608 38 607.7761 38 607.5 V 482.5 C 38 482.2239 38.2239 482 38.5 482 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 175.918 608 H 39.082 C 38.4328 608 38 607.5671 38 606.9178 V 483.0822 C 38 482.4329 38.4328 482 39.082 482 H 155.3607 C 156.0099 482 156.4427 482.4329 156.4427 483.0822 V 500.1808 C 156.4427 501.4794 157.3083 502.5616 158.823 502.5616 H 175.918 C 176.5672 502.5616 177 502.9945 177 503.6436 V 606.9178 C 176 607.5671 176.5672 608 175.918 608 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 28.5 492 H 146.1836 C 147.3544 492 148.479 492.4563 149.3189 493.272 L 165.6353 509.12 C 166.5077 509.9674 167 511.1318 167 512.348 V 617.5 C 167 617.7761 166.7761 618 166.5 618 H 28.5 C 28.2239 618 28 617.7761 28 617.5 V 492.5 C 28 492.2239 28.2239 492 28.5 492 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 618 H 29.082 C 28.4328 618 28 617.5671 28 616.9178 V 493.0822 C 28 492.4329 28.4328 492 29.082 492 H 145.3607 C 146.0099 492 146.4427 492.4329 146.4427 493.0822 V 510.1808 C 146.4427 511.4794 147.3083 512.5616 148.823 512.5616 H 165.918 C 166.5672 512.5616 167 512.9945 167 513.6436 V 616.9178 C 166 617.5671 166.5672 618 165.918 618 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 239 2 L 417 2 L 391 128 L 213 128 L 213 128 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 229 12 L 407 12 L 381 138 L 203 138 L 203 138 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 226 350.5231 L 226 242 L 403 242 L 403 350.5231 C 373.5 327.2206 344 327.2206 314.5 350.5231 C 285 373.8256 255.5 373.8256 226 350.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 216 360.5231 L 216 252 L 393 252 L 393 360.5231 C 363.5 337.2206 334 337.2206 304.5 360.5231 C 275 383.8256 245.5 383.8256 216 360.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="304.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 233 506 C 233 482 306.8 482 315 482 C 323.2 482 397 482 397 506 V 584 C 397 608 323.2 608 315 608 C 306.8 608 233 608 233 584 V 506 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 233 506 C 233 530 306.8 530 315 530 C 323.2 530 397 530 397 506" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 223 516 C 223 492 296.8 492 305 492 C 313.2 492 387 492 387 516 V 594 C 387 618 313.2 618 305 618 C 296.8 618 223 618 223 594 V 516 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 223 516 C 223 540 296.8 540 305 540 C 313.2 540 387 540 387 516" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 461 2 H 562 C 586 2 586 58.7 586 65 C 586 71.3 586 128 562 128 H 461 C 437 128 437 71.3 437 65 C 437 58.7 437 2 461 2 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 562 2 C 538 2 538 58.7 538 65 C 538 71.3 538 128 562 128" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 451 12 H 552 C 576 12 576 68.7 576 75 C 576 81.3 576 138 552 138 H 451 C 427 138 427 81.3 427 75 C 427 68.7 427 12 451 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 552 12 C 528 12 528 68.7 528 75 C 528 81.3 528 138 552 138" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="489.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 430 242 L 511.5 242 L 511.5 276 L 593 276 L 593 368 L 430 368 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 420 252 L 501.5 252 L 501.5 286 L 583 286 L 583 378 L 420 378 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 443 482 L 544 482 L 579 545 L 544 608 L 443 608 L 478 545 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 433 492 L 534 492 L 569 555 L 534 618 L 433 618 L 468 555 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 631 2 V 83 H 708.5 V 128 L 738.5 83 H 786 V 2 H 631 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 621 12 V 93 H 698.5 V 138 L 728.5 93 H 776 V 12 H 621 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="55.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 628 242 H 804 C 799.95 242 789 276.02 789 305 C 789 333.98 799.95 368 804 368 H 628 C 623.95 368 613 333.98 613 305 C 613 276.02 623.95 242 628 242 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 618 252 H 794 C 789.95 252 779 286.02 779 315 C 779 343.98 789.95 378 794 378 H 618 C 613.95 378 603 343.98 603 315 C 603 286.02 613.95 252 618 252 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 785 608 H 632 V 606.2093 C 632 584.7209 648.8009 565.3488 675.2343 556.0698 C 660.6735 548.5814 651.937 536.3721 651.937 523.0233 C 651.937 500.3953 677.2504 482 708.388 482 C 739.5256 482 764.839 500.3953 764.839 523.0233 C 764.839 536.3721 756.3266 548.4186 741.5418 556.2326 C 767.9752 565.5117 784.7761 584.8838 784.7761 606.3721 V 608 H 785 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 775 618 H 622 V 616.2093 C 622 594.7209 638.8009 575.3488 665.2343 566.0698 C 650.6735 558.5814 641.937 546.3721 641.937 533.0233 C 641.937 510.3953 667.2504 492 698.388 492 C 729.5256 492 754.839 510.3953 754.839 533.0233 C 754.839 546.3721 746.3266 558.4186 731.5418 566.2326 C 757.9752 575.5117 774.7761 594.8838 774.7761 616.3721 V 618 H 775 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 892 128 C 891.3455 128 890.9091 127.8362 890.4727 127.5085 L 808.6545 66.2289 C 807.7818 65.5735 807.7818 64.5904 808.6545 63.935 L 890.4727 2.4915 C 891.3454 1.8361 892.6545 1.8361 893.5272 2.4915 L 975.3454 63.9349 C 976.2181 64.5903 976.2181 65.5734 975.3454 66.2288 L 893.5273 127.5085 C 893.0909 127.8362 892.6545 128 892 128 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 882 138 C 881.3455 138 880.9091 137.8362 880.4727 137.5085 L 798.6545 76.2289 C 797.7818 75.5735 797.7818 74.5904 798.6545 73.935 L 880.4727 12.4915 C 881.3454 11.8361 882.6545 11.8361 883.5272 12.4915 L 965.3454 73.9349 C 966.2181 74.5903 966.2181 75.5734 965.3454 76.2288 L 883.5273 137.5085 C 883.0909 137.8362 882.6545 138 882 138 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="882.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="892.000000" cy="305.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="882.000000" cy="315.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="892.000000" cy="554.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="882.000000" cy="564.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1037.25 2 L 996 64.9278 L 1037.25 128 L 1119.75 128 L 1161 64.9278 L 1119.75 2 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1027.25 12 L 986 74.9278 L 1027.25 138 L 1109.75 138 L 1151 74.9278 L 1109.75 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1029.9638 272.0477 C 1029.9638 273.3862 1028.9978 274.7245 1028.032 274.7245 C 1015.7169 276.3974 1006.0579 293.4626 1006.0579 314.2083 C 1006.0579 336.2925 1016.9242 354.0267 1030.6883 354.0267 H 1124.1385 C 1138.8685 354.0267 1150.9421 334.954 1150.9421 311.8661 C 1150.9421 289.7819 1139.8341 271.3784 1125.8289 270.0401 C 1124.8629 270.0401 1123.8971 269.0362 1123.6556 267.3633 C 1120.5164 244.9447 1106.0278 228.2142 1089.1249 228.2142 C 1078.0171 228.2142 1068.1166 235.241 1061.8385 246.283 C 1061.114 247.6215 1059.9067 247.9562 1059.1823 247.6215 C 1056.7675 246.283 1054.1115 245.6139 1051.2137 245.6139 C 1040.1058 245.2791 1030.9297 256.9904 1029.9638 272.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1019.9638 282.0477 C 1019.9638 283.3862 1018.9978 284.7245 1018.032 284.7245 C 1005.7169 286.3974 996.0579 303.4626 996.0579 324.2083 C 996.0579 346.2925 1006.9242 364.0267 1020.6883 364.0267 H 1114.1385 C 1128.8685 364.0267 1140.9421 344.954 1140.9421 321.8661 C 1140.9421 299.7819 1129.8341 281.3784 1115.8289 280.0401 C 1114.8629 280.0401 1113.8971 279.0362 1113.6556 277.3633 C 1110.5164 254.9447 1096.0278 238.2142 1079.1249 238.2142 C 1068.0171 238.2142 1058.1166 245.241 1051.8385 256.283 C 1051.114 257.6215 1049.9067 257.9562 1049.1823 257.6215 C 1046.7675 256.283 1044.1115 255.6139 1041.2137 255.6139 C 1030.1058 255.2791 1020.9297 266.9904 1019.9638 282.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(square -&gt; page)[0]"><path d="M 97.510000 393.999975 L 97.980000 488.000050" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 305.017543 139.999923 L 305.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 305.000000 363.000000 L 305.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(queue -&gt; package)[0]"><path d="M 501.017543 139.999923 L 501.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(package -&gt; step)[0]"><path d="M 501.017543 379.999923 L 501.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 699.000000 140.000000 L 699.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 698.017543 379.999923 L 698.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 882.000000 140.000000 L 882.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 882.000000 380.000000 L 882.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1068.019607 139.999904 L 1068.960786 236.000192" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><mask id="2658145291" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1343" height="828">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="2" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="12" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><rect x="30" y="228" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><rect x="20" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="page"><g class="shape" ><path d="M 38.5 482 H 156.1836 C 157.3544 482 158.479 482.4563 159.3189 483.272 L 175.6353 499.12 C 176.5077 499.9674 177 501.1318 177 502.348 V 607.5 C 177 607.7761 176.7761 608 176.5 608 H 38.5 C 38.2239 608 38 607.7761 38 607.5 V 482.5 C 38 482.2239 38.2239 482 38.5 482 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 175.918 608 H 39.082 C 38.4328 608 38 607.5671 38 606.9178 V 483.0822 C 38 482.4329 38.4328 482 39.082 482 H 155.3607 C 156.0099 482 156.4427 482.4329 156.4427 483.0822 V 500.1808 C 156.4427 501.4794 157.3083 502.5616 158.823 502.5616 H 175.918 C 176.5672 502.5616 177 502.9945 177 503.6436 V 606.9178 C 176 607.5671 176.5672 608 175.918 608 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 28.5 492 H 146.1836 C 147.3544 492 148.479 492.4563 149.3189 493.272 L 165.6353 509.12 C 166.5077 509.9674 167 511.1318 167 512.348 V 617.5 C 167 617.7761 166.7761 618 166.5 618 H 28.5 C 28.2239 618 28 617.7761 28 617.5 V 492.5 C 28 492.2239 28.2239 492 28.5 492 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 618 H 29.082 C 28.4328 618 28 617.5671 28 616.9178 V 493.0822 C 28 492.4329 28.4328 492 29.082 492 H 145.3607 C 146.0099 492 146.4427 492.4329 146.4427 493.0822 V 510.1808 C 146.4427 511.4794 147.3083 512.5616 148.823 512.5616 H 165.918 C 166.5672 512.5616 167 512.9945 167 513.6436 V 616.9178 C 166 617.5671 166.5672 618 165.918 618 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">page</text></g><g id="parallelogram"><g class="shape" ><path d="M 239 2 L 417 2 L 391 128 L 213 128 L 213 128 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 229 12 L 407 12 L 381 138 L 203 138 L 203 138 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">parallelogram</text></g><g id="document"><g class="shape" ><path d="M 226 350.5231 L 226 242 L 403 242 L 403 350.5231 C 373.5 327.2206 344 327.2206 314.5 350.5231 C 285 373.8256 255.5 373.8256 226 350.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 216 360.5231 L 216 252 L 393 252 L 393 360.5231 C 363.5 337.2206 334 337.2206 304.5 360.5231 C 275 383.8256 245.5 383.8256 216 360.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="304.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">document</text></g><g id="cylinder"><g class="shape" ><path d="M 233 506 C 233 482 306.8 482 315 482 C 323.2 482 397 482 397 506 V 584 C 397 608 323.2 608 315 608 C 306.8 608 233 608 233 584 V 506 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 233 506 C 233 530 306.8 530 315 530 C 323.2 530 397 530 397 506" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 223 516 C 223 492 296.8 492 305 492 C 313.2 492 387 492 387 516 V 594 C 387 618 313.2 618 305 618 C 296.8 618 223 618 223 594 V 516 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 223 516 C 223 540 296.8 540 305 540 C 313.2 540 387 540 387 516" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="305.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cylinder</text></g><g id="queue"><g class="shape" ><path d="M 461 2 H 562 C 586 2 586 58.7 586 65 C 586 71.3 586 128 562 128 H 461 C 437 128 437 71.3 437 65 C 437 58.7 437 2 461 2 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 562 2 C 538 2 538 58.7 538 65 C 538 71.3 538 128 562 128" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 451 12 H 552 C 576 12 576 68.7 576 75 C 576 81.3 576 138 552 138 H 451 C 427 138 427 81.3 427 75 C 427 68.7 427 12 451 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 552 12 C 528 12 528 68.7 528 75 C 528 81.3 528 138 552 138" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="489.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="package"><g class="shape" ><path d="M 430 242 L 511.5 242 L 511.5 276 L 593 276 L 593 368 L 430 368 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 420 252 L 501.5 252 L 501.5 286 L 583 286 L 583 378 L 420 378 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">package</text></g><g id="step"><g class="shape" ><path d="M 443 482 L 544 482 L 579 545 L 544 608 L 443 608 L 478 545 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 433 492 L 534 492 L 569 555 L 534 618 L 433 618 L 468 555 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="501.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">step</text></g><g id="callout"><g class="shape" ><path d="M 631 2 V 83 H 708.5 V 128 L 738.5 83 H 786 V 2 H 631 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 621 12 V 93 H 698.5 V 138 L 728.5 93 H 776 V 12 H 621 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="55.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">callout</text></g><g id="stored_data"><g class="shape" ><path d="M 628 242 H 804 C 799.95 242 789 276.02 789 305 C 789 333.98 799.95 368 804 368 H 628 C 623.95 368 613 333.98 613 305 C 613 276.02 623.95 242 628 242 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 618 252 H 794 C 789.95 252 779 286.02 779 315 C 779 343.98 789.95 378 794 378 H 618 C 613.95 378 603 343.98 603 315 C 603 286.02 613.95 252 618 252 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">stored_data</text></g><g id="person"><g class="shape" ><path d="M 785 608 H 632 V 606.2093 C 632 584.7209 648.8009 565.3488 675.2343 556.0698 C 660.6735 548.5814 651.937 536.3721 651.937 523.0233 C 651.937 500.3953 677.2504 482 708.388 482 C 739.5256 482 764.839 500.3953 764.839 523.0233 C 764.839 536.3721 756.3266 548.4186 741.5418 556.2326 C 767.9752 565.5117 784.7761 584.8838 784.7761 606.3721 V 608 H 785 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 775 618 H 622 V 616.2093 C 622 594.7209 638.8009 575.3488 665.2343 566.0698 C 650.6735 558.5814 641.937 546.3721 641.937 533.0233 C 641.937 510.3953 667.2504 492 698.388 492 C 729.5256 492 754.839 510.3953 754.839 533.0233 C 754.839 546.3721 746.3266 558.4186 731.5418 566.2326 C 757.9752 575.5117 774.7761 594.8838 774.7761 616.3721 V 618 H 775 Z" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="698.500000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">person</text></g><g id="diamond"><g class="shape" ><path d="M 892 128 C 891.3455 128 890.9091 127.8362 890.4727 127.5085 L 808.6545 66.2289 C 807.7818 65.5735 807.7818 64.5904 808.6545 63.935 L 890.4727 2.4915 C 891.3454 1.8361 892.6545 1.8361 893.5272 2.4915 L 975.3454 63.9349 C 976.2181 64.5903 976.2181 65.5734 975.3454 66.2288 L 893.5273 127.5085 C 893.0909 127.8362 892.6545 128 892 128 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 882 138 C 881.3455 138 880.9091 137.8362 880.4727 137.5085 L 798.6545 76.2289 C 797.7818 75.5735 797.7818 74.5904 798.6545 73.935 L 880.4727 12.4915 C 881.3454 11.8361 882.6545 11.8361 883.5272 12.4915 L 965.3454 73.9349 C 966.2181 74.5903 966.2181 75.5734 965.3454 76.2288 L 883.5273 137.5085 C 883.0909 137.8362 882.6545 138 882 138 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="882.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">diamond</text></g><g id="oval"><g class="shape" ><ellipse class="shape" cx="892.000000" cy="305.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="882.000000" cy="315.000000" rx="68.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oval</text></g><g id="circle"><g class="shape" ><ellipse class="shape" cx="892.000000" cy="554.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><ellipse class="shape" cx="882.000000" cy="564.000000" rx="72.000000" ry="72.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="567.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">circle</text></g><g id="hexagon"><g class="shape" ><path d="M 1037.25 2 L 996 64.9278 L 1037.25 128 L 1119.75 128 L 1161 64.9278 L 1119.75 2 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1027.25 12 L 986 74.9278 L 1027.25 138 L 1109.75 138 L 1151 74.9278 L 1109.75 12 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hexagon</text></g><g id="cloud"><g class="shape" ><path d="M 1029.9638 272.0477 C 1029.9638 273.3862 1028.9978 274.7245 1028.032 274.7245 C 1015.7169 276.3974 1006.0579 293.4626 1006.0579 314.2083 C 1006.0579 336.2925 1016.9242 354.0267 1030.6883 354.0267 H 1124.1385 C 1138.8685 354.0267 1150.9421 334.954 1150.9421 311.8661 C 1150.9421 289.7819 1139.8341 271.3784 1125.8289 270.0401 C 1124.8629 270.0401 1123.8971 269.0362 1123.6556 267.3633 C 1120.5164 244.9447 1106.0278 228.2142 1089.1249 228.2142 C 1078.0171 228.2142 1068.1166 235.241 1061.8385 246.283 C 1061.114 247.6215 1059.9067 247.9562 1059.1823 247.6215 C 1056.7675 246.283 1054.1115 245.6139 1051.2137 245.6139 C 1040.1058 245.2791 1030.9297 256.9904 1029.9638 272.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1019.9638 282.0477 C 1019.9638 283.3862 1018.9978 284.7245 1018.032 284.7245 C 1005.7169 286.3974 996.0579 303.4626 996.0579 324.2083 C 996.0579 346.2925 1006.9242 364.0267 1020.6883 364.0267 H 1114.1385 C 1128.8685 364.0267 1140.9421 344.954 1140.9421 321.8661 C 1140.9421 299.7819 1129.8341 281.3784 1115.8289 280.0401 C 1114.8629 280.0401 1113.8971 279.0362 1113.6556 277.3633 C 1110.5164 254.9447 1096.0278 238.2142 1079.1249 238.2142 C 1068.0171 238.2142 1058.1166 245.241 1051.8385 256.283 C 1051.114 257.6215 1049.9067 257.9562 1049.1823 257.6215 C 1046.7675 256.283 1044.1115 255.6139 1041.2137 255.6139 C 1030.1058 255.2791 1020.9297 266.9904 1019.9638 282.0477 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1068.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(square -&gt; page)[0]"><path d="M 97.510000 393.999975 L 97.980000 488.000050" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(parallelogram -&gt; document)[0]"><path d="M 305.017543 139.999923 L 305.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(document -&gt; cylinder)[0]"><path d="M 305.000000 363.000000 L 305.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(queue -&gt; package)[0]"><path d="M 501.017543 139.999923 L 501.964914 248.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(package -&gt; step)[0]"><path d="M 501.017543 379.999923 L 501.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(callout -&gt; stored_data)[0]"><path d="M 699.000000 140.000000 L 699.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(stored_data -&gt; person)[0]"><path d="M 698.017543 379.999923 L 698.964914 488.000154" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(diamond -&gt; oval)[0]"><path d="M 882.000000 140.000000 L 882.000000 248.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(oval -&gt; circle)[0]"><path d="M 882.000000 380.000000 L 882.000000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><g id="(hexagon -&gt; cloud)[0]"><path d="M 1068.019607 139.999904 L 1068.960786 236.000192" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2658145291)"/></g><mask id="2658145291" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1343" height="828">
 <rect x="-100" y="-100" width="1343" height="828" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 8641a6a8f..fd0dbfb44 100644
--- a/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
@@ -18,7 +19,27 @@ width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
 	<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>
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 e015571a5..79f60ba91 100644
--- a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
@@ -18,7 +19,27 @@ width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
 	<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>
diff --git a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
index 24154ebe5..90796e221 100644
--- a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="494" height="793" viewBox="-108 -107 494 793"><style type="text/css">
@@ -18,7 +19,27 @@ width="494" height="793" viewBox="-108 -107 494 793"><style type="text/css">
 }
 
 ]]>
-</style><g id="c"><g class="shape" ><path d="M 87 108.5231 L 87 0 L 200 0 L 200 108.5231 C 181.1667 85.2206 162.3333 85.2206 143.5 108.5231 C 124.6667 131.8256 105.8333 131.8256 87 108.5231 Z" style="fill:#EDF0FD;stroke:#b2350d;opacity:1.000000;stroke-width:7;"/></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0db254;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="56.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="87" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#2bc3d8;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="143.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="Oval"><g class="shape" ><ellipse class="shape" cx="230.000000" cy="515.000000" rx="50.000000" ry="50.000000" style="fill:#F7F8FE;stroke:#a1a4af;opacity:1.000000;stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-3196466557" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" /> </marker><marker id="mk-1326875639" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" /> </marker><path d="M 120.792733 364.471312 C 112.692478 392.000000 104.950000 412.000000 91.375504 440.280200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-3196466557)" marker-end="url(#mk-1326875639)" mask="url(#1445952228)"/></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 class="connection" fill="#20222a" stroke-width="7" points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" /> </marker><path d="M 88.201123 121.096153 C 47.800000 164.000000 36.500000 198.600000 36.500000 232.500000 C 36.500000 266.400000 38.300000 412.000000 42.931282 437.729342" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#1445952228)"/></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2920934274" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="6" points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" /> </marker><marker id="mk-4034884378" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" /> </marker><path d="M 165.207267 364.471312 C 173.307522 392.000000 182.800000 415.600000 203.793018 459.188555" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;" marker-start="url(#mk-2920934274)" marker-end="url(#mk-4034884378)" mask="url(#1445952228)"/><text class="text-italic" x="216.472600" y="456.642100" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><g id="(c -- a)[0]"><path d="M 143.000000 116.000000 C 143.000000 162.600000 143.000000 186.000000 143.000000 218.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" mask="url(#1445952228)"/></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 239.061130 460.094579 C 247.200000 414.800000 249.500000 379.400000 249.500000 345.500000 C 249.500000 311.600000 233.400000 159.000000 173.469570 95.719422" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1445952228)"/></g><mask id="1445952228" maskUnits="userSpaceOnUse" x="-100" y="-100" width="494" height="793">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="c"><g class="shape" ><path d="M 87 108.5231 L 87 0 L 200 0 L 200 108.5231 C 181.1667 85.2206 162.3333 85.2206 143.5 108.5231 C 124.6667 131.8256 105.8333 131.8256 87 108.5231 Z" style="fill:#EDF0FD;stroke:#b2350d;opacity:1.000000;stroke-width:7;"/></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0db254;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="56.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="87" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#2bc3d8;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="143.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="Oval"><g class="shape" ><ellipse class="shape" cx="230.000000" cy="515.000000" rx="50.000000" ry="50.000000" style="fill:#F7F8FE;stroke:#a1a4af;opacity:1.000000;stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-3196466557" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" /> </marker><marker id="mk-1326875639" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" /> </marker><path d="M 120.792733 364.471312 C 112.692478 392.000000 104.950000 412.000000 91.375504 440.280200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-3196466557)" marker-end="url(#mk-1326875639)" mask="url(#1445952228)"/></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 class="connection" fill="#20222a" stroke-width="7" points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" /> </marker><path d="M 88.201123 121.096153 C 47.800000 164.000000 36.500000 198.600000 36.500000 232.500000 C 36.500000 266.400000 38.300000 412.000000 42.931282 437.729342" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#1445952228)"/></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2920934274" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="6" points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" /> </marker><marker id="mk-4034884378" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" /> </marker><path d="M 165.207267 364.471312 C 173.307522 392.000000 182.800000 415.600000 203.793018 459.188555" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;" marker-start="url(#mk-2920934274)" marker-end="url(#mk-4034884378)" mask="url(#1445952228)"/><text class="text-italic" x="216.472600" y="456.642100" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><g id="(c -- a)[0]"><path d="M 143.000000 116.000000 C 143.000000 162.600000 143.000000 186.000000 143.000000 218.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" mask="url(#1445952228)"/></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 239.061130 460.094579 C 247.200000 414.800000 249.500000 379.400000 249.500000 345.500000 C 249.500000 311.600000 233.400000 159.000000 173.469570 95.719422" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1445952228)"/></g><mask id="1445952228" maskUnits="userSpaceOnUse" x="-100" y="-100" width="494" height="793">
 <rect x="-100" y="-100" width="494" height="793" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
index f5c03ab17..1a93c700a 100644
--- a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="447" height="803" viewBox="-96 -95 447 803"><style type="text/css">
@@ -18,7 +19,27 @@ width="447" height="803" viewBox="-96 -95 447 803"><style type="text/css">
 }
 
 ]]>
-</style><g id="c"><g class="shape" ><path d="M 21 120.5231 L 21 12 L 134 12 L 134 120.5231 C 115.1667 97.2206 96.3333 97.2206 77.5 120.5231 C 58.6667 143.8256 39.8333 143.8256 21 120.5231 Z" style="fill:#EDF0FD;stroke:#b2350d;opacity:1.000000;stroke-width:7;"/></g><text class="text-bold" x="77.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="12" y="474" width="113" height="126" style="fill:#F7F8FE;stroke:#0db254;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="68.500000" y="540.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="102" y="248" width="113" height="126" style="fill:#F7F8FE;stroke:#2bc3d8;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="158.500000" y="314.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="Oval"><g class="shape" ><ellipse class="shape" cx="195.000000" cy="524.000000" rx="50.000000" ry="50.000000" style="fill:#F7F8FE;stroke:#a1a4af;opacity:1.000000;stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-3196466557" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" /> </marker><marker id="mk-1326875639" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" /> </marker><path d="M 140.666667 387.000000 L 140.666667 414.000000 S 140.666667 424.000000 130.666667 424.000000 L 97.333333 424.000000 S 87.333333 424.000000 87.333333 434.000000 L 87.333333 461.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-3196466557)" marker-end="url(#mk-1326875639)" mask="url(#4156010627)"/></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 class="connection" fill="#20222a" stroke-width="7" points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" /> </marker><path d="M 49.993056 144.999997 L 49.681052 459.500007" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#4156010627)"/></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2920934274" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="6" points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" /> </marker><marker id="mk-4034884378" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" /> </marker><path d="M 178.291262 386.999932 L 178.038835 465.000063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;" marker-start="url(#mk-2920934274)" marker-end="url(#mk-4034884378)" mask="url(#4156010627)"/><text class="text-italic" x="194.051700" y="469.051900" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><g id="(c -- a)[0]"><path d="M 77.992424 127.999996 L 77.927489 188.000006 S 77.916667 198.000000 87.916667 198.000000 L 149.500000 198.000000 S 159.500000 198.000000 159.500000 208.000000 L 159.500000 240.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" mask="url(#4156010627)"/></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.962265 471.000119 L 211.711739 431.166525 C 211.621594 416.833475 226.000000 431.166667 226.000000 416.833333 L 226.000000 198.000000 S 226.000000 188.000000 216.000000 188.000000 L 116.166667 188.000000 S 106.166667 188.000000 106.147059 178.000019 L 106.012745 109.499988" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#4156010627)"/></g><mask id="4156010627" maskUnits="userSpaceOnUse" x="-100" y="-100" width="447" height="803">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="c"><g class="shape" ><path d="M 21 120.5231 L 21 12 L 134 12 L 134 120.5231 C 115.1667 97.2206 96.3333 97.2206 77.5 120.5231 C 58.6667 143.8256 39.8333 143.8256 21 120.5231 Z" style="fill:#EDF0FD;stroke:#b2350d;opacity:1.000000;stroke-width:7;"/></g><text class="text-bold" x="77.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="12" y="474" width="113" height="126" style="fill:#F7F8FE;stroke:#0db254;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="68.500000" y="540.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="102" y="248" width="113" height="126" style="fill:#F7F8FE;stroke:#2bc3d8;opacity:1.000000;stroke-width:8;" /></g><text class="text-bold" x="158.500000" y="314.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="Oval"><g class="shape" ><ellipse class="shape" cx="195.000000" cy="524.000000" rx="50.000000" ry="50.000000" style="fill:#F7F8FE;stroke:#a1a4af;opacity:1.000000;stroke-width:6;" /></g></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-3196466557" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,15.000000 30.000000,0.000000 22.500000,15.000000 30.000000,30.000000" /> </marker><marker id="mk-1326875639" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,0.000000 30.000000,18.000000 0.000000,36.000000" /> </marker><path d="M 140.666667 387.000000 L 140.666667 414.000000 S 140.666667 424.000000 130.666667 424.000000 L 97.333333 424.000000 S 87.333333 424.000000 87.333333 434.000000 L 87.333333 461.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;stroke-dasharray:24.000000,22.141176;" marker-start="url(#mk-3196466557)" marker-end="url(#mk-1326875639)" mask="url(#4156010627)"/></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 class="connection" fill="#20222a" stroke-width="7" points="0.000000,0.000000 35.000000,21.000000 0.000000,42.000000" /> </marker><path d="M 49.993056 144.999997 L 49.681052 459.500007" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:7;" marker-end="url(#mk-2307423140)" mask="url(#4156010627)"/></g><g id="(a &lt;-&gt; Oval)[0]"><marker id="mk-2920934274" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="6" points="8.250000,27.000000 39.600000,6.750000 72.600000,27.000000 39.600000,47.250000" /> </marker><marker id="mk-4034884378" 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 class="connection" fill="#0D32B2" stroke-width="6" points="0.000000,21.000000 33.000000,0.000000 66.000000,21.000000 33.000000,42.000000" /> </marker><path d="M 178.291262 386.999932 L 178.038835 465.000063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:6;" marker-start="url(#mk-2920934274)" marker-end="url(#mk-4034884378)" mask="url(#4156010627)"/><text class="text-italic" x="194.051700" y="469.051900" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><g id="(c -- a)[0]"><path d="M 77.992424 127.999996 L 77.927489 188.000006 S 77.916667 198.000000 87.916667 198.000000 L 149.500000 198.000000 S 159.500000 198.000000 159.500000 208.000000 L 159.500000 240.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" mask="url(#4156010627)"/></g><g id="(Oval &lt;-&gt; c)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 211.962265 471.000119 L 211.711739 431.166525 C 211.621594 416.833475 226.000000 431.166667 226.000000 416.833333 L 226.000000 198.000000 S 226.000000 188.000000 216.000000 188.000000 L 116.166667 188.000000 S 106.166667 188.000000 106.147059 178.000019 L 106.012745 109.499988" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#4156010627)"/></g><mask id="4156010627" maskUnits="userSpaceOnUse" x="-100" y="-100" width="447" height="803">
 <rect x="-100" y="-100" width="447" height="803" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
index 941668c5c..b0554c8d3 100644
--- a/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="401" height="556" viewBox="-144 -102 401 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="401" height="556" viewBox="-144 -102 401 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#2296324013)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="2296324013" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#2296324013)"/><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="2296324013" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="556">
 <rect x="-100" y="-100" width="401" height="556" fill="white"></rect>
 <rect x="-44.000000" y="166.000000" width="201" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
index cc45e87a3..9ad82e945 100644
--- a/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="401" height="677" viewBox="-88 -90 401 677"><style type="text/css">
@@ -18,7 +19,27 @@ width="401" height="677" viewBox="-88 -90 401 677"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="56" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="56" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 112.500000 140.000000 L 112.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#3116495848)"/><text class="text-italic" x="112.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="126.500000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="126.500000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="3116495848" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="677">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="56" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="56" y="359" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="112.500000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-1247258845" 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 class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><path d="M 112.500000 140.000000 L 112.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#3116495848)"/><text class="text-italic" x="112.500000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">To err is human, to moo bovine</text><text class="text-italic" x="126.500000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="126.500000" y="351.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text></g><mask id="3116495848" maskUnits="userSpaceOnUse" x="-100" y="-100" width="401" height="677">
 <rect x="-100" y="-100" width="401" height="677" fill="white"></rect>
 <rect x="12.000000" y="238.000000" width="201" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg b/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
index c309a3ffe..0c32ad21a 100644
--- a/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1522" height="1008" viewBox="-102 -102 1522 1008"><style type="text/css">
@@ -18,7 +19,27 @@ width="1522" height="1008" viewBox="-102 -102 1522 1008"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="602" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="658.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="256" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="312.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="944" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1000.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="85" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="142.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="426" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="482.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="771" y="452" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="826.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="1117" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1174.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="0" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="173" y="678" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="227.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="342" y="678" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="397.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="512" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="568.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="685" y="678" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="739.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="854" y="678" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="912.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="1031" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1087.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="1204" y="678" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1261.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 600.348690 82.059489 C 370.450000 157.087798 312.500000 186.000000 312.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(a -&gt; c)[0]"><path d="M 717.148752 82.323745 C 943.250000 157.139092 1000.250000 186.000000 1000.250000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(b -&gt; d)[0]"><path d="M 254.332897 327.550631 C 164.800000 386.889150 142.000000 412.000000 142.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(b -&gt; e)[0]"><path d="M 370.666356 327.606744 C 460.000000 386.900147 482.750000 412.000000 482.750000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(c -&gt; f)[0]"><path d="M 942.071959 326.728084 C 849.550000 386.727977 826.000000 412.000000 826.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(c -&gt; g)[0]"><path d="M 1058.427328 326.781828 C 1150.750000 386.738506 1174.250000 412.000000 1174.250000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(d -&gt; h)[0]"><path d="M 93.125094 579.594905 C 64.066372 618.000000 56.500000 638.000000 56.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(d -&gt; i)[0]"><path d="M 190.874906 579.594905 C 219.933628 618.000000 227.500000 638.000000 227.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(e -&gt; j)[0]"><path d="M 433.733473 579.593207 C 404.588496 618.000000 397.000000 638.000000 397.000000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(e -&gt; k)[0]"><path d="M 531.766527 579.593207 C 560.911504 618.000000 568.500000 638.000000 568.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(f -&gt; l)[0]"><path d="M 776.558654 579.588117 C 747.154867 618.000000 739.500000 638.000000 739.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(f -&gt; m)[0]"><path d="M 875.441346 579.588117 C 904.845133 618.000000 912.500000 638.000000 912.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(g -&gt; n)[0]"><path d="M 1124.667061 579.586422 C 1095.176991 618.000000 1087.500000 638.000000 1087.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(g -&gt; o)[0]"><path d="M 1223.832939 579.586422 C 1253.323009 618.000000 1261.000000 638.000000 1261.000000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><mask id="1607582217" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1522" height="1008">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="602" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="658.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="256" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="312.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="944" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1000.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="85" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="142.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="426" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="482.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="771" y="452" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="826.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="1117" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1174.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="0" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="173" y="678" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="227.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="342" y="678" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="397.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="512" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="568.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="685" y="678" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="739.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="854" y="678" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="912.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="1031" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1087.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="1204" y="678" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1261.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 600.348690 82.059489 C 370.450000 157.087798 312.500000 186.000000 312.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(a -&gt; c)[0]"><path d="M 717.148752 82.323745 C 943.250000 157.139092 1000.250000 186.000000 1000.250000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(b -&gt; d)[0]"><path d="M 254.332897 327.550631 C 164.800000 386.889150 142.000000 412.000000 142.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(b -&gt; e)[0]"><path d="M 370.666356 327.606744 C 460.000000 386.900147 482.750000 412.000000 482.750000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(c -&gt; f)[0]"><path d="M 942.071959 326.728084 C 849.550000 386.727977 826.000000 412.000000 826.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(c -&gt; g)[0]"><path d="M 1058.427328 326.781828 C 1150.750000 386.738506 1174.250000 412.000000 1174.250000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(d -&gt; h)[0]"><path d="M 93.125094 579.594905 C 64.066372 618.000000 56.500000 638.000000 56.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(d -&gt; i)[0]"><path d="M 190.874906 579.594905 C 219.933628 618.000000 227.500000 638.000000 227.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(e -&gt; j)[0]"><path d="M 433.733473 579.593207 C 404.588496 618.000000 397.000000 638.000000 397.000000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(e -&gt; k)[0]"><path d="M 531.766527 579.593207 C 560.911504 618.000000 568.500000 638.000000 568.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(f -&gt; l)[0]"><path d="M 776.558654 579.588117 C 747.154867 618.000000 739.500000 638.000000 739.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(f -&gt; m)[0]"><path d="M 875.441346 579.588117 C 904.845133 618.000000 912.500000 638.000000 912.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(g -&gt; n)[0]"><path d="M 1124.667061 579.586422 C 1095.176991 618.000000 1087.500000 638.000000 1087.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><g id="(g -&gt; o)[0]"><path d="M 1223.832939 579.586422 C 1253.323009 618.000000 1261.000000 638.000000 1261.000000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1607582217)"/></g><mask id="1607582217" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1522" height="1008">
 <rect x="-100" y="-100" width="1522" height="1008" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg b/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
index 06be4e023..05c609f60 100644
--- a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1242" height="1008" viewBox="-90 -90 1242 1008"><style type="text/css">
@@ -18,7 +19,27 @@ width="1242" height="1008" viewBox="-90 -90 1242 1008"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="68" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="124.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="49" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="105.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="572" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="628.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="30" y="464" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="291" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="347.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="554" y="464" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="609.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="821" y="464" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="878.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="12" y="690" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="145" y="690" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="274" y="690" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="404" y="690" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="537" y="690" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="591.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="666" y="690" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="724.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="803" y="690" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="859.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="936" y="690" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="993.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 106.333333 140.000000 L 106.333333 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(a -&gt; c)[0]"><path d="M 144.000000 140.000000 L 144.000000 178.000000 S 144.000000 188.000000 154.000000 188.000000 L 618.833333 188.000000 S 628.833333 188.000000 628.833333 198.000000 L 628.833333 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(b -&gt; d)[0]"><path d="M 87.500000 366.000000 L 87.500000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(b -&gt; e)[0]"><path d="M 125.166667 366.000000 L 125.166667 404.000000 S 125.166667 414.000000 135.166667 414.000000 L 337.833333 414.000000 S 347.833333 414.000000 347.833333 424.000000 L 347.833333 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(c -&gt; f)[0]"><path d="M 610.000000 366.000000 L 610.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(c -&gt; g)[0]"><path d="M 647.666667 366.000000 L 647.666667 404.000000 S 647.666667 414.000000 657.666667 414.000000 L 868.500000 414.000000 S 878.500000 414.000000 878.500000 424.000000 L 878.500000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(d -&gt; h)[0]"><path d="M 68.500000 592.000000 L 68.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(d -&gt; i)[0]"><path d="M 106.500000 592.000000 L 106.500000 630.000000 S 106.500000 640.000000 116.500000 640.000000 L 189.500000 640.000000 S 199.500000 640.000000 199.500000 650.000000 L 199.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(e -&gt; j)[0]"><path d="M 329.000000 592.000000 L 329.000000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(e -&gt; k)[0]"><path d="M 366.666667 592.000000 L 366.666667 630.000000 S 366.666667 640.000000 376.666667 640.000000 L 450.500000 640.000000 S 460.500000 640.000000 460.500000 650.000000 L 460.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(f -&gt; l)[0]"><path d="M 591.500000 592.000000 L 591.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(f -&gt; m)[0]"><path d="M 628.500000 592.000000 L 628.500000 630.000000 S 628.500000 640.000000 638.500000 640.000000 L 714.500000 640.000000 S 724.500000 640.000000 724.500000 650.000000 L 724.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(g -&gt; n)[0]"><path d="M 859.500000 592.000000 L 859.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(g -&gt; o)[0]"><path d="M 897.500000 592.000000 L 897.500000 630.000000 S 897.500000 640.000000 907.500000 640.000000 L 983.000000 640.000000 S 993.000000 640.000000 993.000000 650.000000 L 993.000000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><mask id="2959891173" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1242" height="1008">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="68" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="124.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="49" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="105.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="572" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="628.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="30" y="464" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="291" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="347.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="554" y="464" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="609.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="821" y="464" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="878.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="12" y="690" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="145" y="690" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="274" y="690" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="404" y="690" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="537" y="690" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="591.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="666" y="690" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="724.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="803" y="690" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="859.500000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="936" y="690" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="993.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 106.333333 140.000000 L 106.333333 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(a -&gt; c)[0]"><path d="M 144.000000 140.000000 L 144.000000 178.000000 S 144.000000 188.000000 154.000000 188.000000 L 618.833333 188.000000 S 628.833333 188.000000 628.833333 198.000000 L 628.833333 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(b -&gt; d)[0]"><path d="M 87.500000 366.000000 L 87.500000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(b -&gt; e)[0]"><path d="M 125.166667 366.000000 L 125.166667 404.000000 S 125.166667 414.000000 135.166667 414.000000 L 337.833333 414.000000 S 347.833333 414.000000 347.833333 424.000000 L 347.833333 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(c -&gt; f)[0]"><path d="M 610.000000 366.000000 L 610.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(c -&gt; g)[0]"><path d="M 647.666667 366.000000 L 647.666667 404.000000 S 647.666667 414.000000 657.666667 414.000000 L 868.500000 414.000000 S 878.500000 414.000000 878.500000 424.000000 L 878.500000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(d -&gt; h)[0]"><path d="M 68.500000 592.000000 L 68.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(d -&gt; i)[0]"><path d="M 106.500000 592.000000 L 106.500000 630.000000 S 106.500000 640.000000 116.500000 640.000000 L 189.500000 640.000000 S 199.500000 640.000000 199.500000 650.000000 L 199.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(e -&gt; j)[0]"><path d="M 329.000000 592.000000 L 329.000000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(e -&gt; k)[0]"><path d="M 366.666667 592.000000 L 366.666667 630.000000 S 366.666667 640.000000 376.666667 640.000000 L 450.500000 640.000000 S 460.500000 640.000000 460.500000 650.000000 L 460.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(f -&gt; l)[0]"><path d="M 591.500000 592.000000 L 591.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(f -&gt; m)[0]"><path d="M 628.500000 592.000000 L 628.500000 630.000000 S 628.500000 640.000000 638.500000 640.000000 L 714.500000 640.000000 S 724.500000 640.000000 724.500000 650.000000 L 724.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(g -&gt; n)[0]"><path d="M 859.500000 592.000000 L 859.500000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><g id="(g -&gt; o)[0]"><path d="M 897.500000 592.000000 L 897.500000 630.000000 S 897.500000 640.000000 907.500000 640.000000 L 983.000000 640.000000 S 993.000000 640.000000 993.000000 650.000000 L 993.000000 686.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2959891173)"/></g><mask id="2959891173" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1242" height="1008">
 <rect x="-100" y="-100" width="1242" height="1008" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg b/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
index 496ac52fa..2e372fda2 100644
--- a/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="638" height="656" viewBox="-102 -102 638 656"><style type="text/css">
@@ -18,7 +19,27 @@ width="638" height="656" viewBox="-102 -102 638 656"><style type="text/css">
 }
 
 ]]>
-</style><g id="aaa"><g class="shape" ><rect x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3990951543)"/><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 297.555754 298.965997 C 199.400000 241.000000 170.600000 216.000000 157.643805 177.893545" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#3990951543)"/><text class="text-italic" x="215.500000" y="256.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="3990951543" maskUnits="userSpaceOnUse" x="-100" y="-100" width="638" height="656">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="aaa"><g class="shape" ><rect x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3990951543)"/><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 297.555754 298.965997 C 199.400000 241.000000 170.600000 216.000000 157.643805 177.893545" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#3990951543)"/><text class="text-italic" x="215.500000" y="256.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="3990951543" maskUnits="userSpaceOnUse" x="-100" y="-100" width="638" height="656">
 <rect x="-100" y="-100" width="638" height="656" fill="white"></rect>
 <rect x="105.000000" y="215.000000" width="23" height="21" fill="black"></rect>
 <rect x="203.000000" y="240.000000" width="25" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
index 70ef81d17..92bf02fae 100644
--- a/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="634" height="873" viewBox="-90 -90 634 873"><style type="text/css">
@@ -18,7 +19,27 @@ width="634" height="873" viewBox="-90 -90 634 873"><style type="text/css">
 }
 
 ]]>
-</style><g id="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 303.000000 125.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="286.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="4025362291" maskUnits="userSpaceOnUse" x="-100" y="-100" width="634" height="873">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 303.000000 125.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="286.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="4025362291" maskUnits="userSpaceOnUse" x="-100" y="-100" width="634" height="873">
 <rect x="-100" y="-100" width="634" height="873" fill="white"></rect>
 <rect x="292.000000" y="613.000000" width="23" height="21" fill="black"></rect>
 <rect x="291.000000" y="270.000000" width="25" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
index f7e38128e..ed520ab12 100644
--- a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1319" height="1855" viewBox="-102 -102 1319 1855"><style type="text/css">
@@ -18,7 +19,27 @@ width="1319" height="1855" viewBox="-102 -102 1319 1855"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
index 0e57c4916..e616b37b0 100644
--- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1096" height="1908" viewBox="-90 -90 1096 1908"><style type="text/css">
@@ -18,7 +19,27 @@ width="1096" height="1908" viewBox="-90 -90 1096 1908"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
index 85bc9a557..254a179f4 100644
--- a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="728" height="630" viewBox="-102 -102 728 630"><style type="text/css">
@@ -18,7 +19,27 @@ width="728" height="630" viewBox="-102 -102 728 630"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="524" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="444" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="364" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 245.659544 173.545716 C 273.333333 154.932384 282.500000 150.000000 285.250000 150.000000 C 288.000000 150.000000 291.666667 162.600000 294.416667 181.500000 C 297.166667 200.400000 297.166667 225.600000 294.416667 244.500000 C 291.666667 263.400000 273.333333 271.067616 247.319087 253.570489" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.791667 183.835630 C 300.000000 156.944882 317.500000 150.000000 322.750000 150.000000 C 328.000000 150.000000 335.000000 162.600000 340.250000 181.500000 C 345.500000 200.400000 345.500000 225.600000 340.250000 244.500000 C 335.000000 263.400000 300.000000 269.055118 247.583334 243.053150" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 243.047451 236.531831 C 244.066667 235.317672 244.266667 235.079418 246.571765 232.333427" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><mask id="3367121272" maskUnits="userSpaceOnUse" x="-100" y="-100" width="728" height="630">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="524" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="444" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="364" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 245.659544 173.545716 C 273.333333 154.932384 282.500000 150.000000 285.250000 150.000000 C 288.000000 150.000000 291.666667 162.600000 294.416667 181.500000 C 297.166667 200.400000 297.166667 225.600000 294.416667 244.500000 C 291.666667 263.400000 273.333333 271.067616 247.319087 253.570489" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.791667 183.835630 C 300.000000 156.944882 317.500000 150.000000 322.750000 150.000000 C 328.000000 150.000000 335.000000 162.600000 340.250000 181.500000 C 345.500000 200.400000 345.500000 225.600000 340.250000 244.500000 C 335.000000 263.400000 300.000000 269.055118 247.583334 243.053150" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 243.047451 236.531831 C 244.066667 235.317672 244.266667 235.079418 246.571765 232.333427" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><mask id="3367121272" maskUnits="userSpaceOnUse" x="-100" y="-100" width="728" height="630">
 <rect x="-100" y="-100" width="728" height="630" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
index f056d8caf..ee853cd90 100644
--- a/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="778" height="805" viewBox="-90 -90 778 805"><style type="text/css">
@@ -18,7 +19,27 @@ width="778" height="805" viewBox="-90 -90 778 805"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="574" height="601" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="424" height="451" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="162" y="162" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="294.000000" y="187.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="237" y="237" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 162.000000 540.000000 L 162.000000 609.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 237.000000 89.000000 L 237.000000 158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 294.000000 365.000000 L 294.000000 443.000000 S 294.000000 453.000000 304.000000 453.000000 L 426.000000 453.000000 S 436.000000 453.000000 436.000000 443.000000 L 436.000000 91.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><mask id="3197861395" maskUnits="userSpaceOnUse" x="-100" y="-100" width="778" height="805">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="574" height="601" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="424" height="451" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="162" y="162" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="294.000000" y="187.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="237" y="237" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 162.000000 540.000000 L 162.000000 609.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 237.000000 89.000000 L 237.000000 158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 294.000000 365.000000 L 294.000000 443.000000 S 294.000000 453.000000 304.000000 453.000000 L 426.000000 453.000000 S 436.000000 453.000000 436.000000 443.000000 L 436.000000 91.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><mask id="3197861395" maskUnits="userSpaceOnUse" x="-100" y="-100" width="778" height="805">
 <rect x="-100" y="-100" width="778" height="805" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg b/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
index 33f767409..fbe2c63b8 100644
--- a/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="782" viewBox="-102 -102 317 782"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="782" viewBox="-102 -102 317 782"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 45.000993 127.969391 C 38.269912 166.000000 38.300000 186.000000 44.791388 222.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; c)[0]"><path d="M 45.000993 353.969391 C 38.269912 392.000000 38.300000 412.000000 44.791388 448.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(c -&gt; b)[0]"><path d="M 67.999007 450.030609 C 74.730088 412.000000 74.700000 392.000000 68.208612 355.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; a)[0]"><path d="M 67.999007 224.030609 C 74.730088 186.000000 74.700000 166.000000 68.208612 129.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><mask id="4076825876" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="782">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 45.000993 127.969391 C 38.269912 166.000000 38.300000 186.000000 44.791388 222.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; c)[0]"><path d="M 45.000993 353.969391 C 38.269912 392.000000 38.300000 412.000000 44.791388 448.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(c -&gt; b)[0]"><path d="M 67.999007 450.030609 C 74.730088 412.000000 74.700000 392.000000 68.208612 355.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; a)[0]"><path d="M 67.999007 224.030609 C 74.730088 186.000000 74.700000 166.000000 68.208612 129.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><mask id="4076825876" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="782">
 <rect x="-100" y="-100" width="317" height="782" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg b/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
index c9910d103..7e27dd4e2 100644
--- a/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="782" viewBox="-90 -90 317 782"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="782" viewBox="-90 -90 317 782"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="12" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 49.666667 140.000000 L 49.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; c)[0]"><path d="M 49.666667 366.000000 L 49.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(c -&gt; b)[0]"><path d="M 87.333333 462.000000 L 87.333333 368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; a)[0]"><path d="M 87.333333 236.000000 L 87.333333 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><mask id="1451019722" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="782">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="12" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 49.666667 140.000000 L 49.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; c)[0]"><path d="M 49.666667 366.000000 L 49.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(c -&gt; b)[0]"><path d="M 87.333333 462.000000 L 87.333333 368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; a)[0]"><path d="M 87.333333 236.000000 L 87.333333 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><mask id="1451019722" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="782">
 <rect x="-100" y="-100" width="317" height="782" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/class/dagre/sketch.exp.svg b/e2etests/testdata/stable/class/dagre/sketch.exp.svg
index 73d4cf0b9..7955f25c5 100644
--- a/e2etests/testdata/stable/class/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/class/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="626" height="572" viewBox="-102 -102 626 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="626" height="572" viewBox="-102 -102 626 572"><style type="text/css">
 }
 
 ]]>
-</style><g id="manager"><g class="shape" ><rect class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="211.000000" y="55.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">BatchManager</text><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="0" y="0" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="211.000000" y="55.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">BatchManager</text><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="402.000000" y="120.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="10.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
diff --git a/e2etests/testdata/stable/class/elk/sketch.exp.svg b/e2etests/testdata/stable/class/elk/sketch.exp.svg
index c01f11c1f..09edba75b 100644
--- a/e2etests/testdata/stable/class/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/class/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="626" height="572" viewBox="-90 -90 626 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="626" height="572" viewBox="-90 -90 626 572"><style type="text/css">
 }
 
 ]]>
-</style><g id="manager"><g class="shape" ><rect class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="223.000000" y="67.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">BatchManager</text><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="12" y="12" width="422" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="223.000000" y="67.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">BatchManager</text><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="414.000000" y="132.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="22.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
diff --git a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
index 3b5403dde..92e56e53a 100644
--- a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="959" height="822" viewBox="-102 -102 959 822"><style type="text/css">
@@ -18,7 +19,27 @@ width="959" height="822" viewBox="-102 -102 959 822"><style type="text/css">
 }
 
 ]]>
-</style><g id="hey"><g class="shape" ></g><g transform="translate(0.000000 226.000000)" style="opacity:1.000000"><rect class="shape" width="755" height="166" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" font-style="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
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 226.000000)" style="opacity:1.000000"><rect class="shape" width="755" height="166" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" font-style="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" font-style="italic"></tspan><tspan fill="#999988" font-style="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" font-style="italic"></tspan><tspan fill="#999988" font-style="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" font-style="italic"></tspan><tspan fill="#000000" font-weight="bold">func</tspan>&#160;<tspan fill="#990000" font-weight="bold">RegisterHash</tspan>(h&#160;Hash,&#160;f&#160;<tspan fill="#000000" font-weight="bold">func</tspan>()&#160;hash.Hash)&#160;{
diff --git a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
index 65e487b3b..f26b7ba4a 100644
--- a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="959" height="822" viewBox="-90 -90 959 822"><style type="text/css">
@@ -18,7 +19,27 @@ width="959" height="822" viewBox="-90 -90 959 822"><style type="text/css">
 }
 
 ]]>
-</style><g id="hey"><g class="shape" ></g><g transform="translate(12.000000 238.000000)" style="opacity:1.000000"><rect class="shape" width="755" height="166" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" font-style="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
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 238.000000)" style="opacity:1.000000"><rect class="shape" width="755" height="166" style="stroke: #0A0F25;fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#999988" font-style="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" font-style="italic"></tspan><tspan fill="#999988" font-style="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" font-style="italic"></tspan><tspan fill="#999988" font-style="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" font-style="italic"></tspan><tspan fill="#000000" font-weight="bold">func</tspan>&#160;<tspan fill="#990000" font-weight="bold">RegisterHash</tspan>(h&#160;Hash,&#160;f&#160;<tspan fill="#000000" font-weight="bold">func</tspan>()&#160;hash.Hash)&#160;{
diff --git a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
index abf42e09c..7db73b331 100644
--- a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="498" height="1182" viewBox="-102 -102 498 1182"><style type="text/css">
@@ -18,7 +19,27 @@ width="498" height="1182" viewBox="-102 -102 498 1182"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="41" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="40" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="0" y="652" width="294" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="685.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="91" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="90" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="40" y="702" width="214" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="731.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="90" y="752" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="818.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 147.000000 178.000000 C 147.000000 216.000000 147.000000 236.000000 147.000000 251.000000 C 147.000000 266.000000 147.000000 336.000000 147.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 147.000000 504.000000 C 147.000000 542.000000 147.000000 562.000000 147.000000 577.000000 C 147.000000 592.000000 147.000000 612.000000 147.000000 627.000000 C 147.000000 642.000000 147.000000 712.000000 147.000000 748.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><mask id="3808341037" maskUnits="userSpaceOnUse" x="-100" y="-100" width="498" height="1182">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="41" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="40" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="0" y="652" width="294" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="685.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="91" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="90" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="40" y="702" width="214" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="731.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="90" y="752" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="818.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 147.000000 178.000000 C 147.000000 216.000000 147.000000 236.000000 147.000000 251.000000 C 147.000000 266.000000 147.000000 336.000000 147.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 147.000000 504.000000 C 147.000000 542.000000 147.000000 562.000000 147.000000 577.000000 C 147.000000 592.000000 147.000000 612.000000 147.000000 627.000000 C 147.000000 642.000000 147.000000 712.000000 147.000000 748.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><mask id="3808341037" maskUnits="userSpaceOnUse" x="-100" y="-100" width="498" height="1182">
 <rect x="-100" y="-100" width="498" height="1182" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg b/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
index a04b42909..bf39fadbc 100644
--- a/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="618" height="1407" viewBox="-90 -90 618 1407"><style type="text/css">
@@ -18,7 +19,27 @@ width="618" height="1407" viewBox="-90 -90 618 1407"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="87" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="87" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="12" y="784" width="414" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="817.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="162" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="162" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="87" y="864" width="264" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="893.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="162" y="939" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 219.000000 215.000000 L 219.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#349145811)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 219.000000 601.000000 L 219.000000 935.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#349145811)"/></g><mask id="349145811" maskUnits="userSpaceOnUse" x="-100" y="-100" width="618" height="1407">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="87" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="87" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="12" y="784" width="414" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="817.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="162" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="162" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="87" y="864" width="264" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="893.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="162" y="939" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 219.000000 215.000000 L 219.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#349145811)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 219.000000 601.000000 L 219.000000 935.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#349145811)"/></g><mask id="349145811" maskUnits="userSpaceOnUse" x="-100" y="-100" width="618" height="1407">
 <rect x="-100" y="-100" width="618" height="1407" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 342012ee9..cb8fdfff7 100644
--- a/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1410" height="747" viewBox="-643 -143 1410 747"><style type="text/css">
@@ -18,7 +19,27 @@ width="1410" height="747" viewBox="-643 -143 1410 747"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 8b2b13a0e..9782d0e03 100644
--- a/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1410" height="747" viewBox="-631 -131 1410 747"><style type="text/css">
@@ -18,7 +19,27 @@ width="1410" height="747" viewBox="-631 -131 1410 747"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 88423e024..39aa31783 100644
--- a/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="655" height="1078" viewBox="-102 -172 655 1078"><style type="text/css">
@@ -18,7 +19,27 @@ width="655" height="1078" viewBox="-102 -172 655 1078"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 d47492bc1..b2f1173fc 100644
--- a/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="615" height="1078" viewBox="-90 -160 615 1078"><style type="text/css">
@@ -18,7 +19,27 @@ width="615" height="1078" viewBox="-90 -160 615 1078"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
index 7334ebcd3..73d793e23 100644
--- a/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="790" height="1534" viewBox="-102 -102 790 1534"><style type="text/css">
@@ -18,7 +19,27 @@ width="790" height="1534" viewBox="-102 -102 790 1534"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="416" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="333" y="226" width="253" height="878" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="459.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="0" y="502" width="293" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="535.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="404" y="1204" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="1270.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="416" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="581.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="383" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 472.750000 128.000000 C 472.750000 166.000000 472.750000 236.000000 472.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 434.660405 403.723672 C 412.134956 442.000000 406.250000 462.000000 406.250000 477.000000 C 406.250000 492.000000 365.650000 569.600000 206.920003 638.409063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 148.471500 828.336433 C 380.900000 868.000000 439.500000 888.000000 439.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 439.500000 1056.000000 C 439.500000 1094.000000 441.300000 1164.000000 447.791388 1200.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(f -&gt; g)[0]"><path d="M 508.941346 1202.411883 C 538.345133 1164.000000 546.000000 1144.000000 546.000000 1108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 330.619728 598.681599 C 268.500000 621.200000 316.500000 603.800000 256.260544 625.636803" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><mask id="3377918310" maskUnits="userSpaceOnUse" x="-100" y="-100" width="790" height="1534">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="416" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="333" y="226" width="253" height="878" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="459.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="0" y="502" width="293" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="535.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="404" y="1204" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="1270.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="416" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="581.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="383" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 472.750000 128.000000 C 472.750000 166.000000 472.750000 236.000000 472.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 434.660405 403.723672 C 412.134956 442.000000 406.250000 462.000000 406.250000 477.000000 C 406.250000 492.000000 365.650000 569.600000 206.920003 638.409063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 148.471500 828.336433 C 380.900000 868.000000 439.500000 888.000000 439.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 439.500000 1056.000000 C 439.500000 1094.000000 441.300000 1164.000000 447.791388 1200.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(f -&gt; g)[0]"><path d="M 508.941346 1202.411883 C 538.345133 1164.000000 546.000000 1144.000000 546.000000 1108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 330.619728 598.681599 C 268.500000 621.200000 316.500000 603.800000 256.260544 625.636803" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><mask id="3377918310" maskUnits="userSpaceOnUse" x="-100" y="-100" width="790" height="1534">
 <rect x="-100" y="-100" width="790" height="1534" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
index a55cc87d5..c3cf69151 100644
--- a/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="756" height="1310" viewBox="-90 -90 756 1310"><style type="text/css">
@@ -18,7 +19,27 @@ width="756" height="1310" viewBox="-90 -90 756 1310"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="87" y="253" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="285.000000" y="286.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="12" y="639" width="413" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="672.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="445" y="639" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.500000" y="705.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="162" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="87" y="719" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="748.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="295" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="162" y="794" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="860.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 218.500000 140.000000 L 218.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 218.500000 456.000000 L 218.500000 790.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 87.000000 1072.000000 L 87.000000 1110.000000 S 87.000000 1120.000000 97.000000 1120.000000 L 556.000000 1120.000000 S 566.000000 1120.000000 566.000000 1110.000000 L 566.000000 198.000000 S 566.000000 188.000000 556.000000 188.000000 L 361.500000 188.000000 S 351.500000 188.000000 351.500000 198.000000 L 351.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 351.500000 456.000000 L 351.500000 574.000000 S 351.500000 584.000000 361.500000 584.000000 L 472.000000 584.000000 S 482.000000 584.000000 482.000000 594.000000 L 482.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(f -&gt; g)[0]"><path d="M 519.000000 637.000000 L 519.000000 208.000000 S 519.000000 198.000000 509.000000 198.000000 L 371.500000 198.000000 S 361.500000 198.000000 361.500000 208.000000 L 361.500000 249.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 228.500000 531.000000 L 228.500000 715.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><mask id="3139620414" maskUnits="userSpaceOnUse" x="-100" y="-100" width="756" height="1310">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="87" y="253" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="285.000000" y="286.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="12" y="639" width="413" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="672.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="445" y="639" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.500000" y="705.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="162" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="87" y="719" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="748.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="295" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="162" y="794" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="860.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 218.500000 140.000000 L 218.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 218.500000 456.000000 L 218.500000 790.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 87.000000 1072.000000 L 87.000000 1110.000000 S 87.000000 1120.000000 97.000000 1120.000000 L 556.000000 1120.000000 S 566.000000 1120.000000 566.000000 1110.000000 L 566.000000 198.000000 S 566.000000 188.000000 556.000000 188.000000 L 361.500000 188.000000 S 351.500000 188.000000 351.500000 198.000000 L 351.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 351.500000 456.000000 L 351.500000 574.000000 S 351.500000 584.000000 361.500000 584.000000 L 472.000000 584.000000 S 482.000000 584.000000 482.000000 594.000000 L 482.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(f -&gt; g)[0]"><path d="M 519.000000 637.000000 L 519.000000 208.000000 S 519.000000 198.000000 509.000000 198.000000 L 371.500000 198.000000 S 361.500000 198.000000 361.500000 208.000000 L 361.500000 249.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 228.500000 531.000000 L 228.500000 715.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><mask id="3139620414" maskUnits="userSpaceOnUse" x="-100" y="-100" width="756" height="1310">
 <rect x="-100" y="-100" width="756" height="1310" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 cc439add7..d791e38ef 100644
--- a/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="837" height="782" viewBox="-102 -102 837 782"><style type="text/css">
@@ -18,7 +19,27 @@ width="837" height="782" viewBox="-102 -102 837 782"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="174" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="230.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="173" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="230.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="348" y="452" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="403.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="347" y="0" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="404.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="347" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="403.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="e"><g class="shape" ><rect x="520" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="576.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-34969052" markerWidth="42.000000" markerHeight="45.000000" refX="4.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white" transform="scale(-1) translate(-42.000000, -45.000000)"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><marker id="mk-3432875809" markerWidth="42.000000" markerHeight="45.000000" refX="37.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><path d="M 56.500000 131.500000 C 56.500000 166.000000 56.500000 186.000000 56.500000 220.500000" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:3;" marker-start="url(#mk-34969052)" marker-end="url(#mk-3432875809)" mask="url(#589309902)"/></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="28.000000" markerHeight="30.000000" refX="1.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><marker id="mk-850452983" markerWidth="28.000000" markerHeight="30.000000" refX="26.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><path d="M 230.000000 128.500000 C 230.000000 166.000000 230.000000 186.000000 230.000000 223.500000" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#589309902)"/></g><g id="(d &lt;-&gt; f)[0]"><path d="M 230.000000 354.500000 C 230.000000 392.000000 253.550000 417.360173 345.656034 477.435104" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#589309902)"/></g><g id="(g &lt;-&gt; h)[0]"><marker id="mk-3322562568" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-2978224791" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 403.500000 130.000000 C 403.500000 166.000000 403.500000 186.000000 403.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-3322562568)" marker-end="url(#mk-2978224791)" mask="url(#589309902)"/></g><g id="(e &lt;-&gt; f)[0]"><marker id="mk-1759247020" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-3530341923" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 576.500000 356.000000 C 576.500000 392.000000 552.900000 417.400000 461.849878 476.814063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-1759247020)" marker-end="url(#mk-3530341923)" mask="url(#589309902)"/></g><mask id="589309902" maskUnits="userSpaceOnUse" x="-100" y="-100" width="837" height="782">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="174" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="230.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="173" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="230.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="348" y="452" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="403.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="347" y="0" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="404.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="347" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="403.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="e"><g class="shape" ><rect x="520" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="576.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-34969052" markerWidth="42.000000" markerHeight="45.000000" refX="4.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white" transform="scale(-1) translate(-42.000000, -45.000000)"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><marker id="mk-3432875809" markerWidth="42.000000" markerHeight="45.000000" refX="37.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><path d="M 56.500000 131.500000 C 56.500000 166.000000 56.500000 186.000000 56.500000 220.500000" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:3;" marker-start="url(#mk-34969052)" marker-end="url(#mk-3432875809)" mask="url(#589309902)"/></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="28.000000" markerHeight="30.000000" refX="1.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><marker id="mk-850452983" markerWidth="28.000000" markerHeight="30.000000" refX="26.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><path d="M 230.000000 128.500000 C 230.000000 166.000000 230.000000 186.000000 230.000000 223.500000" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#589309902)"/></g><g id="(d &lt;-&gt; f)[0]"><path d="M 230.000000 354.500000 C 230.000000 392.000000 253.550000 417.360173 345.656034 477.435104" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#589309902)"/></g><g id="(g &lt;-&gt; h)[0]"><marker id="mk-3322562568" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-2978224791" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 403.500000 130.000000 C 403.500000 166.000000 403.500000 186.000000 403.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-3322562568)" marker-end="url(#mk-2978224791)" mask="url(#589309902)"/></g><g id="(e &lt;-&gt; f)[0]"><marker id="mk-1759247020" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-3530341923" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 576.500000 356.000000 C 576.500000 392.000000 552.900000 417.400000 461.849878 476.814063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-1759247020)" marker-end="url(#mk-3530341923)" mask="url(#589309902)"/></g><mask id="589309902" maskUnits="userSpaceOnUse" x="-100" y="-100" width="837" height="782">
 <rect x="-100" y="-100" width="837" height="782" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 e2f0d4b1d..9e900f499 100644
--- a/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="717" height="782" viewBox="-90 -90 717 782"><style type="text/css">
@@ -18,7 +19,27 @@ width="717" height="782" viewBox="-90 -90 717 782"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="145" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="202.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="165" y="464" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="220.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="278" y="12" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="335.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="279" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="335.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="e"><g class="shape" ><rect x="412" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="468.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-34969052" markerWidth="42.000000" markerHeight="45.000000" refX="4.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white" transform="scale(-1) translate(-42.000000, -45.000000)"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><marker id="mk-3432875809" markerWidth="42.000000" markerHeight="45.000000" refX="37.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><path d="M 68.500000 143.500000 L 68.500000 232.500000" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:3;" marker-start="url(#mk-34969052)" marker-end="url(#mk-3432875809)" mask="url(#2254021698)"/></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="28.000000" markerHeight="30.000000" refX="1.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><marker id="mk-850452983" markerWidth="28.000000" markerHeight="30.000000" refX="26.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><path d="M 202.000000 140.500000 L 202.000000 235.500000" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#2254021698)"/></g><g id="(d &lt;-&gt; f)[0]"><path d="M 202.000000 366.500000 L 202.000000 461.500000" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#2254021698)"/></g><g id="(g &lt;-&gt; h)[0]"><marker id="mk-3322562568" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-2978224791" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 335.500000 142.000000 L 335.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-3322562568)" marker-end="url(#mk-2978224791)" mask="url(#2254021698)"/></g><g id="(e &lt;-&gt; f)[0]"><marker id="mk-1759247020" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-3530341923" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 468.500000 368.000000 L 468.500000 404.000000 S 468.500000 414.000000 458.500000 414.000000 L 249.000000 414.000000 S 239.000000 414.000000 239.000000 424.000000 L 239.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-1759247020)" marker-end="url(#mk-3530341923)" mask="url(#2254021698)"/></g><mask id="2254021698" maskUnits="userSpaceOnUse" x="-100" y="-100" width="717" height="782">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="145" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="202.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="165" y="464" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="220.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="278" y="12" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="335.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="279" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="335.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="e"><g class="shape" ><rect x="412" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="468.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-34969052" markerWidth="42.000000" markerHeight="45.000000" refX="4.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white" transform="scale(-1) translate(-42.000000, -45.000000)"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><marker id="mk-3432875809" markerWidth="42.000000" markerHeight="45.000000" refX="37.500000" refY="22.500000" viewBox="0.000000 0.000000 42.000000 45.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#20222a" stroke-width="3" fill="white"><circle class="connection" stroke="#20222a" stroke-width="3" fill="white" cx="6.000000" cy="22.500000" r="5.000000"/><path d="M39.000000,22.500000 52.000000,22.500000 M12.000000,22.500000 52.000000,0.000000 M12.000000,22.500000 52.000000,45.000000"/></g> </marker><path d="M 68.500000 143.500000 L 68.500000 232.500000" class="connection" style="fill:none;stroke:#20222a;opacity:1.000000;stroke-width:3;" marker-start="url(#mk-34969052)" marker-end="url(#mk-3432875809)" mask="url(#2254021698)"/></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-2383242180" markerWidth="28.000000" markerHeight="30.000000" refX="1.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><marker id="mk-850452983" markerWidth="28.000000" markerHeight="30.000000" refX="26.500000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="orange" stroke-width="1" fill="white"><path class="connection" stroke="orange" stroke-width="1" fill="white" d="M6.000000,0.000000 6.000000,30.000000"/><path d="M25.000000,15.000000 34.000000,15.000000 M8.000000,15.000000 34.000000,0.000000 M8.000000,15.000000 34.000000,30.000000"/></g> </marker><path d="M 202.000000 140.500000 L 202.000000 235.500000" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#2254021698)"/></g><g id="(d &lt;-&gt; f)[0]"><path d="M 202.000000 366.500000 L 202.000000 461.500000" class="connection" style="fill:none;stroke:orange;opacity:1.000000;stroke-width:1;" marker-start="url(#mk-2383242180)" marker-end="url(#mk-850452983)" mask="url(#2254021698)"/></g><g id="(g &lt;-&gt; h)[0]"><marker id="mk-3322562568" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-2978224791" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><circle class="connection" stroke="#0D32B2" stroke-width="2" fill="white" cx="5.000000" cy="15.000000" r="4.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 335.500000 142.000000 L 335.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-3322562568)" marker-end="url(#mk-2978224791)" mask="url(#2254021698)"/></g><g id="(e &lt;-&gt; f)[0]"><marker id="mk-1759247020" markerWidth="28.000000" markerHeight="30.000000" refX="3.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white" transform="scale(-1) translate(-28.000000, -30.000000)"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><marker id="mk-3530341923" markerWidth="28.000000" markerHeight="30.000000" refX="25.000000" refY="15.000000" viewBox="0.000000 0.000000 28.000000 30.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection" stroke="#0D32B2" stroke-width="2" fill="white"><path class="connection" stroke="#0D32B2" stroke-width="2" fill="white" d="M8.000000,0.000000 8.000000,30.000000"/><path d="M25.000000,15.000000 36.000000,15.000000 M14.400000,0.000000 14.400000,30.000000"/></g> </marker><path d="M 468.500000 368.000000 L 468.500000 404.000000 S 468.500000 414.000000 458.500000 414.000000 L 249.000000 414.000000 S 239.000000 414.000000 239.000000 424.000000 L 239.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-1759247020)" marker-end="url(#mk-3530341923)" mask="url(#2254021698)"/></g><mask id="2254021698" maskUnits="userSpaceOnUse" x="-100" y="-100" width="717" height="782">
 <rect x="-100" y="-100" width="717" height="782" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/dense/dagre/sketch.exp.svg b/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
index e8276b325..de442c896 100644
--- a/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1594" height="1686" viewBox="-102 -102 1594 1686"><style type="text/css">
@@ -18,7 +19,27 @@ width="1594" height="1686" viewBox="-102 -102 1594 1686"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="330" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="386.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="457" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="513.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="111" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="167.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="737" y="678" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="794.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="924" y="1130" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="980.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="911" y="678" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="966.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="929" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="986.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="170" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="226.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="519" y="1130" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="573.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="0" y="452" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="55.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="517" y="1356" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="573.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="1171" y="904" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1225.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="1082" y="678" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1140.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="624" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="680.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="383" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="440.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="1277" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1333.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="923" y="1356" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="980.000000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 444.742868 114.701728 C 499.450000 163.474162 513.500000 186.000000 513.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(c -&gt; b)[0]"><path d="M 225.402507 701.354550 C 311.150000 642.896229 333.000000 605.400000 333.000000 571.500000 C 333.000000 537.600000 357.800000 386.400000 453.614157 326.129804" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(d -&gt; e)[0]"><path d="M 793.500000 806.000000 C 793.500000 844.000000 793.500000 876.600000 793.500000 910.500000 C 793.500000 944.400000 819.550000 1095.762517 920.327733 1156.741814" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(f -&gt; e)[0]"><path d="M 966.000000 806.000000 C 966.000000 844.000000 966.000000 876.600000 966.000000 910.500000 C 966.000000 944.400000 967.200000 1090.000000 971.523419 1126.028493" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; f)[0]"><path d="M 571.897924 308.408722 C 796.800000 383.155588 853.500000 424.600000 853.500000 458.500000 C 853.500000 492.400000 864.900000 639.450667 907.677851 682.418642" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; g)[0]"><path d="M 571.945148 302.977358 C 902.800000 382.102434 986.000000 412.000000 986.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(g -&gt; f)[0]"><path d="M 986.000000 580.000000 C 986.000000 618.000000 984.200000 638.000000 977.708612 674.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; h)[0]"><path d="M 455.139049 311.978353 C 272.600000 383.849129 226.500000 412.000000 226.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; i)[0]"><path d="M 532.745457 353.917511 C 544.035398 392.000000 547.000000 424.600000 547.000000 458.500000 C 547.000000 492.400000 547.000000 537.600000 547.000000 571.500000 C 547.000000 605.400000 547.000000 650.600000 547.000000 684.500000 C 547.000000 718.400000 547.000000 763.600000 547.000000 797.500000 C 547.000000 831.400000 547.000000 876.600000 547.000000 910.500000 C 547.000000 944.400000 549.400000 1090.000000 558.066508 1126.110451" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; d)[0]"><path d="M 571.854661 312.550274 C 748.800000 383.960357 793.500000 424.600000 793.500000 458.500000 C 793.500000 492.400000 793.500000 638.000000 793.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(j -&gt; c)[0]"><path d="M 55.000000 580.000000 C 55.000000 618.000000 66.150000 639.224499 107.931006 681.284665" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(j -&gt; a)[0]"><path d="M 85.112606 450.186201 C 102.853982 412.000000 107.500000 379.400000 107.500000 345.500000 C 107.500000 311.600000 152.100000 158.000000 326.790700 87.497027" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; j)[0]"><path d="M 455.058106 303.403346 C 135.400000 382.184951 55.000000 412.000000 55.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(i -&gt; k)[0]"><path d="M 573.500000 1258.000000 C 573.500000 1296.000000 573.500000 1316.000000 573.500000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(d -&gt; l)[0]"><path d="M 853.332238 766.622622 C 1012.700000 836.364162 1076.600000 869.400000 1167.650122 928.814063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(l -&gt; e)[0]"><path d="M 1225.750000 1032.000000 C 1225.750000 1070.000000 1187.950000 1097.400000 1040.383524 1165.327426" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(m -&gt; l)[0]"><path d="M 1151.499007 805.969391 C 1158.230088 844.000000 1165.800000 864.000000 1186.993128 900.539875" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(m -&gt; n)[0]"><path d="M 1079.549247 754.668705 C 728.500000 834.045523 643.850000 864.000000 656.895122 900.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(n -&gt; i)[0]"><path d="M 680.250000 1032.000000 C 680.250000 1070.000000 669.850000 1091.000000 630.998046 1132.093413" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(d -&gt; n)[0]"><path d="M 735.084225 799.286822 C 691.500000 842.774834 680.250000 864.000000 680.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(f -&gt; n)[0]"><path d="M 908.682893 767.355374 C 758.300000 836.503967 716.650000 864.000000 703.604878 900.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; o)[0]"><path d="M 471.431626 353.676548 C 446.504425 392.000000 440.000000 412.000000 440.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(p -&gt; l)[0]"><path d="M 1333.250000 806.000000 C 1333.250000 844.000000 1322.650000 865.142326 1283.007019 906.813552" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(e -&gt; q)[0]"><path d="M 980.250000 1258.000000 C 980.250000 1296.000000 980.250000 1316.000000 980.250000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><mask id="3344151873" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1594" height="1686">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="330" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="386.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="457" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="513.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="111" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="167.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="737" y="678" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="794.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="924" y="1130" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="980.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="911" y="678" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="966.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="929" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="986.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="170" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="226.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="519" y="1130" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="573.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="0" y="452" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="55.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="517" y="1356" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="573.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="1171" y="904" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1225.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="1082" y="678" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1140.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="624" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="680.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="383" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="440.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="1277" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1333.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="923" y="1356" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="980.000000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 444.742868 114.701728 C 499.450000 163.474162 513.500000 186.000000 513.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(c -&gt; b)[0]"><path d="M 225.402507 701.354550 C 311.150000 642.896229 333.000000 605.400000 333.000000 571.500000 C 333.000000 537.600000 357.800000 386.400000 453.614157 326.129804" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(d -&gt; e)[0]"><path d="M 793.500000 806.000000 C 793.500000 844.000000 793.500000 876.600000 793.500000 910.500000 C 793.500000 944.400000 819.550000 1095.762517 920.327733 1156.741814" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(f -&gt; e)[0]"><path d="M 966.000000 806.000000 C 966.000000 844.000000 966.000000 876.600000 966.000000 910.500000 C 966.000000 944.400000 967.200000 1090.000000 971.523419 1126.028493" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; f)[0]"><path d="M 571.897924 308.408722 C 796.800000 383.155588 853.500000 424.600000 853.500000 458.500000 C 853.500000 492.400000 864.900000 639.450667 907.677851 682.418642" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; g)[0]"><path d="M 571.945148 302.977358 C 902.800000 382.102434 986.000000 412.000000 986.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(g -&gt; f)[0]"><path d="M 986.000000 580.000000 C 986.000000 618.000000 984.200000 638.000000 977.708612 674.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; h)[0]"><path d="M 455.139049 311.978353 C 272.600000 383.849129 226.500000 412.000000 226.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; i)[0]"><path d="M 532.745457 353.917511 C 544.035398 392.000000 547.000000 424.600000 547.000000 458.500000 C 547.000000 492.400000 547.000000 537.600000 547.000000 571.500000 C 547.000000 605.400000 547.000000 650.600000 547.000000 684.500000 C 547.000000 718.400000 547.000000 763.600000 547.000000 797.500000 C 547.000000 831.400000 547.000000 876.600000 547.000000 910.500000 C 547.000000 944.400000 549.400000 1090.000000 558.066508 1126.110451" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; d)[0]"><path d="M 571.854661 312.550274 C 748.800000 383.960357 793.500000 424.600000 793.500000 458.500000 C 793.500000 492.400000 793.500000 638.000000 793.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(j -&gt; c)[0]"><path d="M 55.000000 580.000000 C 55.000000 618.000000 66.150000 639.224499 107.931006 681.284665" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(j -&gt; a)[0]"><path d="M 85.112606 450.186201 C 102.853982 412.000000 107.500000 379.400000 107.500000 345.500000 C 107.500000 311.600000 152.100000 158.000000 326.790700 87.497027" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; j)[0]"><path d="M 455.058106 303.403346 C 135.400000 382.184951 55.000000 412.000000 55.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(i -&gt; k)[0]"><path d="M 573.500000 1258.000000 C 573.500000 1296.000000 573.500000 1316.000000 573.500000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(d -&gt; l)[0]"><path d="M 853.332238 766.622622 C 1012.700000 836.364162 1076.600000 869.400000 1167.650122 928.814063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(l -&gt; e)[0]"><path d="M 1225.750000 1032.000000 C 1225.750000 1070.000000 1187.950000 1097.400000 1040.383524 1165.327426" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(m -&gt; l)[0]"><path d="M 1151.499007 805.969391 C 1158.230088 844.000000 1165.800000 864.000000 1186.993128 900.539875" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(m -&gt; n)[0]"><path d="M 1079.549247 754.668705 C 728.500000 834.045523 643.850000 864.000000 656.895122 900.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(n -&gt; i)[0]"><path d="M 680.250000 1032.000000 C 680.250000 1070.000000 669.850000 1091.000000 630.998046 1132.093413" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(d -&gt; n)[0]"><path d="M 735.084225 799.286822 C 691.500000 842.774834 680.250000 864.000000 680.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(f -&gt; n)[0]"><path d="M 908.682893 767.355374 C 758.300000 836.503967 716.650000 864.000000 703.604878 900.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(b -&gt; o)[0]"><path d="M 471.431626 353.676548 C 446.504425 392.000000 440.000000 412.000000 440.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(p -&gt; l)[0]"><path d="M 1333.250000 806.000000 C 1333.250000 844.000000 1322.650000 865.142326 1283.007019 906.813552" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><g id="(e -&gt; q)[0]"><path d="M 980.250000 1258.000000 C 980.250000 1296.000000 980.250000 1316.000000 980.250000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3344151873)"/></g><mask id="3344151873" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1594" height="1686">
 <rect x="-100" y="-100" width="1594" height="1686" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/dense/elk/sketch.exp.svg b/e2etests/testdata/stable/dense/elk/sketch.exp.svg
index 9994f01f9..c3c1f09c1 100644
--- a/e2etests/testdata/stable/dense/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/dense/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1014" height="1992" viewBox="-88 -90 1014 1992"><style type="text/css">
@@ -18,7 +19,27 @@ width="1014" height="1992" viewBox="-88 -90 1014 1992"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="537" y="248" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="593.500000" y="314.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="537" y="474" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="593.500000" y="540.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="404" y="248" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="314.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="443" y="740" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.000000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="406" y="1222" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="462.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="140" y="986" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="195.500000" y="1052.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="157" y="740" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="214.000000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="23" y="740" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="79.500000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="257" y="1448" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="311.500000" y="1514.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="577" y="12" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="632.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="255" y="1674" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="311.500000" y="1740.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="474" y="986" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="528.500000" y="1052.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="291" y="740" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="349.500000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="273" y="1222" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="577" y="740" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="634.000000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="711" y="740" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="767.500000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="406" y="1448" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="463.000000" y="1514.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 593.642857 376.000000 L 593.642857 470.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(c -&gt; b)[0]"><path d="M 460.642857 376.000000 L 460.642857 414.000000 S 460.642857 424.000000 470.642857 424.000000 L 555.392857 424.000000 S 565.392857 424.000000 565.392857 434.000000 L 565.392857 470.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(d -&gt; e)[0]"><path d="M 500.000000 868.000000 L 500.000000 916.000000 S 500.000000 926.000000 490.000000 926.000000 L 473.000000 926.000000 S 463.000000 926.000000 463.000000 936.000000 L 463.000000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(f -&gt; e)[0]"><path d="M 214.000000 1114.000000 L 214.000000 1152.000000 S 214.000000 1162.000000 224.000000 1162.000000 L 424.750000 1162.000000 S 434.750000 1162.000000 434.750000 1172.000000 L 434.750000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; f)[0]"><path d="M 585.571429 602.000000 L 585.571429 660.000000 S 585.571429 670.000000 575.571429 670.000000 L 156.000000 670.000000 S 146.000000 670.000000 146.000000 680.000000 L 146.000000 906.000000 S 146.000000 916.000000 156.000000 916.000000 L 167.000000 916.000000 S 177.000000 916.000000 177.000000 926.000000 L 177.000000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; g)[0]"><path d="M 601.714286 602.000000 L 601.714286 670.000000 S 601.714286 680.000000 591.714286 680.000000 L 224.000000 680.000000 S 214.000000 680.000000 214.000000 690.000000 L 214.000000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(g -&gt; f)[0]"><path d="M 214.000000 868.000000 L 214.000000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; h)[0]"><path d="M 569.428571 602.000000 L 569.428571 650.000000 S 569.428571 660.000000 559.428571 660.000000 L 89.500000 660.000000 S 79.500000 660.000000 79.500000 670.000000 L 79.500000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; i)[0]"><path d="M 553.285714 602.000000 L 553.285714 640.000000 S 553.285714 650.000000 543.285714 650.000000 L 22.000000 650.000000 S 12.000000 650.000000 12.000000 660.000000 L 12.000000 1388.000000 S 12.000000 1398.000000 22.000000 1398.000000 L 283.666667 1398.000000 S 293.666667 1398.000000 293.666667 1408.000000 L 293.666667 1444.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; d)[0]"><path d="M 617.857143 602.000000 L 617.857143 680.000000 S 617.857143 690.000000 607.857143 690.000000 L 510.000000 690.000000 S 500.000000 690.000000 500.000000 700.000000 L 500.000000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(j -&gt; c)[0]"><path d="M 605.142857 140.000000 L 605.142857 178.000000 S 605.142857 188.000000 595.142857 188.000000 L 470.642857 188.000000 S 460.642857 188.000000 460.642857 198.000000 L 460.642857 244.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(j -&gt; a)[0]"><path d="M 632.642857 140.000000 L 632.642857 188.000000 S 632.642857 198.000000 622.642857 198.000000 L 603.642857 198.000000 S 593.642857 198.000000 593.642857 208.000000 L 593.642857 244.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; j)[0]"><path d="M 621.892857 472.000000 L 621.892857 434.000000 S 621.892857 424.000000 631.892857 424.000000 L 650.142857 424.000000 S 660.142857 424.000000 660.142857 414.000000 L 660.142857 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(i -&gt; k)[0]"><path d="M 311.833333 1576.000000 L 311.833333 1670.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(d -&gt; l)[0]"><path d="M 528.500000 868.000000 L 528.500000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(l -&gt; e)[0]"><path d="M 528.500000 1114.000000 L 528.500000 1152.000000 S 528.500000 1162.000000 518.500000 1162.000000 L 501.250000 1162.000000 S 491.250000 1162.000000 491.250000 1172.000000 L 491.250000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(m -&gt; l)[0]"><path d="M 369.000000 868.000000 L 369.000000 926.000000 S 369.000000 936.000000 379.000000 936.000000 L 491.250000 936.000000 S 501.250000 936.000000 501.250000 946.000000 L 501.250000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(m -&gt; n)[0]"><path d="M 330.000000 868.000000 L 330.000000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(n -&gt; i)[0]"><path d="M 330.000000 1350.000000 L 330.000000 1444.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(d -&gt; n)[0]"><path d="M 471.500000 868.000000 L 471.500000 906.250000 C 471.500000 925.750000 452.000000 906.250000 452.000000 925.750000 L 452.000000 1162.000000 S 452.000000 1172.000000 442.000000 1172.000000 L 368.250000 1172.000000 S 358.250000 1172.000000 358.250000 1182.000000 L 358.250000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(f -&gt; n)[0]"><path d="M 177.000000 1114.000000 L 177.000000 1162.000000 S 177.000000 1172.000000 187.000000 1172.000000 L 291.750000 1172.000000 S 301.750000 1172.000000 301.750000 1182.000000 L 301.750000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; o)[0]"><path d="M 634.000000 602.000000 L 634.000000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(p -&gt; l)[0]"><path d="M 767.500000 868.000000 L 767.500000 906.000000 S 767.500000 916.000000 757.500000 916.000000 L 565.750000 916.000000 S 555.750000 916.000000 555.750000 926.000000 L 555.750000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(e -&gt; q)[0]"><path d="M 463.000000 1350.000000 L 463.000000 1444.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><mask id="631616296" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1014" height="1992">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="537" y="248" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="593.500000" y="314.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="537" y="474" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="593.500000" y="540.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="404" y="248" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="314.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="443" y="740" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.000000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="406" y="1222" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="462.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="140" y="986" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="195.500000" y="1052.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="157" y="740" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="214.000000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="23" y="740" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="79.500000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="257" y="1448" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="311.500000" y="1514.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="577" y="12" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="632.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="255" y="1674" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="311.500000" y="1740.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="474" y="986" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="528.500000" y="1052.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="291" y="740" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="349.500000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="273" y="1222" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="577" y="740" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="634.000000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="711" y="740" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="767.500000" y="806.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="406" y="1448" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="463.000000" y="1514.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 593.642857 376.000000 L 593.642857 470.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(c -&gt; b)[0]"><path d="M 460.642857 376.000000 L 460.642857 414.000000 S 460.642857 424.000000 470.642857 424.000000 L 555.392857 424.000000 S 565.392857 424.000000 565.392857 434.000000 L 565.392857 470.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(d -&gt; e)[0]"><path d="M 500.000000 868.000000 L 500.000000 916.000000 S 500.000000 926.000000 490.000000 926.000000 L 473.000000 926.000000 S 463.000000 926.000000 463.000000 936.000000 L 463.000000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(f -&gt; e)[0]"><path d="M 214.000000 1114.000000 L 214.000000 1152.000000 S 214.000000 1162.000000 224.000000 1162.000000 L 424.750000 1162.000000 S 434.750000 1162.000000 434.750000 1172.000000 L 434.750000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; f)[0]"><path d="M 585.571429 602.000000 L 585.571429 660.000000 S 585.571429 670.000000 575.571429 670.000000 L 156.000000 670.000000 S 146.000000 670.000000 146.000000 680.000000 L 146.000000 906.000000 S 146.000000 916.000000 156.000000 916.000000 L 167.000000 916.000000 S 177.000000 916.000000 177.000000 926.000000 L 177.000000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; g)[0]"><path d="M 601.714286 602.000000 L 601.714286 670.000000 S 601.714286 680.000000 591.714286 680.000000 L 224.000000 680.000000 S 214.000000 680.000000 214.000000 690.000000 L 214.000000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(g -&gt; f)[0]"><path d="M 214.000000 868.000000 L 214.000000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; h)[0]"><path d="M 569.428571 602.000000 L 569.428571 650.000000 S 569.428571 660.000000 559.428571 660.000000 L 89.500000 660.000000 S 79.500000 660.000000 79.500000 670.000000 L 79.500000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; i)[0]"><path d="M 553.285714 602.000000 L 553.285714 640.000000 S 553.285714 650.000000 543.285714 650.000000 L 22.000000 650.000000 S 12.000000 650.000000 12.000000 660.000000 L 12.000000 1388.000000 S 12.000000 1398.000000 22.000000 1398.000000 L 283.666667 1398.000000 S 293.666667 1398.000000 293.666667 1408.000000 L 293.666667 1444.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; d)[0]"><path d="M 617.857143 602.000000 L 617.857143 680.000000 S 617.857143 690.000000 607.857143 690.000000 L 510.000000 690.000000 S 500.000000 690.000000 500.000000 700.000000 L 500.000000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(j -&gt; c)[0]"><path d="M 605.142857 140.000000 L 605.142857 178.000000 S 605.142857 188.000000 595.142857 188.000000 L 470.642857 188.000000 S 460.642857 188.000000 460.642857 198.000000 L 460.642857 244.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(j -&gt; a)[0]"><path d="M 632.642857 140.000000 L 632.642857 188.000000 S 632.642857 198.000000 622.642857 198.000000 L 603.642857 198.000000 S 593.642857 198.000000 593.642857 208.000000 L 593.642857 244.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; j)[0]"><path d="M 621.892857 472.000000 L 621.892857 434.000000 S 621.892857 424.000000 631.892857 424.000000 L 650.142857 424.000000 S 660.142857 424.000000 660.142857 414.000000 L 660.142857 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(i -&gt; k)[0]"><path d="M 311.833333 1576.000000 L 311.833333 1670.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(d -&gt; l)[0]"><path d="M 528.500000 868.000000 L 528.500000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(l -&gt; e)[0]"><path d="M 528.500000 1114.000000 L 528.500000 1152.000000 S 528.500000 1162.000000 518.500000 1162.000000 L 501.250000 1162.000000 S 491.250000 1162.000000 491.250000 1172.000000 L 491.250000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(m -&gt; l)[0]"><path d="M 369.000000 868.000000 L 369.000000 926.000000 S 369.000000 936.000000 379.000000 936.000000 L 491.250000 936.000000 S 501.250000 936.000000 501.250000 946.000000 L 501.250000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(m -&gt; n)[0]"><path d="M 330.000000 868.000000 L 330.000000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(n -&gt; i)[0]"><path d="M 330.000000 1350.000000 L 330.000000 1444.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(d -&gt; n)[0]"><path d="M 471.500000 868.000000 L 471.500000 906.250000 C 471.500000 925.750000 452.000000 906.250000 452.000000 925.750000 L 452.000000 1162.000000 S 452.000000 1172.000000 442.000000 1172.000000 L 368.250000 1172.000000 S 358.250000 1172.000000 358.250000 1182.000000 L 358.250000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(f -&gt; n)[0]"><path d="M 177.000000 1114.000000 L 177.000000 1162.000000 S 177.000000 1172.000000 187.000000 1172.000000 L 291.750000 1172.000000 S 301.750000 1172.000000 301.750000 1182.000000 L 301.750000 1218.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(b -&gt; o)[0]"><path d="M 634.000000 602.000000 L 634.000000 736.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(p -&gt; l)[0]"><path d="M 767.500000 868.000000 L 767.500000 906.000000 S 767.500000 916.000000 757.500000 916.000000 L 565.750000 916.000000 S 555.750000 916.000000 555.750000 926.000000 L 555.750000 982.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><g id="(e -&gt; q)[0]"><path d="M 463.000000 1350.000000 L 463.000000 1444.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#631616296)"/></g><mask id="631616296" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1014" height="1992">
 <rect x="-100" y="-100" width="1014" height="1992" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg b/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
index 79f396a5f..31bb25e09 100644
--- a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2546" height="1108" viewBox="-102 -102 2546 1108"><style type="text/css">
@@ -18,7 +19,27 @@ width="2546" height="1108" viewBox="-102 -102 2546 1108"><style type="text/css">
 }
 
 ]]>
-</style><g id="finally"><g class="shape" ><rect x="213" y="0" width="465" height="904" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="445.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="a"><g class="shape" ><rect x="1076" y="50" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1132.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="tree"><g class="shape" ><rect x="862" y="276" width="134" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="929.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="and"><g class="shape" ><rect x="1152" y="276" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1218.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and</text></g><g id="nodes"><g class="shape" ><rect x="1344" y="276" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1417.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nodes</text></g><g id="some"><g class="shape" ><rect x="1547" y="502" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1618.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">some</text></g><g id="more"><g class="shape" ><rect x="1141" y="502" width="141" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1211.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">more</text></g><g id="many"><g class="shape" ><rect x="1342" y="502" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1414.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">many</text></g><g id="then"><g class="shape" ><rect x="1988" y="50" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2057.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">then</text></g><g id="here"><g class="shape" ><rect x="1959" y="276" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2027.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">here</text></g><g id="you"><g class="shape" ><rect x="1961" y="502" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2027.000000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">you</text></g><g id="have"><g class="shape" ><rect x="2204" y="50" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2273.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">have</text></g><g id="hierarchy"><g class="shape" ><rect x="2168" y="276" width="173" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2254.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="another"><g class="shape" ><rect x="0" y="502" width="163" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="81.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">another</text></g><g id="of"><g class="shape" ><rect x="22" y="728" width="120" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="82.000000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">of</text></g><g id="nesting"><g class="shape" ><rect x="1551" y="276" width="158" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1630.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nesting</text></g><g id="trees"><g class="shape" ><rect x="939" y="502" width="142" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1010.000000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">trees</text></g><g id="finally.a"><g class="shape" ><rect x="281" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="337.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="finally.tree"><g class="shape" ><rect x="296" y="502" width="134" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="363.000000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="263" y="50" width="148" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="337.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="277" y="728" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="363.500000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="490" y="502" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="557.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1074.001483 145.344385 C 958.150000 209.674693 928.750000 236.000000 928.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(a -&gt; and)[0]"><path d="M 1181.408140 177.591510 C 1210.639381 216.000000 1218.250000 236.000000 1218.250000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(a -&gt; nodes)[0]"><path d="M 1190.609636 136.098560 C 1371.950000 207.872504 1417.750000 236.000000 1417.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(and -&gt; some)[0]"><path d="M 1218.250000 404.000000 C 1218.250000 442.000000 1284.050000 470.600000 1543.400829 543.911936" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(tree -&gt; more)[0]"><path d="M 922.710974 403.991421 C 919.179204 442.000000 962.850000 469.200000 1137.517913 536.560720" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(tree -&gt; many)[0]"><path d="M 997.407984 385.318521 C 1076.150000 438.440000 1145.450000 469.400000 1338.478888 537.666314" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(then -&gt; here)[0]"><path d="M 2039.547905 177.935144 C 2029.610619 216.000000 2027.000000 236.000000 2027.000000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(here -&gt; you)[0]"><path d="M 2027.000000 404.000000 C 2027.000000 442.000000 2027.000000 462.000000 2027.000000 498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(have -&gt; hierarchy)[0]"><path d="M 2273.250000 178.000000 C 2273.250000 216.000000 2271.650000 236.000000 2265.881962 272.050237" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(then -&gt; hierarchy)[0]"><path d="M 2112.306247 177.512592 C 2145.599558 216.000000 2163.050000 236.000000 2195.607488 272.997146" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(finally -&gt; another)[0]"><path d="M 211.269938 489.003436 C 173.000000 511.200000 203.000000 493.800000 166.460125 514.993128" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(another -&gt; of)[0]"><path d="M 81.500000 630.000000 C 81.500000 668.000000 81.500000 688.000000 81.500000 724.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(nesting -&gt; trees)[0]"><path d="M 1630.250000 404.000000 C 1630.250000 442.000000 1520.450000 472.011935 1085.185175 551.342460" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(finally -&gt; trees)[0]"><path d="M 680.974405 511.318942 C 887.000000 544.600000 731.000000 519.400000 935.051190 552.362115" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(a -&gt; tree)[0]"><path d="M 352.087507 403.948127 C 360.926991 442.000000 363.250000 462.000000 363.250000 498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(inside -&gt; a)[0]"><path d="M 337.000000 178.000000 C 337.000000 216.000000 337.000000 236.000000 337.000000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 363.250000 630.000000 C 363.250000 668.000000 363.250000 688.000000 363.250000 724.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(a -&gt; root)[0]"><path d="M 396.278039 368.837595 C 525.100000 435.184371 557.750000 462.000000 557.750000 498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><mask id="4174525657" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2546" height="1108">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="finally"><g class="shape" ><rect x="213" y="0" width="465" height="904" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="445.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="a"><g class="shape" ><rect x="1076" y="50" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1132.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="tree"><g class="shape" ><rect x="862" y="276" width="134" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="929.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="and"><g class="shape" ><rect x="1152" y="276" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1218.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and</text></g><g id="nodes"><g class="shape" ><rect x="1344" y="276" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1417.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nodes</text></g><g id="some"><g class="shape" ><rect x="1547" y="502" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1618.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">some</text></g><g id="more"><g class="shape" ><rect x="1141" y="502" width="141" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1211.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">more</text></g><g id="many"><g class="shape" ><rect x="1342" y="502" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1414.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">many</text></g><g id="then"><g class="shape" ><rect x="1988" y="50" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2057.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">then</text></g><g id="here"><g class="shape" ><rect x="1959" y="276" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2027.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">here</text></g><g id="you"><g class="shape" ><rect x="1961" y="502" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2027.000000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">you</text></g><g id="have"><g class="shape" ><rect x="2204" y="50" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2273.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">have</text></g><g id="hierarchy"><g class="shape" ><rect x="2168" y="276" width="173" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2254.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="another"><g class="shape" ><rect x="0" y="502" width="163" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="81.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">another</text></g><g id="of"><g class="shape" ><rect x="22" y="728" width="120" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="82.000000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">of</text></g><g id="nesting"><g class="shape" ><rect x="1551" y="276" width="158" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1630.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nesting</text></g><g id="trees"><g class="shape" ><rect x="939" y="502" width="142" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1010.000000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">trees</text></g><g id="finally.a"><g class="shape" ><rect x="281" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="337.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="finally.tree"><g class="shape" ><rect x="296" y="502" width="134" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="363.000000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="263" y="50" width="148" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="337.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="277" y="728" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="363.500000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="490" y="502" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="557.500000" y="568.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1074.001483 145.344385 C 958.150000 209.674693 928.750000 236.000000 928.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(a -&gt; and)[0]"><path d="M 1181.408140 177.591510 C 1210.639381 216.000000 1218.250000 236.000000 1218.250000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(a -&gt; nodes)[0]"><path d="M 1190.609636 136.098560 C 1371.950000 207.872504 1417.750000 236.000000 1417.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(and -&gt; some)[0]"><path d="M 1218.250000 404.000000 C 1218.250000 442.000000 1284.050000 470.600000 1543.400829 543.911936" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(tree -&gt; more)[0]"><path d="M 922.710974 403.991421 C 919.179204 442.000000 962.850000 469.200000 1137.517913 536.560720" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(tree -&gt; many)[0]"><path d="M 997.407984 385.318521 C 1076.150000 438.440000 1145.450000 469.400000 1338.478888 537.666314" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(then -&gt; here)[0]"><path d="M 2039.547905 177.935144 C 2029.610619 216.000000 2027.000000 236.000000 2027.000000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(here -&gt; you)[0]"><path d="M 2027.000000 404.000000 C 2027.000000 442.000000 2027.000000 462.000000 2027.000000 498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(have -&gt; hierarchy)[0]"><path d="M 2273.250000 178.000000 C 2273.250000 216.000000 2271.650000 236.000000 2265.881962 272.050237" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(then -&gt; hierarchy)[0]"><path d="M 2112.306247 177.512592 C 2145.599558 216.000000 2163.050000 236.000000 2195.607488 272.997146" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(finally -&gt; another)[0]"><path d="M 211.269938 489.003436 C 173.000000 511.200000 203.000000 493.800000 166.460125 514.993128" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(another -&gt; of)[0]"><path d="M 81.500000 630.000000 C 81.500000 668.000000 81.500000 688.000000 81.500000 724.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(nesting -&gt; trees)[0]"><path d="M 1630.250000 404.000000 C 1630.250000 442.000000 1520.450000 472.011935 1085.185175 551.342460" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="(finally -&gt; trees)[0]"><path d="M 680.974405 511.318942 C 887.000000 544.600000 731.000000 519.400000 935.051190 552.362115" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(a -&gt; tree)[0]"><path d="M 352.087507 403.948127 C 360.926991 442.000000 363.250000 462.000000 363.250000 498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(inside -&gt; a)[0]"><path d="M 337.000000 178.000000 C 337.000000 216.000000 337.000000 236.000000 337.000000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 363.250000 630.000000 C 363.250000 668.000000 363.250000 688.000000 363.250000 724.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><g id="finally.(a -&gt; root)[0]"><path d="M 396.278039 368.837595 C 525.100000 435.184371 557.750000 462.000000 557.750000 498.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4174525657)"/></g><mask id="4174525657" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2546" height="1108">
 <rect x="-100" y="-100" width="2546" height="1108" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg b/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
index 6c5a8b529..1cecec67c 100644
--- a/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1757" height="1380" viewBox="-90 -90 1757 1380"><style type="text/css">
@@ -18,7 +19,27 @@ width="1757" height="1380" viewBox="-90 -90 1757 1380"><style type="text/css">
 }
 
 ]]>
-</style><g id="finally"><g class="shape" ><rect x="591" y="12" width="458" height="714" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="820.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="a"><g class="shape" ><rect x="76" y="600" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="132.500000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="tree"><g class="shape" ><rect x="37" y="836" width="134" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="104.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="and"><g class="shape" ><rect x="343" y="836" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and</text></g><g id="nodes"><g class="shape" ><rect x="495" y="836" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="568.500000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nodes</text></g><g id="some"><g class="shape" ><rect x="338" y="1062" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">some</text></g><g id="more"><g class="shape" ><rect x="12" y="1062" width="141" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="82.500000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">more</text></g><g id="many"><g class="shape" ><rect x="173" y="1062" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="245.500000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">many</text></g><g id="then"><g class="shape" ><rect x="1247" y="600" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1316.000000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">then</text></g><g id="here"><g class="shape" ><rect x="1225" y="836" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1293.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">here</text></g><g id="you"><g class="shape" ><rect x="1227" y="1062" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1293.000000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">you</text></g><g id="have"><g class="shape" ><rect x="1427" y="600" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1496.000000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">have</text></g><g id="hierarchy"><g class="shape" ><rect x="1381" y="836" width="173" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1467.500000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="another"><g class="shape" ><rect x="662" y="836" width="163" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="743.500000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">another</text></g><g id="of"><g class="shape" ><rect x="684" y="1062" width="120" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="744.000000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">of</text></g><g id="nesting"><g class="shape" ><rect x="1069" y="600" width="158" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1148.000000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nesting</text></g><g id="trees"><g class="shape" ><rect x="1053" y="836" width="142" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1124.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">trees</text></g><g id="finally.a"><g class="shape" ><rect x="715" y="233" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.500000" y="299.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="finally.tree"><g class="shape" ><rect x="685" y="379" width="134" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="752.000000" y="445.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="697" y="87" width="148" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.000000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="666" y="525" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="752.500000" y="591.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="839" y="379" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="906.500000" y="445.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 104.833333 728.000000 L 104.833333 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(a -&gt; and)[0]"><path d="M 133.083333 728.000000 L 133.083333 776.000000 S 133.083333 786.000000 143.083333 786.000000 L 399.500000 786.000000 S 409.500000 786.000000 409.500000 796.000000 L 409.500000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(a -&gt; nodes)[0]"><path d="M 161.333333 728.000000 L 161.333333 766.000000 S 161.333333 776.000000 171.333333 776.000000 L 559.000000 776.000000 S 569.000000 776.000000 569.000000 786.000000 L 569.000000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(and -&gt; some)[0]"><path d="M 409.500000 964.000000 L 409.500000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(tree -&gt; more)[0]"><path d="M 82.500000 964.000000 L 82.500000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(tree -&gt; many)[0]"><path d="M 127.166667 964.000000 L 127.166667 1002.000000 S 127.166667 1012.000000 137.166667 1012.000000 L 235.500000 1012.000000 S 245.500000 1012.000000 245.500000 1022.000000 L 245.500000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(then -&gt; here)[0]"><path d="M 1293.666667 728.000000 L 1293.666667 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(here -&gt; you)[0]"><path d="M 1293.666667 964.000000 L 1293.666667 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(have -&gt; hierarchy)[0]"><path d="M 1497.000000 728.000000 L 1497.000000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(then -&gt; hierarchy)[0]"><path d="M 1339.666667 728.000000 L 1339.666667 766.000000 S 1339.666667 776.000000 1349.666667 776.000000 L 1429.333333 776.000000 S 1439.333333 776.000000 1439.333333 786.000000 L 1439.333333 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(finally -&gt; another)[0]"><path d="M 744.000000 728.000000 L 744.000000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(another -&gt; of)[0]"><path d="M 744.000000 964.000000 L 744.000000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(nesting -&gt; trees)[0]"><path d="M 1148.666667 728.000000 L 1148.666667 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(finally -&gt; trees)[0]"><path d="M 896.833333 728.000000 L 896.833333 766.000000 S 896.833333 776.000000 906.833333 776.000000 L 1091.333333 776.000000 S 1101.333333 776.000000 1101.333333 786.000000 L 1101.333333 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(a -&gt; tree)[0]"><path d="M 752.666667 361.000000 L 752.666667 375.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(inside -&gt; a)[0]"><path d="M 771.500000 215.000000 L 771.500000 229.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 752.666667 507.000000 L 752.666667 521.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(a -&gt; root)[0]"><path d="M 790.333333 361.000000 L 790.333333 359.000000 S 790.333333 369.000000 800.333333 369.000000 L 902.166667 369.000000 S 907.166667 369.000000 907.166667 374.000000 L 907.166667 375.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><mask id="254914882" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1757" height="1380">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="finally"><g class="shape" ><rect x="591" y="12" width="458" height="714" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="820.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="a"><g class="shape" ><rect x="76" y="600" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="132.500000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="tree"><g class="shape" ><rect x="37" y="836" width="134" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="104.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="and"><g class="shape" ><rect x="343" y="836" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and</text></g><g id="nodes"><g class="shape" ><rect x="495" y="836" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="568.500000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nodes</text></g><g id="some"><g class="shape" ><rect x="338" y="1062" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">some</text></g><g id="more"><g class="shape" ><rect x="12" y="1062" width="141" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="82.500000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">more</text></g><g id="many"><g class="shape" ><rect x="173" y="1062" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="245.500000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">many</text></g><g id="then"><g class="shape" ><rect x="1247" y="600" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1316.000000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">then</text></g><g id="here"><g class="shape" ><rect x="1225" y="836" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1293.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">here</text></g><g id="you"><g class="shape" ><rect x="1227" y="1062" width="132" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1293.000000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">you</text></g><g id="have"><g class="shape" ><rect x="1427" y="600" width="138" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1496.000000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">have</text></g><g id="hierarchy"><g class="shape" ><rect x="1381" y="836" width="173" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1467.500000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="another"><g class="shape" ><rect x="662" y="836" width="163" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="743.500000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">another</text></g><g id="of"><g class="shape" ><rect x="684" y="1062" width="120" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="744.000000" y="1128.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">of</text></g><g id="nesting"><g class="shape" ><rect x="1069" y="600" width="158" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1148.000000" y="666.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nesting</text></g><g id="trees"><g class="shape" ><rect x="1053" y="836" width="142" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1124.000000" y="902.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">trees</text></g><g id="finally.a"><g class="shape" ><rect x="715" y="233" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.500000" y="299.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="finally.tree"><g class="shape" ><rect x="685" y="379" width="134" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="752.000000" y="445.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tree</text></g><g id="finally.inside"><g class="shape" ><rect x="697" y="87" width="148" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="771.000000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">inside</text></g><g id="finally.hierarchy"><g class="shape" ><rect x="666" y="525" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="752.500000" y="591.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hierarchy</text></g><g id="finally.root"><g class="shape" ><rect x="839" y="379" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="906.500000" y="445.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="(a -&gt; tree)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 104.833333 728.000000 L 104.833333 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(a -&gt; and)[0]"><path d="M 133.083333 728.000000 L 133.083333 776.000000 S 133.083333 786.000000 143.083333 786.000000 L 399.500000 786.000000 S 409.500000 786.000000 409.500000 796.000000 L 409.500000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(a -&gt; nodes)[0]"><path d="M 161.333333 728.000000 L 161.333333 766.000000 S 161.333333 776.000000 171.333333 776.000000 L 559.000000 776.000000 S 569.000000 776.000000 569.000000 786.000000 L 569.000000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(and -&gt; some)[0]"><path d="M 409.500000 964.000000 L 409.500000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(tree -&gt; more)[0]"><path d="M 82.500000 964.000000 L 82.500000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(tree -&gt; many)[0]"><path d="M 127.166667 964.000000 L 127.166667 1002.000000 S 127.166667 1012.000000 137.166667 1012.000000 L 235.500000 1012.000000 S 245.500000 1012.000000 245.500000 1022.000000 L 245.500000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(then -&gt; here)[0]"><path d="M 1293.666667 728.000000 L 1293.666667 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(here -&gt; you)[0]"><path d="M 1293.666667 964.000000 L 1293.666667 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(have -&gt; hierarchy)[0]"><path d="M 1497.000000 728.000000 L 1497.000000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(then -&gt; hierarchy)[0]"><path d="M 1339.666667 728.000000 L 1339.666667 766.000000 S 1339.666667 776.000000 1349.666667 776.000000 L 1429.333333 776.000000 S 1439.333333 776.000000 1439.333333 786.000000 L 1439.333333 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(finally -&gt; another)[0]"><path d="M 744.000000 728.000000 L 744.000000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(another -&gt; of)[0]"><path d="M 744.000000 964.000000 L 744.000000 1058.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(nesting -&gt; trees)[0]"><path d="M 1148.666667 728.000000 L 1148.666667 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="(finally -&gt; trees)[0]"><path d="M 896.833333 728.000000 L 896.833333 766.000000 S 896.833333 776.000000 906.833333 776.000000 L 1091.333333 776.000000 S 1101.333333 776.000000 1101.333333 786.000000 L 1101.333333 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(a -&gt; tree)[0]"><path d="M 752.666667 361.000000 L 752.666667 375.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(inside -&gt; a)[0]"><path d="M 771.500000 215.000000 L 771.500000 229.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(tree -&gt; hierarchy)[0]"><path d="M 752.666667 507.000000 L 752.666667 521.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><g id="finally.(a -&gt; root)[0]"><path d="M 790.333333 361.000000 L 790.333333 359.000000 S 790.333333 369.000000 800.333333 369.000000 L 902.166667 369.000000 S 907.166667 369.000000 907.166667 374.000000 L 907.166667 375.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#254914882)"/></g><mask id="254914882" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1757" height="1380">
 <rect x="-100" y="-100" width="1757" height="1380" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/direction/dagre/sketch.exp.svg b/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
index 21047d9a2..4c604c7a1 100644
--- a/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1025" height="1660" viewBox="-102 -102 1025 1660"><style type="text/css">
@@ -18,7 +19,27 @@ width="1025" height="1660" viewBox="-102 -102 1025 1660"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="163" y="0" width="494" height="1456" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="410.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="0" y="50" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="708" y="552" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="707" y="778" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.000000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="708" y="1004" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.500000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="b.2"><g class="shape" ><rect x="203" y="276" width="240" height="1130" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="323.000000" y="305.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">2</text></g><g id="b.1"><g class="shape" ><rect x="314" y="50" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="370.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="b.3"><g class="shape" ><rect x="494" y="552" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="550.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">3</text></g><g id="b.4"><g class="shape" ><rect x="493" y="778" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="550.000000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">4</text></g><g id="b.5"><g class="shape" ><rect x="494" y="1004" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="550.500000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">5</text></g><g id="b.2.a"><g class="shape" ><rect x="280" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="336.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b.2.b"><g class="shape" ><rect x="254" y="552" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="b.2.c"><g class="shape" ><rect x="254" y="778" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.500000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b.2.d"><g class="shape" ><rect x="253" y="1004" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.000000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="b.2.e"><g class="shape" ><rect x="254" y="1230" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.500000" y="1296.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 114.803046 140.467545 C 153.000000 158.802083 123.000000 144.402083 159.393908 161.871159" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="(b -&gt; c)[0]"><path d="M 658.918587 583.564822 C 697.600000 594.952438 667.150000 585.988110 703.912826 596.810903" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="(c -&gt; d)[0]"><path d="M 764.250000 680.000000 C 764.250000 718.000000 764.250000 738.000000 764.250000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="(d -&gt; e)[0]"><path d="M 764.250000 906.000000 C 764.250000 944.000000 764.250000 964.000000 764.250000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(1 -&gt; 2)[0]"><path d="M 370.000000 178.000000 C 370.000000 216.000000 370.000000 236.000000 370.000000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(2 -&gt; 3)[0]"><path d="M 444.749442 555.969255 C 483.600000 577.493883 453.150000 560.623471 490.251117 581.178844" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(3 -&gt; 4)[0]"><path d="M 550.250000 680.000000 C 550.250000 718.000000 550.250000 738.000000 550.250000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(4 -&gt; 5)[0]"><path d="M 550.250000 906.000000 C 550.250000 944.000000 550.250000 964.000000 550.250000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(a -&gt; b)[0]"><path d="M 321.375565 453.946211 C 312.367257 492.000000 310.000000 512.000000 310.000000 548.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(b -&gt; c)[0]"><path d="M 310.000000 680.000000 C 310.000000 718.000000 310.000000 738.000000 310.000000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(c -&gt; d)[0]"><path d="M 310.000000 906.000000 C 310.000000 944.000000 310.000000 964.000000 310.000000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(d -&gt; e)[0]"><path d="M 310.000000 1132.000000 C 310.000000 1170.000000 310.000000 1190.000000 310.000000 1226.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><mask id="4203926609" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1025" height="1660">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="163" y="0" width="494" height="1456" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="410.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="0" y="50" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="708" y="552" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="707" y="778" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.000000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="708" y="1004" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.500000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="b.2"><g class="shape" ><rect x="203" y="276" width="240" height="1130" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="323.000000" y="305.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">2</text></g><g id="b.1"><g class="shape" ><rect x="314" y="50" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="370.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="b.3"><g class="shape" ><rect x="494" y="552" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="550.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">3</text></g><g id="b.4"><g class="shape" ><rect x="493" y="778" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="550.000000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">4</text></g><g id="b.5"><g class="shape" ><rect x="494" y="1004" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="550.500000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">5</text></g><g id="b.2.a"><g class="shape" ><rect x="280" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="336.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b.2.b"><g class="shape" ><rect x="254" y="552" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="b.2.c"><g class="shape" ><rect x="254" y="778" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.500000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b.2.d"><g class="shape" ><rect x="253" y="1004" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.000000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="b.2.e"><g class="shape" ><rect x="254" y="1230" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="310.500000" y="1296.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 114.803046 140.467545 C 153.000000 158.802083 123.000000 144.402083 159.393908 161.871159" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="(b -&gt; c)[0]"><path d="M 658.918587 583.564822 C 697.600000 594.952438 667.150000 585.988110 703.912826 596.810903" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="(c -&gt; d)[0]"><path d="M 764.250000 680.000000 C 764.250000 718.000000 764.250000 738.000000 764.250000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="(d -&gt; e)[0]"><path d="M 764.250000 906.000000 C 764.250000 944.000000 764.250000 964.000000 764.250000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(1 -&gt; 2)[0]"><path d="M 370.000000 178.000000 C 370.000000 216.000000 370.000000 236.000000 370.000000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(2 -&gt; 3)[0]"><path d="M 444.749442 555.969255 C 483.600000 577.493883 453.150000 560.623471 490.251117 581.178844" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(3 -&gt; 4)[0]"><path d="M 550.250000 680.000000 C 550.250000 718.000000 550.250000 738.000000 550.250000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.(4 -&gt; 5)[0]"><path d="M 550.250000 906.000000 C 550.250000 944.000000 550.250000 964.000000 550.250000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(a -&gt; b)[0]"><path d="M 321.375565 453.946211 C 312.367257 492.000000 310.000000 512.000000 310.000000 548.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(b -&gt; c)[0]"><path d="M 310.000000 680.000000 C 310.000000 718.000000 310.000000 738.000000 310.000000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(c -&gt; d)[0]"><path d="M 310.000000 906.000000 C 310.000000 944.000000 310.000000 964.000000 310.000000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><g id="b.2.(d -&gt; e)[0]"><path d="M 310.000000 1132.000000 C 310.000000 1170.000000 310.000000 1190.000000 310.000000 1226.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4203926609)"/></g><mask id="4203926609" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1025" height="1660">
 <rect x="-100" y="-100" width="1025" height="1660" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/direction/elk/sketch.exp.svg b/e2etests/testdata/stable/direction/elk/sketch.exp.svg
index 94998893e..ec75f4e73 100644
--- a/e2etests/testdata/stable/direction/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/direction/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="618" height="2702" viewBox="-90 -90 618 2702"><style type="text/css">
@@ -18,7 +19,27 @@ width="618" height="2702" viewBox="-90 -90 618 2702"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="12" y="238" width="414" height="1594" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="271.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="162" y="1932" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1998.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="162" y="2158" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="2224.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="162" y="2384" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="2450.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="b.2"><g class="shape" ><rect x="87" y="459" width="264" height="860" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="488.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">2</text></g><g id="b.1"><g class="shape" ><rect x="163" y="313" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="379.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="b.3"><g class="shape" ><rect x="162" y="1339" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1405.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">3</text></g><g id="b.4"><g class="shape" ><rect x="162" y="1485" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1551.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">4</text></g><g id="b.5"><g class="shape" ><rect x="162" y="1631" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1697.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">5</text></g><g id="b.2.a"><g class="shape" ><rect x="162" y="534" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="600.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b.2.b"><g class="shape" ><rect x="162" y="680" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="746.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="b.2.c"><g class="shape" ><rect x="162" y="826" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="892.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b.2.d"><g class="shape" ><rect x="162" y="972" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1038.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="b.2.e"><g class="shape" ><rect x="162" y="1118" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1184.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 219.000000 140.000000 L 219.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="(b -&gt; c)[0]"><path d="M 219.000000 1834.000000 L 219.000000 1928.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="(c -&gt; d)[0]"><path d="M 219.000000 2060.000000 L 219.000000 2154.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="(d -&gt; e)[0]"><path d="M 219.000000 2286.000000 L 219.000000 2380.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(1 -&gt; 2)[0]"><path d="M 219.000000 441.000000 L 219.000000 455.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(2 -&gt; 3)[0]"><path d="M 219.000000 1321.000000 L 219.000000 1335.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(3 -&gt; 4)[0]"><path d="M 219.000000 1467.000000 L 219.000000 1481.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(4 -&gt; 5)[0]"><path d="M 219.000000 1613.000000 L 219.000000 1627.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(a -&gt; b)[0]"><path d="M 219.000000 662.000000 L 219.000000 676.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(b -&gt; c)[0]"><path d="M 219.000000 808.000000 L 219.000000 822.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(c -&gt; d)[0]"><path d="M 219.000000 954.000000 L 219.000000 968.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(d -&gt; e)[0]"><path d="M 219.000000 1100.000000 L 219.000000 1114.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><mask id="748900619" maskUnits="userSpaceOnUse" x="-100" y="-100" width="618" height="2702">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="238" width="414" height="1594" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="271.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="162" y="1932" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1998.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="162" y="2158" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="2224.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="162" y="2384" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="2450.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="b.2"><g class="shape" ><rect x="87" y="459" width="264" height="860" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="488.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">2</text></g><g id="b.1"><g class="shape" ><rect x="163" y="313" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="379.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="b.3"><g class="shape" ><rect x="162" y="1339" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1405.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">3</text></g><g id="b.4"><g class="shape" ><rect x="162" y="1485" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1551.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">4</text></g><g id="b.5"><g class="shape" ><rect x="162" y="1631" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1697.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">5</text></g><g id="b.2.a"><g class="shape" ><rect x="162" y="534" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="600.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b.2.b"><g class="shape" ><rect x="162" y="680" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="746.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="b.2.c"><g class="shape" ><rect x="162" y="826" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="892.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b.2.d"><g class="shape" ><rect x="162" y="972" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1038.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="b.2.e"><g class="shape" ><rect x="162" y="1118" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="1184.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 219.000000 140.000000 L 219.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="(b -&gt; c)[0]"><path d="M 219.000000 1834.000000 L 219.000000 1928.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="(c -&gt; d)[0]"><path d="M 219.000000 2060.000000 L 219.000000 2154.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="(d -&gt; e)[0]"><path d="M 219.000000 2286.000000 L 219.000000 2380.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(1 -&gt; 2)[0]"><path d="M 219.000000 441.000000 L 219.000000 455.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(2 -&gt; 3)[0]"><path d="M 219.000000 1321.000000 L 219.000000 1335.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(3 -&gt; 4)[0]"><path d="M 219.000000 1467.000000 L 219.000000 1481.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.(4 -&gt; 5)[0]"><path d="M 219.000000 1613.000000 L 219.000000 1627.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(a -&gt; b)[0]"><path d="M 219.000000 662.000000 L 219.000000 676.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(b -&gt; c)[0]"><path d="M 219.000000 808.000000 L 219.000000 822.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(c -&gt; d)[0]"><path d="M 219.000000 954.000000 L 219.000000 968.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><g id="b.2.(d -&gt; e)[0]"><path d="M 219.000000 1100.000000 L 219.000000 1114.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#748900619)"/></g><mask id="748900619" maskUnits="userSpaceOnUse" x="-100" y="-100" width="618" height="2702">
 <rect x="-100" y="-100" width="618" height="2702" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
index 3f729b56f..d7d0639b0 100644
--- a/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="349" height="556" viewBox="-102 -102 349 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="349" height="556" viewBox="-102 -102 349 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="alpha"><g class="shape" ><rect x="0" y="0" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="5" y="226" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 72.500000 128.000000 C 72.500000 166.000000 72.500000 186.000000 72.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1328439792)"/><text class="text-italic" x="73.000000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="1328439792" maskUnits="userSpaceOnUse" x="-100" y="-100" width="349" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="72.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="5" y="226" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 72.500000 128.000000 C 72.500000 166.000000 72.500000 186.000000 72.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1328439792)"/><text class="text-italic" x="73.000000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="1328439792" maskUnits="userSpaceOnUse" x="-100" y="-100" width="349" height="556">
 <rect x="-100" y="-100" width="349" height="556" fill="white"></rect>
 <rect x="47.000000" y="166.000000" width="52" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg b/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
index b730b6cc3..ea1e0e246 100644
--- a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="349" height="677" viewBox="-90 -90 349 677"><style type="text/css">
@@ -18,7 +19,27 @@ width="349" height="677" viewBox="-90 -90 349 677"><style type="text/css">
 }
 
 ]]>
-</style><g id="alpha"><g class="shape" ><rect x="12" y="12" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="84.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="16" y="359" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="84.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 84.500000 140.000000 L 84.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1137835220)"/><text class="text-italic" x="85.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="1137835220" maskUnits="userSpaceOnUse" x="-100" y="-100" width="349" height="677">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="145" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="84.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#4A6FF3">alpha</text></g><g id="beta"><g class="shape" ><rect x="16" y="359" width="136" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="84.000000" y="425.000000" style="text-anchor:middle;font-size:16px;fill:red">beta</text></g><g id="(alpha -&gt; beta)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 84.500000 140.000000 L 84.500000 355.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1137835220)"/><text class="text-italic" x="85.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:green">gamma</text></g><mask id="1137835220" maskUnits="userSpaceOnUse" x="-100" y="-100" width="349" height="677">
 <rect x="-100" y="-100" width="349" height="677" fill="white"></rect>
 <rect x="59.000000" y="238.000000" width="52" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
index 90f13d628..42c209eb6 100644
--- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2364" height="637" viewBox="-102 -102 2364 637"><style type="text/css">
@@ -18,7 +19,27 @@ width="2364" height="637" viewBox="-102 -102 2364 637"><style type="text/css">
 }
 
 ]]>
-</style><g id="size XS"><g class="shape" ><rect x="1293" y="279" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1365.500000" y="342.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="4" y="12" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="74.000000" y="76.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="0" y="277" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.500000" y="343.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="204" y="8" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="280.500000" y="78.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="417" y="5" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="505.500000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="654" y="3" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="756.000000" y="81.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="918" y="0" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1036.500000" y="82.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1297" y="15" width="137" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1365.500000" y="73.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1494" y="13" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1574.000000" y="75.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1714" y="9" width="186" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1807.000000" y="77.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1960" y="7" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2060.000000" y="78.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="840" y="247" width="393" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1036.500000" y="361.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1365.000000 133.000000 C 1365.000000 183.400000 1365.000000 213.100000 1365.000000 275.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1581753402)"/><text class="text-italic" x="1365.000000" y="209.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 73.500000 137.500000 C 73.500000 184.300000 73.500000 212.700000 73.500000 273.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1581753402)"/><text class="text-italic" x="74.000000" y="212.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 1036.000000 148.000000 C 1036.000000 186.400000 1036.000000 206.700000 1036.000000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1581753402)"/><rect x="937.000000" y="166.000000" width="199" height="61" style="fill:lavender" /><text class="text-italic" x="1036.500000" y="214.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><mask id="1581753402" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2364" height="637">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="1293" y="279" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1365.500000" y="342.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="4" y="12" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="74.000000" y="76.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="0" y="277" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="73.500000" y="343.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="204" y="8" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="280.500000" y="78.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="417" y="5" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="505.500000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="654" y="3" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="756.000000" y="81.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="918" y="0" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1036.500000" y="82.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1297" y="15" width="137" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1365.500000" y="73.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1494" y="13" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1574.000000" y="75.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1714" y="9" width="186" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1807.000000" y="77.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1960" y="7" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2060.000000" y="78.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="840" y="247" width="393" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1036.500000" y="361.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1365.000000 133.000000 C 1365.000000 183.400000 1365.000000 213.100000 1365.000000 275.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1581753402)"/><text class="text-italic" x="1365.000000" y="209.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 73.500000 137.500000 C 73.500000 184.300000 73.500000 212.700000 73.500000 273.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1581753402)"/><text class="text-italic" x="74.000000" y="212.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 1036.000000 148.000000 C 1036.000000 186.400000 1036.000000 206.700000 1036.000000 243.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1581753402)"/><rect x="937.000000" y="166.000000" width="199" height="61" style="fill:lavender" /><text class="text-italic" x="1036.500000" y="214.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><mask id="1581753402" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2364" height="637">
 <rect x="-100" y="-100" width="2364" height="637" fill="white"></rect>
 <rect x="1344.000000" y="199.000000" width="42" height="13" fill="black"></rect>
 <rect x="42.000000" y="197.000000" width="64" height="19" fill="black"></rect>
diff --git a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
index e3c27605a..2d5f2fe91 100644
--- a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2043" height="797" viewBox="-90 -90 2043 797"><style type="text/css">
@@ -18,7 +19,27 @@ width="2043" height="797" viewBox="-90 -90 2043 797"><style type="text/css">
 }
 
 ]]>
-</style><g id="size XS"><g class="shape" ><rect x="1104" y="419" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1176.500000" y="482.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="15" y="35" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.000000" y="99.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="12" y="419" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="175" y="19" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="89.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="348" y="17" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="436.500000" y="91.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="545" y="14" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="647.000000" y="92.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="769" y="12" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="887.500000" y="94.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1108" y="42" width="137" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1176.500000" y="100.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1265" y="24" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1345.000000" y="86.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1445" y="21" width="186" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1538.000000" y="89.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1651" y="19" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1751.000000" y="90.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="691" y="419" width="393" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="887.500000" y="533.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1177.000000 160.000000 L 1177.000000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4072421853)"/><text class="text-italic" x="1177.000000" y="292.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 85.500000 160.000000 L 85.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4072421853)"/><text class="text-italic" x="86.000000" y="294.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 888.000000 160.000000 L 888.000000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4072421853)"/><rect x="789.000000" y="258.000000" width="199" height="61" style="fill:lavender" /><text class="text-italic" x="888.500000" y="306.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><mask id="4072421853" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2043" height="797">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="1104" y="419" width="145" height="122" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1176.500000" y="482.000000" style="text-anchor:middle;font-size:13px;fill:#0A0F25">size XS</text></g><g id="size S"><g class="shape" ><rect x="15" y="35" width="140" height="123" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.000000" y="99.000000" style="text-anchor:middle;font-size:14px;fill:#0A0F25">size S</text></g><g id="size M"><g class="shape" ><rect x="12" y="419" width="147" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">size M</text></g><g id="size L"><g class="shape" ><rect x="175" y="19" width="153" height="131" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="251.500000" y="89.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">size L</text></g><g id="size XL"><g class="shape" ><rect x="348" y="17" width="177" height="136" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="436.500000" y="91.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">size XL</text></g><g id="size XXL"><g class="shape" ><rect x="545" y="14" width="204" height="141" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="647.000000" y="92.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">size XXL</text></g><g id="size XXXL"><g class="shape" ><rect x="769" y="12" width="237" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="887.500000" y="94.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">size XXXL</text></g><g id="custom 8"><g class="shape" ><rect x="1108" y="42" width="137" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1176.500000" y="100.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">custom 8</text></g><g id="custom 12"><g class="shape" ><rect x="1265" y="24" width="160" height="121" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1345.000000" y="86.000000" style="text-anchor:middle;font-size:12px;fill:#0A0F25">custom 12</text></g><g id="custom 18"><g class="shape" ><rect x="1445" y="21" width="186" height="128" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1538.000000" y="89.000000" style="text-anchor:middle;font-size:18px;fill:#0A0F25">custom 18</text></g><g id="custom 21"><g class="shape" ><rect x="1651" y="19" width="200" height="132" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1751.000000" y="90.000000" style="text-anchor:middle;font-size:21px;fill:#0A0F25">custom 21</text></g><g id="custom 64"><g class="shape" ><rect x="691" y="419" width="393" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="887.500000" y="533.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">custom 64</text></g><g id="(custom 8 -&gt; size XS)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1177.000000 160.000000 L 1177.000000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4072421853)"/><text class="text-italic" x="1177.000000" y="292.000000" style="text-anchor:middle;font-size:10px;fill:#676C7E">custom 10</text></g><g id="(size S -&gt; size M)[0]"><path d="M 85.500000 160.000000 L 85.500000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4072421853)"/><text class="text-italic" x="86.000000" y="294.000000" style="text-anchor:middle;font-size:15px;fill:#676C7E">custom 15</text></g><g id="(size XXXL -&gt; custom 64)[0]"><path d="M 888.000000 160.000000 L 888.000000 415.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4072421853)"/><rect x="789.000000" y="258.000000" width="199" height="61" style="fill:lavender" /><text class="text-italic" x="888.500000" y="306.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">custom 48</text></g><mask id="4072421853" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2043" height="797">
 <rect x="-100" y="-100" width="2043" height="797" fill="white"></rect>
 <rect x="1156.000000" y="282.000000" width="42" height="13" fill="black"></rect>
 <rect x="54.000000" y="279.000000" width="64" height="19" fill="black"></rect>
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 4029b4315..0072c98ec 100644
--- a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="3255" height="5504" viewBox="-102 -102 3255 5504"><style type="text/css">
@@ -18,7 +19,27 @@ width="3255" height="5504" viewBox="-102 -102 3255 5504"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 73eedfa59..782ee18ed 100644
--- a/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="3255" height="5504" viewBox="-90 -90 3255 5504"><style type="text/css">
@@ -18,7 +19,27 @@ width="3255" height="5504" viewBox="-90 -90 3255 5504"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg b/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
index 921f72bb1..ff94ee68a 100644
--- a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="942" height="790" viewBox="-102 -102 942 790"><style type="text/css">
@@ -18,7 +19,27 @@ width="942" height="790" viewBox="-102 -102 942 790"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/hr/elk/sketch.exp.svg b/e2etests/testdata/stable/hr/elk/sketch.exp.svg
index 9017f5932..1b8a44184 100644
--- a/e2etests/testdata/stable/hr/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="942" height="790" viewBox="-90 -90 942 790"><style type="text/css">
@@ -18,7 +19,27 @@ width="942" height="790" viewBox="-90 -90 942 790"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg b/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
index 0fcb0e51d..ad9e7fda5 100644
--- a/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="344" height="356" viewBox="-102 -102 344 356"><style type="text/css">
@@ -18,7 +19,27 @@ width="344" height="356" viewBox="-102 -102 344 356"><style type="text/css">
 }
 
 ]]>
-</style><g id="ww"><g class="shape" ><rect x="0" y="0" width="140" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="38.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="70.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="1946192600" maskUnits="userSpaceOnUse" x="-100" y="-100" width="344" height="356">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="140" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="38.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="70.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="1946192600" maskUnits="userSpaceOnUse" x="-100" y="-100" width="344" height="356">
 <rect x="-100" y="-100" width="344" height="356" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg b/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
index cad014b6b..6ba84f366 100644
--- a/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="344" height="356" viewBox="-90 -90 344 356"><style type="text/css">
@@ -18,7 +19,27 @@ width="344" height="356" viewBox="-90 -90 344 356"><style type="text/css">
 }
 
 ]]>
-</style><g id="ww"><g class="shape" ><rect x="12" y="12" width="140" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="50.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="82.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="4116288208" maskUnits="userSpaceOnUse" x="-100" y="-100" width="344" height="356">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="140" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="50.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="82.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="4116288208" maskUnits="userSpaceOnUse" x="-100" y="-100" width="344" height="356">
 <rect x="-100" y="-100" width="344" height="356" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/images/dagre/sketch.exp.svg b/e2etests/testdata/stable/images/dagre/sketch.exp.svg
index 185896c11..d66835731 100644
--- a/e2etests/testdata/stable/images/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/images/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="332" height="615" viewBox="-102 -102 332 615"><style type="text/css">
@@ -18,7 +19,27 @@ width="332" height="615" viewBox="-102 -102 332 615"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="149.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="254" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="403.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 64.000000 156.000000 C 64.000000 194.000000 64.000000 214.000000 64.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#537491880)"/></g><mask id="537491880" maskUnits="userSpaceOnUse" x="-100" y="-100" width="332" height="615">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="149.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="254" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="403.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 64.000000 156.000000 C 64.000000 194.000000 64.000000 214.000000 64.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#537491880)"/></g><mask id="537491880" maskUnits="userSpaceOnUse" x="-100" y="-100" width="332" height="615">
 <rect x="-100" y="-100" width="332" height="615" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/images/elk/sketch.exp.svg b/e2etests/testdata/stable/images/elk/sketch.exp.svg
index 2a099c66c..b11b02081 100644
--- a/e2etests/testdata/stable/images/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/images/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="332" height="615" viewBox="-90 -90 332 615"><style type="text/css">
@@ -18,7 +19,27 @@ width="332" height="615" viewBox="-90 -90 332 615"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="266" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="415.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 76.000000 168.000000 L 76.000000 262.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2374789466)"/></g><mask id="2374789466" maskUnits="userSpaceOnUse" x="-100" y="-100" width="332" height="615">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="266" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="415.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 76.000000 168.000000 L 76.000000 262.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2374789466)"/></g><mask id="2374789466" maskUnits="userSpaceOnUse" x="-100" y="-100" width="332" height="615">
 <rect x="-100" y="-100" width="332" height="615" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg b/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
index dd1f28fd8..7e51297af 100644
--- a/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1015" height="4482" viewBox="-102 -102 1015 4482"><style type="text/css">
@@ -18,7 +19,27 @@ width="1015" height="4482" viewBox="-102 -102 1015 4482"><style type="text/css">
 }
 
 ]]>
-</style><g id="aa"><g class="shape" ><path d="M 151 0 L 238 0 L 273 63 L 238 126 L 151 126 L 186 63 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="212.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="bb"><g class="shape" ><path d="M 466 226 L 554 226 L 589 289 L 554 352 L 466 352 L 501 289 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="527.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bb</text></g><g id="cc"><g class="shape" ><path d="M 410 452 L 496 452 L 531 515 L 496 578 L 410 578 L 445 515 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="470.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="dd"><g class="shape" ><rect x="5" y="678" width="577" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="293.500000" y="711.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">dd</text></g><g id="ll"><g class="shape" ><rect x="0" y="2691" width="545" height="457" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="272.500000" y="2724.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ll</text></g><g id="ff"><g class="shape" ><rect x="0" y="2134" width="567" height="457" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="283.500000" y="2167.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ff</text></g><g id="ww"><g class="shape" ><path d="M 577 1882 H 660 C 684 1882 684 1950.4 684 1958 C 684 1965.6 684 2034 660 2034 H 577 C 553 2034 553 1965.6 553 1958 C 553 1950.4 553 1882 577 1882 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 660 1882 C 636 1882 636 1950.4 636 1958 C 636 1965.6 636 2034 660 2034" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="591.500000" y="1943.000000" width="30" height="30" /><text class="text-bold" x="606.500000" y="1903.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ww</text></g><g id="yy"><g class="shape" ><rect x="465" y="3248" width="323" height="478" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="626.500000" y="3281.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">yy</text></g><g id="ad"><g class="shape" ><path d="M 627 4152 L 724 4152 L 698 4278 L 601 4278 L 601 4278 Z" style="fill:red;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="662.500000" y="4218.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ad</text></g><g id="nn"><g class="shape" ><path d="M 4 3850 C 4 3826 350.05 3826 388.5 3826 C 426.95 3826 773 3826 773 3850 V 4028 C 773 4052 426.95 4052 388.5 4052 C 350.05 4052 4 4052 4 4028 V 3850 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 4 3850 C 4 3874 350.05 3874 388.5 3874 C 426.95 3874 773 3874 773 3850" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="388.500000" y="3907.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">nn</text></g><g id="ii"><g class="shape" ><rect x="59" y="1004" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="116.000000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ii</text></g><g id="jj"><g class="shape" ><rect x="58" y="1280" width="115" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="1346.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">jj</text></g><g id="kk"><g class="shape" ><rect x="55" y="1606" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="116.000000" y="1672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">kk</text></g><g id="ss"><g class="shape" ><rect x="590" y="1230" width="218" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="699.000000" y="1263.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ss</text></g><g id="uu"><g class="shape" ><rect x="588" y="1556" width="223" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="699.500000" y="1589.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">uu</text></g><g id="rm"><g class="shape" ><rect x="616" y="2970" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="678.000000" y="3036.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rm</text></g><g id="dd.ee"><g class="shape" ><path d="M 116 854 C 115.5247 854 115.2078 853.8362 114.8909 853.5085 L 55.4753 792.2289 C 54.8415 791.5735 54.8415 790.5904 55.4753 789.935 L 114.8909 728.4915 C 115.5247 727.8361 116.4753 727.8361 117.1091 728.4915 L 176.5247 789.9349 C 177.1585 790.5903 177.1585 791.5734 176.5247 792.2288 L 117.1091 853.5085 C 116.7922 853.8362 116.4753 854 116 854 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="ll.mm"><g class="shape" ><ellipse class="shape" cx="115.500000" cy="3032.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="3035.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse class="shape" cx="115.500000" cy="2475.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="2478.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.gg"><g class="shape" ><path d="M 433.5 2310 C 433.0208 2310 432.7013 2309.8362 432.3818 2309.5085 L 372.4792 2248.2289 C 371.8402 2247.5735 371.8402 2246.5904 372.4792 2245.935 L 432.3818 2184.4915 C 433.0208 2183.8361 433.9792 2183.8361 434.6182 2184.4915 L 494.5208 2245.9349 C 495.1598 2246.5903 495.1598 2247.5734 494.5208 2248.2288 L 434.6182 2309.5085 C 434.2987 2309.8362 433.9792 2310 433.5 2310 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="433.500000" y="2250.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 470.5 854 C 470.0208 854 469.7013 853.8362 469.3818 853.5085 L 409.4792 792.2289 C 408.8402 791.5735 408.8402 790.5904 409.4792 789.935 L 469.3818 728.4915 C 470.0208 727.8361 470.9792 727.8361 471.6182 728.4915 L 531.5208 789.9349 C 532.1598 790.5903 532.1598 791.5734 531.5208 792.2288 L 471.6182 853.5085 C 471.2987 853.8362 470.9792 854 470.5 854 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="470.500000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hh</text></g><g id="yy.zz"><g class="shape" ><path d="M 626 3298 H 698 C 722 3298 722 3366.4 722 3374 C 722 3381.6 722 3450 698 3450 H 626 C 602 3450 602 3381.6 602 3374 C 602 3366.4 602 3298 626 3298 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 698 3298 C 674 3298 674 3366.4 674 3374 C 674 3381.6 674 3450 698 3450" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="638.000000" y="3362.000000" width="24" height="24" /><text class="text-bold" x="650.000000" y="3319.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">zz</text></g><g id="nn.oo"><g class="shape" ><rect x="54" y="3876" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="3942.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="372" y="2413" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="433.500000" y="2479.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="372" y="2741" width="124" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="434.000000" y="2807.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="375" y="2970" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="434.000000" y="3036.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="640" y="1280" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="699.000000" y="1346.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="638" y="1606" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="699.500000" y="1672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="338" y="3876" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.000000" y="3942.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">xx</text></g><g id="yy.ab"><g class="shape" ><rect x="601" y="3550" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="662.500000" y="3616.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="601" y="3876" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="662.000000" y="3942.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ac</text></g><g id="(aa -- bb)[0]"><path d="M 264.882273 81.676053 C 474.600000 157.000000 527.600000 186.000000 527.980001 224.000100" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3088086061)"/></g><g id="(bb -- cc)[0]"><path d="M 494.105573 353.788854 C 475.000000 392.000000 470.000000 412.000000 470.000000 450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3088086061)"/></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 156.704703 127.523879 C 124.000000 166.000000 115.500000 198.600000 115.500000 232.500000 C 115.500000 266.400000 115.500000 311.600000 115.500000 345.500000 C 115.500000 379.400000 115.500000 424.600000 115.500000 458.500000 C 115.500000 492.400000 115.500000 537.600000 115.500000 571.500000 C 115.500000 605.400000 115.600000 688.000000 115.960002 724.000200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="115.500000" y="426.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 565.280369 334.536443 C 610.000000 388.200000 621.500000 424.600000 621.500000 458.500000 C 621.500000 492.400000 621.500000 537.600000 621.500000 571.500000 C 621.500000 605.400000 621.500000 638.000000 621.500000 653.000000 C 621.500000 668.000000 621.500000 700.600000 621.500000 734.500000 C 621.500000 768.400000 621.500000 813.600000 621.500000 847.500000 C 621.500000 881.400000 572.950000 914.000000 500.125000 929.000000 C 427.300000 944.000000 378.750000 976.600000 378.750000 1010.500000 C 378.750000 1044.400000 378.750000 1089.600000 378.750000 1123.500000 C 378.750000 1157.400000 378.750000 1190.000000 378.750000 1205.000000 C 378.750000 1220.000000 378.750000 1252.600000 378.750000 1286.500000 C 378.750000 1320.400000 378.750000 1365.600000 378.750000 1399.500000 C 378.750000 1433.400000 378.750000 1466.000000 378.750000 1481.000000 C 378.750000 1496.000000 378.750000 1516.000000 378.750000 1531.000000 C 378.750000 1546.000000 378.750000 1578.600000 378.750000 1612.500000 C 378.750000 1646.400000 378.750000 1691.600000 378.750000 1725.500000 C 378.750000 1759.400000 378.750000 1792.000000 378.750000 1807.000000 C 378.750000 1822.000000 378.750000 1857.200000 378.750000 1895.000000 C 378.750000 1932.800000 378.750000 1983.200000 378.750000 2021.000000 C 378.750000 2058.800000 385.400000 2148.200000 410.303572 2201.377552" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="378.500000" y="1183.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 470.000000 580.000000 C 470.000000 618.000000 470.000000 688.000000 470.000000 724.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="470.500000" y="659.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 115.980001 855.999900 C 115.600000 894.000000 115.500000 964.000000 115.500000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ii -- jj)[0]"><path d="M 115.500000 1132.000000 C 115.500000 1170.000000 115.500000 1240.000000 115.500000 1278.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3088086061)"/></g><g id="(jj -&gt; kk)[0]"><path d="M 115.500000 1408.000000 C 115.500000 1446.000000 115.500000 1466.000000 115.500000 1481.000000 C 115.500000 1496.000000 115.500000 1566.000000 115.500000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 115.500000 1734.000000 C 115.500000 1772.000000 115.500000 1792.000000 115.500000 1807.000000 C 115.500000 1822.000000 115.500000 1857.200000 115.500000 1895.000000 C 115.500000 1932.800000 115.500000 1983.200000 115.500000 2021.000000 C 115.500000 2058.800000 115.500000 2094.000000 115.500000 2109.000000 C 115.500000 2124.000000 115.500000 2156.600000 115.500000 2190.500000 C 115.500000 2224.400000 115.600000 2370.000000 115.960002 2406.000200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="116.000000" y="2077.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 115.980001 2542.999900 C 115.600000 2581.000000 115.500000 2601.000000 115.500000 2616.000000 C 115.500000 2631.000000 115.500000 2651.000000 115.500000 2666.000000 C 115.500000 2681.000000 115.500000 2713.600000 115.500000 2747.500000 C 115.500000 2781.400000 115.600000 2927.000000 115.960002 2963.000200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="116.000000" y="2759.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 115.980001 3099.999900 C 115.600000 3138.000000 115.500000 3158.000000 115.500000 3173.000000 C 115.500000 3188.000000 115.500000 3208.000000 115.500000 3223.000000 C 115.500000 3238.000000 115.500000 3273.200000 115.500000 3311.000000 C 115.500000 3348.800000 115.500000 3399.200000 115.500000 3437.000000 C 115.500000 3474.800000 115.500000 3522.600000 115.500000 3556.500000 C 115.500000 3590.400000 115.500000 3635.600000 115.500000 3669.500000 C 115.500000 3703.400000 115.500000 3736.000000 115.500000 3751.000000 C 115.500000 3766.000000 115.500000 3836.000000 115.500000 3872.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="116.000000" y="3492.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 433.990000 2311.999975 C 433.800000 2350.000000 433.750000 2370.500000 433.750000 2408.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 433.750000 2541.500000 C 433.750000 2580.700000 433.750000 2601.000000 433.750000 2616.000000 C 433.750000 2631.000000 433.750000 2701.000000 433.750000 2737.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 433.750000 2869.000000 C 433.750000 2907.000000 433.750000 2927.500000 433.750000 2965.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 470.000000 856.000000 C 470.000000 894.000000 515.850000 914.000000 584.625000 929.000000 C 653.400000 944.000000 699.250000 976.600000 699.250000 1010.500000 C 699.250000 1044.400000 699.250000 1089.600000 699.250000 1123.500000 C 699.250000 1157.400000 699.250000 1240.000000 699.250000 1276.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 699.250000 1408.000000 C 699.250000 1446.000000 699.250000 1466.000000 699.250000 1481.000000 C 699.250000 1496.000000 699.250000 1566.000000 699.250000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(kk -&gt; ww)[0]"><path d="M 179.397803 1689.845221 C 400.700000 1763.442815 476.600000 1847.600000 553.840053 1907.547504" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 699.250000 1734.000000 C 699.250000 1772.000000 692.600000 1842.400000 668.154835 1880.630032" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ww -&gt; rm)[0]"><path d="M 654.858114 2035.806555 C 673.000000 2074.000000 677.750000 2094.000000 677.750000 2109.000000 C 677.750000 2124.000000 677.750000 2156.600000 677.750000 2190.500000 C 677.750000 2224.400000 677.750000 2269.600000 677.750000 2303.500000 C 677.750000 2337.400000 677.750000 2383.100000 677.750000 2417.750000 C 677.750000 2452.400000 677.750000 2498.600000 677.750000 2533.250000 C 677.750000 2567.900000 677.750000 2601.000000 677.750000 2616.000000 C 677.750000 2631.000000 677.750000 2651.000000 677.750000 2666.000000 C 677.750000 2681.000000 677.750000 2713.600000 677.750000 2747.500000 C 677.750000 2781.400000 677.750000 2927.500000 677.750000 2965.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 646.318357 3098.292950 C 626.840909 3137.700000 577.200000 3158.000000 510.375000 3173.000000 C 443.550000 3188.000000 399.000000 3208.000000 399.000000 3223.000000 C 399.000000 3238.000000 399.000000 3273.200000 399.000000 3311.000000 C 399.000000 3348.800000 399.000000 3399.200000 399.000000 3437.000000 C 399.000000 3474.800000 399.000000 3522.600000 399.000000 3556.500000 C 399.000000 3590.400000 399.000000 3635.600000 399.000000 3669.500000 C 399.000000 3703.400000 399.000000 3736.000000 399.000000 3751.000000 C 399.000000 3766.000000 399.000000 3836.000000 399.000000 3872.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 433.750000 3098.500000 C 433.750000 3137.700000 459.200000 3158.000000 497.375000 3173.000000 C 535.550000 3188.000000 571.000000 3260.600000 608.513369 3307.866844" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 697.571423 3098.409708 C 709.795455 3137.700000 713.000000 3158.000000 713.000000 3173.000000 C 713.000000 3188.000000 709.000000 3258.000000 694.485563 3294.286093" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 662.000000 3452.000000 C 662.000000 3490.000000 662.000000 3510.000000 662.000000 3546.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 662.000000 3678.000000 C 662.000000 3716.000000 662.000000 3736.000000 662.000000 3751.000000 C 662.000000 3766.000000 662.000000 3836.000000 662.000000 3872.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 662.000000 4004.000000 C 662.000000 4042.000000 662.000000 4112.000000 662.000000 4148.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 558.580616 2017.409024 C 505.200000 2070.400000 484.200000 2148.000000 456.849398 2200.453209" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><mask id="3088086061" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1015" height="4482">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 151 0 L 238 0 L 273 63 L 238 126 L 151 126 L 186 63 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="212.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="bb"><g class="shape" ><path d="M 466 226 L 554 226 L 589 289 L 554 352 L 466 352 L 501 289 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="527.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bb</text></g><g id="cc"><g class="shape" ><path d="M 410 452 L 496 452 L 531 515 L 496 578 L 410 578 L 445 515 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="470.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="dd"><g class="shape" ><rect x="5" y="678" width="577" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="293.500000" y="711.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">dd</text></g><g id="ll"><g class="shape" ><rect x="0" y="2691" width="545" height="457" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="272.500000" y="2724.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ll</text></g><g id="ff"><g class="shape" ><rect x="0" y="2134" width="567" height="457" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="283.500000" y="2167.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ff</text></g><g id="ww"><g class="shape" ><path d="M 577 1882 H 660 C 684 1882 684 1950.4 684 1958 C 684 1965.6 684 2034 660 2034 H 577 C 553 2034 553 1965.6 553 1958 C 553 1950.4 553 1882 577 1882 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 660 1882 C 636 1882 636 1950.4 636 1958 C 636 1965.6 636 2034 660 2034" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="591.500000" y="1943.000000" width="30" height="30" /><text class="text-bold" x="606.500000" y="1903.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ww</text></g><g id="yy"><g class="shape" ><rect x="465" y="3248" width="323" height="478" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="626.500000" y="3281.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">yy</text></g><g id="ad"><g class="shape" ><path d="M 627 4152 L 724 4152 L 698 4278 L 601 4278 L 601 4278 Z" style="fill:red;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="662.500000" y="4218.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ad</text></g><g id="nn"><g class="shape" ><path d="M 4 3850 C 4 3826 350.05 3826 388.5 3826 C 426.95 3826 773 3826 773 3850 V 4028 C 773 4052 426.95 4052 388.5 4052 C 350.05 4052 4 4052 4 4028 V 3850 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 4 3850 C 4 3874 350.05 3874 388.5 3874 C 426.95 3874 773 3874 773 3850" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="388.500000" y="3907.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">nn</text></g><g id="ii"><g class="shape" ><rect x="59" y="1004" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="116.000000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ii</text></g><g id="jj"><g class="shape" ><rect x="58" y="1280" width="115" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="1346.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">jj</text></g><g id="kk"><g class="shape" ><rect x="55" y="1606" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="116.000000" y="1672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">kk</text></g><g id="ss"><g class="shape" ><rect x="590" y="1230" width="218" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="699.000000" y="1263.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ss</text></g><g id="uu"><g class="shape" ><rect x="588" y="1556" width="223" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="699.500000" y="1589.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">uu</text></g><g id="rm"><g class="shape" ><rect x="616" y="2970" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="678.000000" y="3036.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rm</text></g><g id="dd.ee"><g class="shape" ><path d="M 116 854 C 115.5247 854 115.2078 853.8362 114.8909 853.5085 L 55.4753 792.2289 C 54.8415 791.5735 54.8415 790.5904 55.4753 789.935 L 114.8909 728.4915 C 115.5247 727.8361 116.4753 727.8361 117.1091 728.4915 L 176.5247 789.9349 C 177.1585 790.5903 177.1585 791.5734 176.5247 792.2288 L 117.1091 853.5085 C 116.7922 853.8362 116.4753 854 116 854 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="116.000000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="ll.mm"><g class="shape" ><ellipse class="shape" cx="115.500000" cy="3032.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="3035.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse class="shape" cx="115.500000" cy="2475.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="2478.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.gg"><g class="shape" ><path d="M 433.5 2310 C 433.0208 2310 432.7013 2309.8362 432.3818 2309.5085 L 372.4792 2248.2289 C 371.8402 2247.5735 371.8402 2246.5904 372.4792 2245.935 L 432.3818 2184.4915 C 433.0208 2183.8361 433.9792 2183.8361 434.6182 2184.4915 L 494.5208 2245.9349 C 495.1598 2246.5903 495.1598 2247.5734 494.5208 2248.2288 L 434.6182 2309.5085 C 434.2987 2309.8362 433.9792 2310 433.5 2310 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="433.500000" y="2250.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 470.5 854 C 470.0208 854 469.7013 853.8362 469.3818 853.5085 L 409.4792 792.2289 C 408.8402 791.5735 408.8402 790.5904 409.4792 789.935 L 469.3818 728.4915 C 470.0208 727.8361 470.9792 727.8361 471.6182 728.4915 L 531.5208 789.9349 C 532.1598 790.5903 532.1598 791.5734 531.5208 792.2288 L 471.6182 853.5085 C 471.2987 853.8362 470.9792 854 470.5 854 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="470.500000" y="794.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hh</text></g><g id="yy.zz"><g class="shape" ><path d="M 626 3298 H 698 C 722 3298 722 3366.4 722 3374 C 722 3381.6 722 3450 698 3450 H 626 C 602 3450 602 3381.6 602 3374 C 602 3366.4 602 3298 626 3298 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 698 3298 C 674 3298 674 3366.4 674 3374 C 674 3381.6 674 3450 698 3450" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="638.000000" y="3362.000000" width="24" height="24" /><text class="text-bold" x="650.000000" y="3319.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">zz</text></g><g id="nn.oo"><g class="shape" ><rect x="54" y="3876" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="115.500000" y="3942.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="372" y="2413" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="433.500000" y="2479.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="372" y="2741" width="124" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="434.000000" y="2807.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="375" y="2970" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="434.000000" y="3036.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="640" y="1280" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="699.000000" y="1346.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="638" y="1606" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="699.500000" y="1672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="338" y="3876" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.000000" y="3942.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">xx</text></g><g id="yy.ab"><g class="shape" ><rect x="601" y="3550" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="662.500000" y="3616.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="601" y="3876" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="662.000000" y="3942.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ac</text></g><g id="(aa -- bb)[0]"><path d="M 264.882273 81.676053 C 474.600000 157.000000 527.600000 186.000000 527.980001 224.000100" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3088086061)"/></g><g id="(bb -- cc)[0]"><path d="M 494.105573 353.788854 C 475.000000 392.000000 470.000000 412.000000 470.000000 450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3088086061)"/></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 156.704703 127.523879 C 124.000000 166.000000 115.500000 198.600000 115.500000 232.500000 C 115.500000 266.400000 115.500000 311.600000 115.500000 345.500000 C 115.500000 379.400000 115.500000 424.600000 115.500000 458.500000 C 115.500000 492.400000 115.500000 537.600000 115.500000 571.500000 C 115.500000 605.400000 115.600000 688.000000 115.960002 724.000200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="115.500000" y="426.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 565.280369 334.536443 C 610.000000 388.200000 621.500000 424.600000 621.500000 458.500000 C 621.500000 492.400000 621.500000 537.600000 621.500000 571.500000 C 621.500000 605.400000 621.500000 638.000000 621.500000 653.000000 C 621.500000 668.000000 621.500000 700.600000 621.500000 734.500000 C 621.500000 768.400000 621.500000 813.600000 621.500000 847.500000 C 621.500000 881.400000 572.950000 914.000000 500.125000 929.000000 C 427.300000 944.000000 378.750000 976.600000 378.750000 1010.500000 C 378.750000 1044.400000 378.750000 1089.600000 378.750000 1123.500000 C 378.750000 1157.400000 378.750000 1190.000000 378.750000 1205.000000 C 378.750000 1220.000000 378.750000 1252.600000 378.750000 1286.500000 C 378.750000 1320.400000 378.750000 1365.600000 378.750000 1399.500000 C 378.750000 1433.400000 378.750000 1466.000000 378.750000 1481.000000 C 378.750000 1496.000000 378.750000 1516.000000 378.750000 1531.000000 C 378.750000 1546.000000 378.750000 1578.600000 378.750000 1612.500000 C 378.750000 1646.400000 378.750000 1691.600000 378.750000 1725.500000 C 378.750000 1759.400000 378.750000 1792.000000 378.750000 1807.000000 C 378.750000 1822.000000 378.750000 1857.200000 378.750000 1895.000000 C 378.750000 1932.800000 378.750000 1983.200000 378.750000 2021.000000 C 378.750000 2058.800000 385.400000 2148.200000 410.303572 2201.377552" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="378.500000" y="1183.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 470.000000 580.000000 C 470.000000 618.000000 470.000000 688.000000 470.000000 724.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="470.500000" y="659.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 115.980001 855.999900 C 115.600000 894.000000 115.500000 964.000000 115.500000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ii -- jj)[0]"><path d="M 115.500000 1132.000000 C 115.500000 1170.000000 115.500000 1240.000000 115.500000 1278.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3088086061)"/></g><g id="(jj -&gt; kk)[0]"><path d="M 115.500000 1408.000000 C 115.500000 1446.000000 115.500000 1466.000000 115.500000 1481.000000 C 115.500000 1496.000000 115.500000 1566.000000 115.500000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 115.500000 1734.000000 C 115.500000 1772.000000 115.500000 1792.000000 115.500000 1807.000000 C 115.500000 1822.000000 115.500000 1857.200000 115.500000 1895.000000 C 115.500000 1932.800000 115.500000 1983.200000 115.500000 2021.000000 C 115.500000 2058.800000 115.500000 2094.000000 115.500000 2109.000000 C 115.500000 2124.000000 115.500000 2156.600000 115.500000 2190.500000 C 115.500000 2224.400000 115.600000 2370.000000 115.960002 2406.000200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="116.000000" y="2077.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 115.980001 2542.999900 C 115.600000 2581.000000 115.500000 2601.000000 115.500000 2616.000000 C 115.500000 2631.000000 115.500000 2651.000000 115.500000 2666.000000 C 115.500000 2681.000000 115.500000 2713.600000 115.500000 2747.500000 C 115.500000 2781.400000 115.600000 2927.000000 115.960002 2963.000200" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="116.000000" y="2759.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 115.980001 3099.999900 C 115.600000 3138.000000 115.500000 3158.000000 115.500000 3173.000000 C 115.500000 3188.000000 115.500000 3208.000000 115.500000 3223.000000 C 115.500000 3238.000000 115.500000 3273.200000 115.500000 3311.000000 C 115.500000 3348.800000 115.500000 3399.200000 115.500000 3437.000000 C 115.500000 3474.800000 115.500000 3522.600000 115.500000 3556.500000 C 115.500000 3590.400000 115.500000 3635.600000 115.500000 3669.500000 C 115.500000 3703.400000 115.500000 3736.000000 115.500000 3751.000000 C 115.500000 3766.000000 115.500000 3836.000000 115.500000 3872.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/><text class="text-italic" x="116.000000" y="3492.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 433.990000 2311.999975 C 433.800000 2350.000000 433.750000 2370.500000 433.750000 2408.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 433.750000 2541.500000 C 433.750000 2580.700000 433.750000 2601.000000 433.750000 2616.000000 C 433.750000 2631.000000 433.750000 2701.000000 433.750000 2737.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 433.750000 2869.000000 C 433.750000 2907.000000 433.750000 2927.500000 433.750000 2965.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 470.000000 856.000000 C 470.000000 894.000000 515.850000 914.000000 584.625000 929.000000 C 653.400000 944.000000 699.250000 976.600000 699.250000 1010.500000 C 699.250000 1044.400000 699.250000 1089.600000 699.250000 1123.500000 C 699.250000 1157.400000 699.250000 1240.000000 699.250000 1276.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 699.250000 1408.000000 C 699.250000 1446.000000 699.250000 1466.000000 699.250000 1481.000000 C 699.250000 1496.000000 699.250000 1566.000000 699.250000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(kk -&gt; ww)[0]"><path d="M 179.397803 1689.845221 C 400.700000 1763.442815 476.600000 1847.600000 553.840053 1907.547504" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 699.250000 1734.000000 C 699.250000 1772.000000 692.600000 1842.400000 668.154835 1880.630032" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ww -&gt; rm)[0]"><path d="M 654.858114 2035.806555 C 673.000000 2074.000000 677.750000 2094.000000 677.750000 2109.000000 C 677.750000 2124.000000 677.750000 2156.600000 677.750000 2190.500000 C 677.750000 2224.400000 677.750000 2269.600000 677.750000 2303.500000 C 677.750000 2337.400000 677.750000 2383.100000 677.750000 2417.750000 C 677.750000 2452.400000 677.750000 2498.600000 677.750000 2533.250000 C 677.750000 2567.900000 677.750000 2601.000000 677.750000 2616.000000 C 677.750000 2631.000000 677.750000 2651.000000 677.750000 2666.000000 C 677.750000 2681.000000 677.750000 2713.600000 677.750000 2747.500000 C 677.750000 2781.400000 677.750000 2927.500000 677.750000 2965.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 646.318357 3098.292950 C 626.840909 3137.700000 577.200000 3158.000000 510.375000 3173.000000 C 443.550000 3188.000000 399.000000 3208.000000 399.000000 3223.000000 C 399.000000 3238.000000 399.000000 3273.200000 399.000000 3311.000000 C 399.000000 3348.800000 399.000000 3399.200000 399.000000 3437.000000 C 399.000000 3474.800000 399.000000 3522.600000 399.000000 3556.500000 C 399.000000 3590.400000 399.000000 3635.600000 399.000000 3669.500000 C 399.000000 3703.400000 399.000000 3736.000000 399.000000 3751.000000 C 399.000000 3766.000000 399.000000 3836.000000 399.000000 3872.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 433.750000 3098.500000 C 433.750000 3137.700000 459.200000 3158.000000 497.375000 3173.000000 C 535.550000 3188.000000 571.000000 3260.600000 608.513369 3307.866844" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 697.571423 3098.409708 C 709.795455 3137.700000 713.000000 3158.000000 713.000000 3173.000000 C 713.000000 3188.000000 709.000000 3258.000000 694.485563 3294.286093" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 662.000000 3452.000000 C 662.000000 3490.000000 662.000000 3510.000000 662.000000 3546.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 662.000000 3678.000000 C 662.000000 3716.000000 662.000000 3736.000000 662.000000 3751.000000 C 662.000000 3766.000000 662.000000 3836.000000 662.000000 3872.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 662.000000 4004.000000 C 662.000000 4042.000000 662.000000 4112.000000 662.000000 4148.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 558.580616 2017.409024 C 505.200000 2070.400000 484.200000 2148.000000 456.849398 2200.453209" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3088086061)"/></g><mask id="3088086061" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1015" height="4482">
 <rect x="-100" y="-100" width="1015" height="4482" fill="white"></rect>
 <rect x="112.000000" y="410.000000" width="7" height="21" fill="black"></rect>
 <rect x="374.000000" y="1167.000000" width="9" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
index 749518466..fa10408c1 100644
--- a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="898" height="4934" viewBox="-90 -90 898 4934"><style type="text/css">
@@ -18,7 +19,27 @@ width="898" height="4934" viewBox="-90 -90 898 4934"><style type="text/css">
 }
 
 ]]>
-</style><g id="aa"><g class="shape" ><path d="M 563 12 L 650 12 L 685 75 L 650 138 L 563 138 L 598 75 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="624.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="bb"><g class="shape" ><path d="M 583 238 L 671 238 L 706 301 L 671 364 L 583 364 L 618 301 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="644.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bb</text></g><g id="cc"><g class="shape" ><path d="M 458 464 L 544 464 L 579 527 L 544 590 L 458 590 L 493 527 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="518.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="dd"><g class="shape" ><rect x="240" y="816" width="415" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="447.500000" y="849.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">dd</text></g><g id="ll"><g class="shape" ><rect x="12" y="3130" width="425" height="427" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="224.500000" y="3163.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ll</text></g><g id="ff"><g class="shape" ><rect x="12" y="2472" width="424" height="427" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="224.000000" y="2505.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ff</text></g><g id="ww"><g class="shape" ><path d="M 455 2195 H 538 C 562 2195 562 2263.4 562 2271 C 562 2278.6 562 2347 538 2347 H 455 C 431 2347 431 2278.6 431 2271 C 431 2263.4 431 2195 455 2195 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 538 2195 C 514 2195 514 2263.4 514 2271 C 514 2278.6 514 2347 538 2347" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="469.500000" y="2256.000000" width="30" height="30" /><text class="text-bold" x="484.500000" y="2216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ww</text></g><g id="yy"><g class="shape" ><rect x="383" y="3677" width="273" height="448" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="519.500000" y="3710.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">yy</text></g><g id="ad"><g class="shape" ><path d="M 478 4616 L 575 4616 L 549 4742 L 452 4742 L 452 4742 Z" style="fill:red;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="513.500000" y="4682.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ad</text></g><g id="nn"><g class="shape" ><path d="M 93 4259 C 93 4235 343.65 4235 371.5 4235 C 399.35 4235 650 4235 650 4259 V 4487 C 650 4511 399.35 4511 371.5 4511 C 343.65 4511 93 4511 93 4487 V 4259 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 93 4259 C 93 4283 343.65 4283 371.5 4283 C 399.35 4283 650 4283 650 4259" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="371.500000" y="4316.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">nn</text></g><g id="ii"><g class="shape" ><rect x="244" y="1197" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.000000" y="1263.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ii</text></g><g id="jj"><g class="shape" ><rect x="244" y="1503" width="115" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.500000" y="1569.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">jj</text></g><g id="kk"><g class="shape" ><rect x="240" y="1914" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.000000" y="1980.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">kk</text></g><g id="ss"><g class="shape" ><rect x="385" y="1428" width="268" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="519.000000" y="1461.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ss</text></g><g id="uu"><g class="shape" ><rect x="382" y="1814" width="273" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="518.500000" y="1847.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">uu</text></g><g id="rm"><g class="shape" ><rect x="457" y="3330" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="519.000000" y="3396.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rm</text></g><g id="dd.ee"><g class="shape" ><path d="M 376 1017 C 375.5247 1017 375.2078 1016.8362 374.8909 1016.5085 L 315.4753 955.2289 C 314.8415 954.5735 314.8415 953.5904 315.4753 952.935 L 374.8909 891.4915 C 375.5247 890.8361 376.4753 890.8361 377.1091 891.4915 L 436.5247 952.9349 C 437.1585 953.5903 437.1585 954.5734 436.5247 955.2288 L 377.1091 1016.5085 C 376.7922 1016.8362 376.4753 1017 376 1017 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="376.000000" y="957.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="ll.mm"><g class="shape" ><ellipse class="shape" cx="152.500000" cy="3270.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="152.500000" y="3273.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse class="shape" cx="152.500000" cy="2612.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="152.500000" y="2615.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.gg"><g class="shape" ><path d="M 299.5 2674 C 299.0208 2674 298.7013 2673.8362 298.3818 2673.5085 L 238.4792 2612.2289 C 237.8402 2611.5735 237.8402 2610.5904 238.4792 2609.935 L 298.3818 2548.4915 C 299.0208 2547.8361 299.9792 2547.8361 300.6182 2548.4915 L 360.5208 2609.9349 C 361.1598 2610.5903 361.1598 2611.5734 360.5208 2612.2288 L 300.6182 2673.5085 C 300.2987 2673.8362 299.9792 2674 299.5 2674 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="299.500000" y="2614.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 518.5 1017 C 518.0208 1017 517.7013 1016.8362 517.3818 1016.5085 L 457.4792 955.2289 C 456.8402 954.5735 456.8402 953.5904 457.4792 952.935 L 517.3818 891.4915 C 518.0208 890.8361 518.9792 890.8361 519.6182 891.4915 L 579.5208 952.9349 C 580.1598 953.5903 580.1598 954.5734 579.5208 955.2288 L 519.6182 1016.5085 C 519.2987 1016.8362 518.9792 1017 518.5 1017 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="518.500000" y="957.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hh</text></g><g id="yy.zz"><g class="shape" ><path d="M 483 3752 H 555 C 579 3752 579 3820.4 579 3828 C 579 3835.6 579 3904 555 3904 H 483 C 459 3904 459 3835.6 459 3828 C 459 3820.4 459 3752 483 3752 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 555 3752 C 531 3752 531 3820.4 531 3828 C 531 3835.6 531 3904 555 3904" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="495.000000" y="3816.000000" width="24" height="24" /><text class="text-bold" x="507.000000" y="3773.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">zz</text></g><g id="nn.oo"><g class="shape" ><rect x="168" y="4310" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="4376.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="238" y="2698" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="299.500000" y="2764.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="238" y="3207" width="124" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="300.000000" y="3273.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="241" y="3356" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="300.000000" y="3422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="460" y="1503" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="519.000000" y="1569.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="457" y="1889" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="518.500000" y="1955.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="311" y="4310" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="372.000000" y="4376.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">xx</text></g><g id="yy.ab"><g class="shape" ><rect x="458" y="3924" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="519.500000" y="3990.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="453" y="4310" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="514.000000" y="4376.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ac</text></g><g id="(aa -- bb)[0]"><path d="M 645.019999 139.999900 L 645.980001 236.000100" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#983333982)"/></g><g id="(bb -- cc)[0]"><path d="M 624.980001 365.999900 L 624.599995 404.000500 S 624.500000 414.000000 614.500000 414.000000 L 529.000000 414.000000 S 519.000000 414.000000 519.199960 423.998001 L 519.960008 462.000400" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#983333982)"/></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 604.973336 139.999822 L 604.466655 178.000889 S 604.333333 188.000000 594.333333 188.000000 L 444.000000 188.000000 S 434.000000 188.000000 434.000000 198.000000 L 434.000000 751.000000 S 434.000000 761.000000 424.000000 761.000000 L 386.500000 761.000000 S 376.500000 761.000000 376.538461 770.999926 L 376.984615 887.000030" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="434.500000" y="464.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 665.999513 366.000000 L 665.502435 2407.000000 S 665.500000 2417.000000 655.500000 2417.000000 L 330.500000 2417.000000 S 320.500000 2417.000000 320.467105 2426.999946 L 320.013158 2565.000022" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="665.500000" y="1645.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 519.000000 592.000000 L 519.000000 887.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="519.500000" y="746.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 376.992308 1018.999985 L 376.538461 1137.000074 S 376.500000 1147.000000 366.500000 1147.000000 L 311.500000 1147.000000 S 301.500000 1147.000000 301.500000 1157.000000 L 301.500000 1193.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ii -- jj)[0]"><path d="M 301.500000 1325.000000 L 301.500000 1501.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#983333982)"/></g><g id="(jj -&gt; kk)[0]"><path d="M 301.500000 1631.000000 L 301.500000 1910.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 281.166667 2042.000000 L 281.166667 2387.000000 S 281.166667 2397.000000 271.166667 2397.000000 L 163.000000 2397.000000 S 153.000000 2397.000000 153.000000 2407.000000 L 153.000000 2543.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="281.000000" y="2363.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 153.000000 2680.000000 L 153.000000 3074.750000 C 153.000000 3075.250000 152.499038 3074.750002 152.500962 3075.249998 L 152.984615 3201.000030" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="153.000000" y="2947.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 152.998815 3338.000000 L 152.505924 4170.000002 S 152.500000 4180.000000 162.500000 4180.000000 L 219.666667 4180.000000 S 229.666667 4180.000000 229.666667 4190.000000 L 229.666667 4306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="153.000000" y="3867.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 300.000000 2677.000000 L 300.000000 2694.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 300.000000 2826.000000 L 300.000000 3203.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 300.000000 3335.500000 L 300.000000 3352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 519.000000 1019.000000 L 519.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 519.000000 1631.000000 L 519.000000 1885.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(kk -&gt; ww)[0]"><path d="M 321.833333 2042.000000 L 321.833333 2135.000000 S 321.833333 2145.000000 331.833333 2145.000000 L 465.333333 2145.000000 S 475.333333 2145.000000 475.466655 2154.999111 L 475.946671 2191.000356" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 519.000000 2017.000000 L 519.000000 2191.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ww -&gt; rm)[0]"><path d="M 519.000000 2349.000000 L 519.000000 3326.666667" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 498.333333 3458.666667 L 498.333333 3602.000000 S 498.333333 3612.000000 488.333333 3612.000000 L 382.166667 3612.000000 S 372.166667 3612.000000 372.166667 3622.000000 L 372.166667 4306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 300.000000 3484.000000 L 300.000000 3612.000000 S 300.000000 3622.000000 310.000000 3622.000000 L 489.666667 3622.000000 S 499.666667 3622.000000 499.692308 3631.999967 L 499.989744 3748.000013" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 539.668924 3458.666665 L 539.995485 3748.000003" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 519.966671 3905.999722 L 519.733324 3920.000555" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 519.666667 4052.000000 L 519.666667 4177.250000 C 519.666667 4182.750000 514.166667 4177.250000 514.166667 4182.750000 L 514.166667 4306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 514.164815 4437.999999 L 514.003704 4612.000002" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 475.977779 2348.999877 L 475.444438 2397.000617 S 475.333333 2407.000000 465.333333 2407.000000 L 289.500000 2407.000000 S 279.500000 2407.000000 279.530864 2416.999952 L 279.987654 2565.000019" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><mask id="983333982" maskUnits="userSpaceOnUse" x="-100" y="-100" width="898" height="4934">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 563 12 L 650 12 L 685 75 L 650 138 L 563 138 L 598 75 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="624.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="bb"><g class="shape" ><path d="M 583 238 L 671 238 L 706 301 L 671 364 L 583 364 L 618 301 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="644.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bb</text></g><g id="cc"><g class="shape" ><path d="M 458 464 L 544 464 L 579 527 L 544 590 L 458 590 L 493 527 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="518.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="dd"><g class="shape" ><rect x="240" y="816" width="415" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="447.500000" y="849.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">dd</text></g><g id="ll"><g class="shape" ><rect x="12" y="3130" width="425" height="427" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="224.500000" y="3163.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ll</text></g><g id="ff"><g class="shape" ><rect x="12" y="2472" width="424" height="427" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="224.000000" y="2505.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ff</text></g><g id="ww"><g class="shape" ><path d="M 455 2195 H 538 C 562 2195 562 2263.4 562 2271 C 562 2278.6 562 2347 538 2347 H 455 C 431 2347 431 2278.6 431 2271 C 431 2263.4 431 2195 455 2195 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 538 2195 C 514 2195 514 2263.4 514 2271 C 514 2278.6 514 2347 538 2347" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="469.500000" y="2256.000000" width="30" height="30" /><text class="text-bold" x="484.500000" y="2216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ww</text></g><g id="yy"><g class="shape" ><rect x="383" y="3677" width="273" height="448" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="519.500000" y="3710.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">yy</text></g><g id="ad"><g class="shape" ><path d="M 478 4616 L 575 4616 L 549 4742 L 452 4742 L 452 4742 Z" style="fill:red;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="513.500000" y="4682.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ad</text></g><g id="nn"><g class="shape" ><path d="M 93 4259 C 93 4235 343.65 4235 371.5 4235 C 399.35 4235 650 4235 650 4259 V 4487 C 650 4511 399.35 4511 371.5 4511 C 343.65 4511 93 4511 93 4487 V 4259 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 93 4259 C 93 4283 343.65 4283 371.5 4283 C 399.35 4283 650 4283 650 4259" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="371.500000" y="4316.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">nn</text></g><g id="ii"><g class="shape" ><rect x="244" y="1197" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.000000" y="1263.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ii</text></g><g id="jj"><g class="shape" ><rect x="244" y="1503" width="115" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.500000" y="1569.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">jj</text></g><g id="kk"><g class="shape" ><rect x="240" y="1914" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.000000" y="1980.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">kk</text></g><g id="ss"><g class="shape" ><rect x="385" y="1428" width="268" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="519.000000" y="1461.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">ss</text></g><g id="uu"><g class="shape" ><rect x="382" y="1814" width="273" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="518.500000" y="1847.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">uu</text></g><g id="rm"><g class="shape" ><rect x="457" y="3330" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="519.000000" y="3396.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rm</text></g><g id="dd.ee"><g class="shape" ><path d="M 376 1017 C 375.5247 1017 375.2078 1016.8362 374.8909 1016.5085 L 315.4753 955.2289 C 314.8415 954.5735 314.8415 953.5904 315.4753 952.935 L 374.8909 891.4915 C 375.5247 890.8361 376.4753 890.8361 377.1091 891.4915 L 436.5247 952.9349 C 437.1585 953.5903 437.1585 954.5734 436.5247 955.2288 L 377.1091 1016.5085 C 376.7922 1016.8362 376.4753 1017 376 1017 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="376.000000" y="957.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="ll.mm"><g class="shape" ><ellipse class="shape" cx="152.500000" cy="3270.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="152.500000" y="3273.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.mm"><g class="shape" ><ellipse class="shape" cx="152.500000" cy="2612.500000" rx="65.500000" ry="65.500000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="152.500000" y="2615.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">mm</text></g><g id="ff.gg"><g class="shape" ><path d="M 299.5 2674 C 299.0208 2674 298.7013 2673.8362 298.3818 2673.5085 L 238.4792 2612.2289 C 237.8402 2611.5735 237.8402 2610.5904 238.4792 2609.935 L 298.3818 2548.4915 C 299.0208 2547.8361 299.9792 2547.8361 300.6182 2548.4915 L 360.5208 2609.9349 C 361.1598 2610.5903 361.1598 2611.5734 360.5208 2612.2288 L 300.6182 2673.5085 C 300.2987 2673.8362 299.9792 2674 299.5 2674 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="299.500000" y="2614.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="dd.hh"><g class="shape" ><path d="M 518.5 1017 C 518.0208 1017 517.7013 1016.8362 517.3818 1016.5085 L 457.4792 955.2289 C 456.8402 954.5735 456.8402 953.5904 457.4792 952.935 L 517.3818 891.4915 C 518.0208 890.8361 518.9792 890.8361 519.6182 891.4915 L 579.5208 952.9349 C 580.1598 953.5903 580.1598 954.5734 579.5208 955.2288 L 519.6182 1016.5085 C 519.2987 1016.8362 518.9792 1017 518.5 1017 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="518.500000" y="957.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hh</text></g><g id="yy.zz"><g class="shape" ><path d="M 483 3752 H 555 C 579 3752 579 3820.4 579 3828 C 579 3835.6 579 3904 555 3904 H 483 C 459 3904 459 3835.6 459 3828 C 459 3820.4 459 3752 483 3752 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 555 3752 C 531 3752 531 3820.4 531 3828 C 531 3835.6 531 3904 555 3904" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="495.000000" y="3816.000000" width="24" height="24" /><text class="text-bold" x="507.000000" y="3773.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">zz</text></g><g id="nn.oo"><g class="shape" ><rect x="168" y="4310" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="4376.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">oo</text></g><g id="ff.pp"><g class="shape" ><rect x="238" y="2698" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="299.500000" y="2764.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">pp</text></g><g id="ll.qq"><g class="shape" ><rect x="238" y="3207" width="124" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="300.000000" y="3273.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">qq</text></g><g id="ll.rr"><g class="shape" ><rect x="241" y="3356" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="300.000000" y="3422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rr</text></g><g id="ss.tt"><g class="shape" ><rect x="460" y="1503" width="118" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="519.000000" y="1569.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tt</text></g><g id="uu.vv"><g class="shape" ><rect x="457" y="1889" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="518.500000" y="1955.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">vv</text></g><g id="nn.xx"><g class="shape" ><rect x="311" y="4310" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="372.000000" y="4376.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">xx</text></g><g id="yy.ab"><g class="shape" ><rect x="458" y="3924" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="519.500000" y="3990.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ab</text></g><g id="nn.ac"><g class="shape" ><rect x="453" y="4310" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="514.000000" y="4376.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ac</text></g><g id="(aa -- bb)[0]"><path d="M 645.019999 139.999900 L 645.980001 236.000100" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#983333982)"/></g><g id="(bb -- cc)[0]"><path d="M 624.980001 365.999900 L 624.599995 404.000500 S 624.500000 414.000000 614.500000 414.000000 L 529.000000 414.000000 S 519.000000 414.000000 519.199960 423.998001 L 519.960008 462.000400" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#983333982)"/></g><g id="(aa -&gt; dd.ee)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 604.973336 139.999822 L 604.466655 178.000889 S 604.333333 188.000000 594.333333 188.000000 L 444.000000 188.000000 S 434.000000 188.000000 434.000000 198.000000 L 434.000000 751.000000 S 434.000000 761.000000 424.000000 761.000000 L 386.500000 761.000000 S 376.500000 761.000000 376.538461 770.999926 L 376.984615 887.000030" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="434.500000" y="464.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1</text></g><g id="(bb -&gt; ff.gg)[0]"><path d="M 665.999513 366.000000 L 665.502435 2407.000000 S 665.500000 2417.000000 655.500000 2417.000000 L 330.500000 2417.000000 S 320.500000 2417.000000 320.467105 2426.999946 L 320.013158 2565.000022" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="665.500000" y="1645.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">2</text></g><g id="(cc -&gt; dd.hh)[0]"><path d="M 519.000000 592.000000 L 519.000000 887.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="519.500000" y="746.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">3</text></g><g id="(dd.ee -&gt; ii)[0]"><path d="M 376.992308 1018.999985 L 376.538461 1137.000074 S 376.500000 1147.000000 366.500000 1147.000000 L 311.500000 1147.000000 S 301.500000 1147.000000 301.500000 1157.000000 L 301.500000 1193.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ii -- jj)[0]"><path d="M 301.500000 1325.000000 L 301.500000 1501.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#983333982)"/></g><g id="(jj -&gt; kk)[0]"><path d="M 301.500000 1631.000000 L 301.500000 1910.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(kk -&gt; ff.mm)[0]"><path d="M 281.166667 2042.000000 L 281.166667 2387.000000 S 281.166667 2397.000000 271.166667 2397.000000 L 163.000000 2397.000000 S 153.000000 2397.000000 153.000000 2407.000000 L 153.000000 2543.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="281.000000" y="2363.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">4</text></g><g id="(ff.mm -&gt; ll.mm)[0]"><path d="M 153.000000 2680.000000 L 153.000000 3074.750000 C 153.000000 3075.250000 152.499038 3074.750002 152.500962 3075.249998 L 152.984615 3201.000030" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="153.000000" y="2947.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">5</text></g><g id="(ll.mm -&gt; nn.oo)[0]"><path d="M 152.998815 3338.000000 L 152.505924 4170.000002 S 152.500000 4180.000000 162.500000 4180.000000 L 219.666667 4180.000000 S 229.666667 4180.000000 229.666667 4190.000000 L 229.666667 4306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/><text class="text-italic" x="153.000000" y="3867.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">6</text></g><g id="ff.(gg -&gt; pp)[0]"><path d="M 300.000000 2677.000000 L 300.000000 2694.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ff.pp -&gt; ll.qq)[0]"><path d="M 300.000000 2826.000000 L 300.000000 3203.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="ll.(qq -&gt; rr)[0]"><path d="M 300.000000 3335.500000 L 300.000000 3352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(dd.hh -&gt; ss.tt)[0]"><path d="M 519.000000 1019.000000 L 519.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ss.tt -&gt; uu.vv)[0]"><path d="M 519.000000 1631.000000 L 519.000000 1885.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(kk -&gt; ww)[0]"><path d="M 321.833333 2042.000000 L 321.833333 2135.000000 S 321.833333 2145.000000 331.833333 2145.000000 L 465.333333 2145.000000 S 475.333333 2145.000000 475.466655 2154.999111 L 475.946671 2191.000356" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(uu.vv -&gt; ww)[0]"><path d="M 519.000000 2017.000000 L 519.000000 2191.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ww -&gt; rm)[0]"><path d="M 519.000000 2349.000000 L 519.000000 3326.666667" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(rm -&gt; nn.xx)[0]"><path d="M 498.333333 3458.666667 L 498.333333 3602.000000 S 498.333333 3612.000000 488.333333 3612.000000 L 382.166667 3612.000000 S 372.166667 3612.000000 372.166667 3622.000000 L 372.166667 4306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ll.rr -&gt; yy.zz)[0]"><path d="M 300.000000 3484.000000 L 300.000000 3612.000000 S 300.000000 3622.000000 310.000000 3622.000000 L 489.666667 3622.000000 S 499.666667 3622.000000 499.692308 3631.999967 L 499.989744 3748.000013" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(rm -&gt; yy.zz)[0]"><path d="M 539.668924 3458.666665 L 539.995485 3748.000003" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="yy.(zz -&gt; ab)[0]"><path d="M 519.966671 3905.999722 L 519.733324 3920.000555" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(yy.ab -&gt; nn.ac)[0]"><path d="M 519.666667 4052.000000 L 519.666667 4177.250000 C 519.666667 4182.750000 514.166667 4177.250000 514.166667 4182.750000 L 514.166667 4306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(nn.ac -&gt; ad)[0]"><path d="M 514.164815 4437.999999 L 514.003704 4612.000002" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><g id="(ww -&gt; ff.gg)[0]"><path d="M 475.977779 2348.999877 L 475.444438 2397.000617 S 475.333333 2407.000000 465.333333 2407.000000 L 289.500000 2407.000000 S 279.500000 2407.000000 279.530864 2416.999952 L 279.987654 2565.000019" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#983333982)"/></g><mask id="983333982" maskUnits="userSpaceOnUse" x="-100" y="-100" width="898" height="4934">
 <rect x="-100" y="-100" width="898" height="4934" fill="white"></rect>
 <rect x="431.000000" y="448.000000" width="7" height="21" fill="black"></rect>
 <rect x="661.000000" y="1629.000000" width="9" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg b/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
index 43b23554c..2c9fa385f 100644
--- a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="3248" height="1784" viewBox="-102 -102 3248 1784"><style type="text/css">
@@ -18,7 +19,27 @@ width="3248" height="1784" viewBox="-102 -102 3248 1784"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="150" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="173" y="150" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="1397" y="1228" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1453.500000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="1570" y="1228" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1627.000000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="1571" y="1454" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1627.500000" y="1520.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="1744" y="1228" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1799.500000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="2599" y="1228" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2656.000000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="777" y="902" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="833.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="2263" y="426" width="781" height="702" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2653.500000" y="459.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">i</text></g><g id="q"><g class="shape" ><rect x="2881" y="1228" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2938.000000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="336" y="0" width="1886" height="752" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1279.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">r</text></g><g id="i.j"><g class="shape" ><rect x="2305" y="476" width="578" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2594.000000" y="505.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">j</text></g><g id="i.m"><g class="shape" ><rect x="2704" y="902" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2762.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="i.n"><g class="shape" ><rect x="2881" y="902" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2937.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="i.o"><g class="shape" ><rect x="2303" y="852" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2409.500000" y="881.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">o</text></g><g id="r.s"><g class="shape" ><rect x="741" y="50" width="647" height="652" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1064.500000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">s</text></g><g id="r.z"><g class="shape" ><rect x="1439" y="526" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1495.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="r.aa"><g class="shape" ><rect x="386" y="150" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="447.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="r.bb"><g class="shape" ><rect x="1778" y="476" width="405" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1980.500000" y="505.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">bb</text></g><g id="r.ee"><g class="shape" ><rect x="1608" y="150" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1669.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="r.ff"><g class="shape" ><rect x="1611" y="526" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1669.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ff</text></g><g id="r.gg"><g class="shape" ><rect x="568" y="150" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="629.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="2721" y="526" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2777.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="i.j.l"><g class="shape" ><rect x="2355" y="526" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2409.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="i.o.p"><g class="shape" ><rect x="2353" y="902" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2409.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="r.s.t"><g class="shape" ><rect x="832" y="526" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="887.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="r.s.u"><g class="shape" ><rect x="1135" y="100" width="214" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1242.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">u</text></g><g id="r.s.w"><g class="shape" ><rect x="1003" y="526" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1062.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="r.s.x"><g class="shape" ><rect x="972" y="150" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1028.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="r.s.y"><g class="shape" ><rect x="1186" y="526" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1243.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="1828" y="526" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1888.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="2009" y="526" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2071.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="1185" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1242.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 2777.000000 654.000000 C 2777.000000 692.000000 2777.000000 712.000000 2777.000000 727.000000 C 2777.000000 742.000000 2777.000000 762.000000 2777.000000 777.000000 C 2777.000000 792.000000 2775.800000 862.000000 2771.476581 898.028493" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 2409.250000 654.000000 C 2409.250000 692.000000 2409.250000 712.000000 2409.250000 727.000000 C 2409.250000 742.000000 2409.250000 762.000000 2409.250000 777.000000 C 2409.250000 792.000000 2409.250000 862.000000 2409.250000 898.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(q -&gt; i.m)[0]"><path d="M 2887.742327 1226.418662 C 2857.993363 1188.000000 2850.250000 1168.000000 2850.250000 1153.000000 C 2850.250000 1138.000000 2842.450000 1068.000000 2813.710127 1031.154009" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; q)[0]"><path d="M 2823.042374 994.849018 C 2957.050000 1061.192333 2991.000000 1088.000000 2991.000000 1103.000000 C 2991.000000 1118.000000 2986.200000 1188.000000 2968.730924 1224.393908" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.n -&gt; q)[0]"><path d="M 2937.750000 1030.000000 C 2937.750000 1068.000000 2937.750000 1088.000000 2937.750000 1103.000000 C 2937.750000 1118.000000 2937.750000 1188.000000 2937.750000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; c)[0]"><path d="M 2702.494533 997.893081 C 2585.450000 1061.786957 2555.750000 1088.000000 2555.750000 1103.000000 C 2555.750000 1118.000000 1453.750000 1188.000000 1453.750000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; d)[0]"><path d="M 2702.593569 1005.704651 C 2617.450000 1063.316766 2595.750000 1088.000000 2595.750000 1103.000000 C 2595.750000 1118.000000 1627.250000 1188.000000 1627.250000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; g)[0]"><path d="M 2790.007321 1029.843731 C 2806.046460 1068.000000 2810.250000 1088.000000 2810.250000 1103.000000 C 2810.250000 1118.000000 2790.850000 1192.200000 2716.477734 1246.637431" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; f)[0]"><path d="M 2713.450253 1029.589813 C 2684.132743 1068.000000 2676.500000 1088.000000 2676.500000 1103.000000 C 2676.500000 1118.000000 1799.750000 1188.000000 1799.750000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(d -&gt; e)[0]"><path d="M 1627.250000 1356.000000 C 1627.250000 1394.000000 1627.250000 1414.000000 1627.250000 1450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.s.(x -&gt; t)[0]"><path d="M 989.733803 277.718665 C 966.951327 316.000000 961.000000 336.000000 961.000000 351.000000 C 961.000000 366.000000 961.000000 386.000000 961.000000 401.000000 C 961.000000 416.000000 954.400000 486.000000 930.203369 522.661562" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.s.(x -&gt; w)[0]"><path d="M 1047.352173 277.918663 C 1058.557522 316.000000 1061.500000 336.000000 1061.500000 351.000000 C 1061.500000 366.000000 1061.500000 386.000000 1061.500000 401.000000 C 1061.500000 416.000000 1061.500000 486.000000 1061.500000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 692.831416 240.792039 C 847.800000 308.797670 887.000000 336.000000 887.000000 351.000000 C 887.000000 366.000000 887.000000 386.000000 887.000000 401.000000 C 887.000000 416.000000 887.000000 486.000000 887.000000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 1241.750000 278.000000 C 1241.750000 316.000000 1241.750000 336.000000 1241.750000 351.000000 C 1241.750000 366.000000 1241.750000 386.000000 1241.750000 401.000000 C 1241.750000 416.000000 1281.150000 493.597628 1435.097736 562.356894" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 509.901574 233.498566 C 736.600000 307.375775 793.750000 336.000000 793.750000 351.000000 C 793.750000 366.000000 793.750000 386.000000 793.750000 401.000000 C 793.750000 416.000000 801.950000 486.000000 832.213682 522.906929" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 1061.500000 654.000000 C 1061.500000 692.000000 1061.500000 712.000000 1061.500000 727.000000 C 1061.500000 742.000000 1367.200000 762.000000 1825.750000 777.000000 C 2284.300000 792.000000 2612.800000 867.000000 2700.658332 924.801534" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(r.s.t -&gt; g)[0]"><path d="M 925.516197 653.718665 C 948.298673 692.000000 954.250000 712.000000 954.250000 727.000000 C 954.250000 742.000000 954.250000 762.000000 954.250000 777.000000 C 954.250000 792.000000 954.250000 812.000000 954.250000 827.000000 C 954.250000 842.000000 954.250000 874.600000 954.250000 908.500000 C 954.250000 942.400000 954.250000 987.600000 954.250000 1021.500000 C 954.250000 1055.400000 954.250000 1088.000000 954.250000 1103.000000 C 954.250000 1118.000000 2044.550000 1198.881827 2594.794672 1281.813002" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(r.s.t -&gt; h)[0]"><path d="M 856.459389 653.809184 C 838.462389 692.000000 833.750000 712.000000 833.750000 727.000000 C 833.750000 742.000000 833.750000 762.000000 833.750000 777.000000 C 833.750000 792.000000 833.750000 862.000000 833.750000 898.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(ee -&gt; ff)[0]"><path d="M 1669.250000 278.000000 C 1669.250000 316.000000 1669.250000 336.000000 1669.250000 351.000000 C 1669.250000 366.000000 1669.250000 386.000000 1669.250000 401.000000 C 1669.250000 416.000000 1669.250000 486.000000 1669.250000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><mask id="2999072303" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3248" height="1784">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="150" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="173" y="150" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="1397" y="1228" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1453.500000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="1570" y="1228" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1627.000000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="1571" y="1454" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1627.500000" y="1520.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="1744" y="1228" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1799.500000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="2599" y="1228" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2656.000000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="777" y="902" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="833.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="2263" y="426" width="781" height="702" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2653.500000" y="459.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">i</text></g><g id="q"><g class="shape" ><rect x="2881" y="1228" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2938.000000" y="1294.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="336" y="0" width="1886" height="752" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1279.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">r</text></g><g id="i.j"><g class="shape" ><rect x="2305" y="476" width="578" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2594.000000" y="505.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">j</text></g><g id="i.m"><g class="shape" ><rect x="2704" y="902" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2762.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="i.n"><g class="shape" ><rect x="2881" y="902" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2937.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="i.o"><g class="shape" ><rect x="2303" y="852" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2409.500000" y="881.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">o</text></g><g id="r.s"><g class="shape" ><rect x="741" y="50" width="647" height="652" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1064.500000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">s</text></g><g id="r.z"><g class="shape" ><rect x="1439" y="526" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1495.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="r.aa"><g class="shape" ><rect x="386" y="150" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="447.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="r.bb"><g class="shape" ><rect x="1778" y="476" width="405" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1980.500000" y="505.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">bb</text></g><g id="r.ee"><g class="shape" ><rect x="1608" y="150" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1669.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="r.ff"><g class="shape" ><rect x="1611" y="526" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1669.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ff</text></g><g id="r.gg"><g class="shape" ><rect x="568" y="150" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="629.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="2721" y="526" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2777.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="i.j.l"><g class="shape" ><rect x="2355" y="526" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2409.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="i.o.p"><g class="shape" ><rect x="2353" y="902" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2409.500000" y="968.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="r.s.t"><g class="shape" ><rect x="832" y="526" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="887.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="r.s.u"><g class="shape" ><rect x="1135" y="100" width="214" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1242.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">u</text></g><g id="r.s.w"><g class="shape" ><rect x="1003" y="526" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1062.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="r.s.x"><g class="shape" ><rect x="972" y="150" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1028.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="r.s.y"><g class="shape" ><rect x="1186" y="526" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1243.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="1828" y="526" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1888.500000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="2009" y="526" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2071.000000" y="592.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="1185" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1242.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 2777.000000 654.000000 C 2777.000000 692.000000 2777.000000 712.000000 2777.000000 727.000000 C 2777.000000 742.000000 2777.000000 762.000000 2777.000000 777.000000 C 2777.000000 792.000000 2775.800000 862.000000 2771.476581 898.028493" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 2409.250000 654.000000 C 2409.250000 692.000000 2409.250000 712.000000 2409.250000 727.000000 C 2409.250000 742.000000 2409.250000 762.000000 2409.250000 777.000000 C 2409.250000 792.000000 2409.250000 862.000000 2409.250000 898.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(q -&gt; i.m)[0]"><path d="M 2887.742327 1226.418662 C 2857.993363 1188.000000 2850.250000 1168.000000 2850.250000 1153.000000 C 2850.250000 1138.000000 2842.450000 1068.000000 2813.710127 1031.154009" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; q)[0]"><path d="M 2823.042374 994.849018 C 2957.050000 1061.192333 2991.000000 1088.000000 2991.000000 1103.000000 C 2991.000000 1118.000000 2986.200000 1188.000000 2968.730924 1224.393908" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.n -&gt; q)[0]"><path d="M 2937.750000 1030.000000 C 2937.750000 1068.000000 2937.750000 1088.000000 2937.750000 1103.000000 C 2937.750000 1118.000000 2937.750000 1188.000000 2937.750000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; c)[0]"><path d="M 2702.494533 997.893081 C 2585.450000 1061.786957 2555.750000 1088.000000 2555.750000 1103.000000 C 2555.750000 1118.000000 1453.750000 1188.000000 1453.750000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; d)[0]"><path d="M 2702.593569 1005.704651 C 2617.450000 1063.316766 2595.750000 1088.000000 2595.750000 1103.000000 C 2595.750000 1118.000000 1627.250000 1188.000000 1627.250000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; g)[0]"><path d="M 2790.007321 1029.843731 C 2806.046460 1068.000000 2810.250000 1088.000000 2810.250000 1103.000000 C 2810.250000 1118.000000 2790.850000 1192.200000 2716.477734 1246.637431" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(i.m -&gt; f)[0]"><path d="M 2713.450253 1029.589813 C 2684.132743 1068.000000 2676.500000 1088.000000 2676.500000 1103.000000 C 2676.500000 1118.000000 1799.750000 1188.000000 1799.750000 1224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(d -&gt; e)[0]"><path d="M 1627.250000 1356.000000 C 1627.250000 1394.000000 1627.250000 1414.000000 1627.250000 1450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.s.(x -&gt; t)[0]"><path d="M 989.733803 277.718665 C 966.951327 316.000000 961.000000 336.000000 961.000000 351.000000 C 961.000000 366.000000 961.000000 386.000000 961.000000 401.000000 C 961.000000 416.000000 954.400000 486.000000 930.203369 522.661562" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.s.(x -&gt; w)[0]"><path d="M 1047.352173 277.918663 C 1058.557522 316.000000 1061.500000 336.000000 1061.500000 351.000000 C 1061.500000 366.000000 1061.500000 386.000000 1061.500000 401.000000 C 1061.500000 416.000000 1061.500000 486.000000 1061.500000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 692.831416 240.792039 C 847.800000 308.797670 887.000000 336.000000 887.000000 351.000000 C 887.000000 366.000000 887.000000 386.000000 887.000000 401.000000 C 887.000000 416.000000 887.000000 486.000000 887.000000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 1241.750000 278.000000 C 1241.750000 316.000000 1241.750000 336.000000 1241.750000 351.000000 C 1241.750000 366.000000 1241.750000 386.000000 1241.750000 401.000000 C 1241.750000 416.000000 1281.150000 493.597628 1435.097736 562.356894" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 509.901574 233.498566 C 736.600000 307.375775 793.750000 336.000000 793.750000 351.000000 C 793.750000 366.000000 793.750000 386.000000 793.750000 401.000000 C 793.750000 416.000000 801.950000 486.000000 832.213682 522.906929" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 1061.500000 654.000000 C 1061.500000 692.000000 1061.500000 712.000000 1061.500000 727.000000 C 1061.500000 742.000000 1367.200000 762.000000 1825.750000 777.000000 C 2284.300000 792.000000 2612.800000 867.000000 2700.658332 924.801534" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(r.s.t -&gt; g)[0]"><path d="M 925.516197 653.718665 C 948.298673 692.000000 954.250000 712.000000 954.250000 727.000000 C 954.250000 742.000000 954.250000 762.000000 954.250000 777.000000 C 954.250000 792.000000 954.250000 812.000000 954.250000 827.000000 C 954.250000 842.000000 954.250000 874.600000 954.250000 908.500000 C 954.250000 942.400000 954.250000 987.600000 954.250000 1021.500000 C 954.250000 1055.400000 954.250000 1088.000000 954.250000 1103.000000 C 954.250000 1118.000000 2044.550000 1198.881827 2594.794672 1281.813002" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="(r.s.t -&gt; h)[0]"><path d="M 856.459389 653.809184 C 838.462389 692.000000 833.750000 712.000000 833.750000 727.000000 C 833.750000 742.000000 833.750000 762.000000 833.750000 777.000000 C 833.750000 792.000000 833.750000 862.000000 833.750000 898.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><g id="r.(ee -&gt; ff)[0]"><path d="M 1669.250000 278.000000 C 1669.250000 316.000000 1669.250000 336.000000 1669.250000 351.000000 C 1669.250000 366.000000 1669.250000 386.000000 1669.250000 401.000000 C 1669.250000 416.000000 1669.250000 486.000000 1669.250000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2999072303)"/></g><mask id="2999072303" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3248" height="1784">
 <rect x="-100" y="-100" width="3248" height="1784" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg b/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
index a5d53bf61..bee71f713 100644
--- a/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1698" height="2712" viewBox="-90 -90 1698 2712"><style type="text/css">
@@ -18,7 +19,27 @@ width="1698" height="2712" viewBox="-90 -90 1698 2712"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="541" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1393" y="541" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1449.500000" y="607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="722" y="2168" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="778.500000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="855" y="2168" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="912.000000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="855" y="2394" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="911.500000" y="2460.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="989" y="2168" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1044.500000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="294" y="2168" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.000000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="343" y="1301" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="1367.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="664" y="1301" width="683" height="732" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1005.500000" y="1334.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">i</text></g><g id="q"><g class="shape" ><rect x="1272" y="2168" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1329.000000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="145" y="12" width="1228" height="1179" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="759.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">r</text></g><g id="i.j"><g class="shape" ><rect x="878" y="1376" width="392" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1074.000000" y="1405.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">j</text></g><g id="i.m"><g class="shape" ><rect x="739" y="1773" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="797.500000" y="1839.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="i.n"><g class="shape" ><rect x="876" y="1832" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="932.500000" y="1898.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="i.o"><g class="shape" ><rect x="1009" y="1682" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1140.500000" y="1711.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">o</text></g><g id="r.s"><g class="shape" ><rect x="220" y="388" width="795" height="577" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="617.500000" y="417.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">s</text></g><g id="r.z"><g class="shape" ><rect x="502" y="990" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="558.000000" y="1056.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="r.aa"><g class="shape" ><rect x="261" y="237" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="322.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="r.bb"><g class="shape" ><rect x="403" y="87" width="415" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="610.500000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">bb</text></g><g id="r.ee"><g class="shape" ><rect x="1033" y="237" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1094.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="r.ff"><g class="shape" ><rect x="1035" y="388" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1093.500000" y="454.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ff</text></g><g id="r.gg"><g class="shape" ><rect x="1175" y="237" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1236.500000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="953" y="1451" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1009.500000" y="1517.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="i.j.l"><g class="shape" ><rect x="1086" y="1451" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1140.500000" y="1517.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="i.o.p"><g class="shape" ><rect x="1084" y="1757" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1140.500000" y="1823.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="r.s.t"><g class="shape" ><rect x="295" y="671" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="350.500000" y="737.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="r.s.u"><g class="shape" ><rect x="426" y="609" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="558.000000" y="634.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">u</text></g><g id="r.s.w"><g class="shape" ><rect x="710" y="686" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="769.000000" y="752.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="r.s.x"><g class="shape" ><rect x="693" y="463" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="749.500000" y="529.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="r.s.y"><g class="shape" ><rect x="826" y="463" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="883.000000" y="529.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="478" y="162" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="538.500000" y="228.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="619" y="162" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="681.000000" y="228.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="501" y="684" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="558.000000" y="750.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1010.250000 1579.000000 L 1010.250000 1657.000000 S 1010.250000 1667.000000 1000.250000 1667.000000 L 837.500000 1667.000000 S 827.500000 1667.000000 827.500000 1677.000000 L 827.500000 1769.875000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 1141.250000 1579.000000 L 1141.250000 1753.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(q -&gt; i.m)[0]"><path d="M 1357.750000 2166.000000 L 1357.750000 1256.000000 S 1357.750000 1246.000000 1347.750000 1246.000000 L 808.250000 1246.000000 S 798.250000 1246.000000 798.250000 1256.000000 L 798.250000 1769.875000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; q)[0]"><path d="M 837.250000 1901.875000 L 837.250000 2088.000000 S 837.250000 2098.000000 847.250000 2098.000000 L 1290.750000 2098.000000 S 1300.750000 2098.000000 1300.750000 2108.000000 L 1300.750000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.n -&gt; q)[0]"><path d="M 933.250000 1960.000000 L 933.250000 2078.000000 S 933.250000 2088.000000 943.250000 2088.000000 L 1319.250000 2088.000000 S 1329.250000 2088.000000 1329.250000 2098.000000 L 1329.250000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; c)[0]"><path d="M 778.750000 1901.875000 L 778.750000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; d)[0]"><path d="M 798.250000 1901.875000 L 798.250000 2108.000000 S 798.250000 2118.000000 808.250000 2118.000000 L 902.250000 2118.000000 S 912.250000 2118.000000 912.250000 2128.000000 L 912.250000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; g)[0]"><path d="M 759.250000 1901.875000 L 759.250000 2078.000000 S 759.250000 2088.000000 749.250000 2088.000000 L 380.000000 2088.000000 S 370.000000 2088.000000 370.000000 2098.000000 L 370.000000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; f)[0]"><path d="M 817.750000 1901.875000 L 817.750000 2098.000000 S 817.750000 2108.000000 827.750000 2108.000000 L 1034.750000 2108.000000 S 1044.750000 2108.000000 1044.750000 2118.000000 L 1044.750000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(d -&gt; e)[0]"><path d="M 912.250000 2296.000000 L 912.250000 2390.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.s.(x -&gt; t)[0]"><path d="M 731.333333 591.000000 L 731.333333 589.000000 S 731.333333 599.000000 721.333333 599.000000 L 388.250000 599.000000 S 378.250000 599.000000 378.250000 609.000000 L 378.250000 667.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.s.(x -&gt; w)[0]"><path d="M 769.000000 591.000000 L 769.000000 682.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 1236.666667 365.000000 L 1236.666667 363.000000 S 1236.666667 373.000000 1226.666667 373.000000 L 360.500000 373.000000 S 350.500000 373.000000 350.500000 383.000000 L 350.500000 667.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 558.000000 812.000000 L 558.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 322.750000 365.000000 L 322.750000 667.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 769.000000 814.500000 L 769.000000 1769.875000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(r.s.t -&gt; g)[0]"><path d="M 332.000000 799.000000 L 332.000000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(r.s.t -&gt; h)[0]"><path d="M 369.000000 799.000000 L 369.000000 1236.000000 S 369.000000 1246.000000 379.000000 1246.000000 L 389.500000 1246.000000 S 399.500000 1246.000000 399.500000 1256.000000 L 399.500000 1297.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(ee -&gt; ff)[0]"><path d="M 1094.166667 365.000000 L 1094.166667 384.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><mask id="2047417490" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1698" height="2712">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="541" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1393" y="541" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1449.500000" y="607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="722" y="2168" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="778.500000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="855" y="2168" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="912.000000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="855" y="2394" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="911.500000" y="2460.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="989" y="2168" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1044.500000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="294" y="2168" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.000000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="343" y="1301" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="1367.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="664" y="1301" width="683" height="732" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1005.500000" y="1334.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">i</text></g><g id="q"><g class="shape" ><rect x="1272" y="2168" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1329.000000" y="2234.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="145" y="12" width="1228" height="1179" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="759.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">r</text></g><g id="i.j"><g class="shape" ><rect x="878" y="1376" width="392" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1074.000000" y="1405.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">j</text></g><g id="i.m"><g class="shape" ><rect x="739" y="1773" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="797.500000" y="1839.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="i.n"><g class="shape" ><rect x="876" y="1832" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="932.500000" y="1898.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="i.o"><g class="shape" ><rect x="1009" y="1682" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1140.500000" y="1711.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">o</text></g><g id="r.s"><g class="shape" ><rect x="220" y="388" width="795" height="577" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="617.500000" y="417.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">s</text></g><g id="r.z"><g class="shape" ><rect x="502" y="990" width="112" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="558.000000" y="1056.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="r.aa"><g class="shape" ><rect x="261" y="237" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="322.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">aa</text></g><g id="r.bb"><g class="shape" ><rect x="403" y="87" width="415" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="610.500000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">bb</text></g><g id="r.ee"><g class="shape" ><rect x="1033" y="237" width="122" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1094.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ee</text></g><g id="r.ff"><g class="shape" ><rect x="1035" y="388" width="117" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1093.500000" y="454.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ff</text></g><g id="r.gg"><g class="shape" ><rect x="1175" y="237" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1236.500000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">gg</text></g><g id="i.j.k"><g class="shape" ><rect x="953" y="1451" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1009.500000" y="1517.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="i.j.l"><g class="shape" ><rect x="1086" y="1451" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1140.500000" y="1517.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="i.o.p"><g class="shape" ><rect x="1084" y="1757" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1140.500000" y="1823.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="r.s.t"><g class="shape" ><rect x="295" y="671" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="350.500000" y="737.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="r.s.u"><g class="shape" ><rect x="426" y="609" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="558.000000" y="634.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">u</text></g><g id="r.s.w"><g class="shape" ><rect x="710" y="686" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="769.000000" y="752.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="r.s.x"><g class="shape" ><rect x="693" y="463" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="749.500000" y="529.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="r.s.y"><g class="shape" ><rect x="826" y="463" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="883.000000" y="529.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="r.bb.cc"><g class="shape" ><rect x="478" y="162" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="538.500000" y="228.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cc</text></g><g id="r.bb.dd"><g class="shape" ><rect x="619" y="162" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="681.000000" y="228.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">dd</text></g><g id="r.s.u.v"><g class="shape" ><rect x="501" y="684" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="558.000000" y="750.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="i.(j.k -&gt; m)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1010.250000 1579.000000 L 1010.250000 1657.000000 S 1010.250000 1667.000000 1000.250000 1667.000000 L 837.500000 1667.000000 S 827.500000 1667.000000 827.500000 1677.000000 L 827.500000 1769.875000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="i.(j.l -&gt; o.p)[0]"><path d="M 1141.250000 1579.000000 L 1141.250000 1753.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(q -&gt; i.m)[0]"><path d="M 1357.750000 2166.000000 L 1357.750000 1256.000000 S 1357.750000 1246.000000 1347.750000 1246.000000 L 808.250000 1246.000000 S 798.250000 1246.000000 798.250000 1256.000000 L 798.250000 1769.875000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; q)[0]"><path d="M 837.250000 1901.875000 L 837.250000 2088.000000 S 837.250000 2098.000000 847.250000 2098.000000 L 1290.750000 2098.000000 S 1300.750000 2098.000000 1300.750000 2108.000000 L 1300.750000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.n -&gt; q)[0]"><path d="M 933.250000 1960.000000 L 933.250000 2078.000000 S 933.250000 2088.000000 943.250000 2088.000000 L 1319.250000 2088.000000 S 1329.250000 2088.000000 1329.250000 2098.000000 L 1329.250000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; c)[0]"><path d="M 778.750000 1901.875000 L 778.750000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; d)[0]"><path d="M 798.250000 1901.875000 L 798.250000 2108.000000 S 798.250000 2118.000000 808.250000 2118.000000 L 902.250000 2118.000000 S 912.250000 2118.000000 912.250000 2128.000000 L 912.250000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; g)[0]"><path d="M 759.250000 1901.875000 L 759.250000 2078.000000 S 759.250000 2088.000000 749.250000 2088.000000 L 380.000000 2088.000000 S 370.000000 2088.000000 370.000000 2098.000000 L 370.000000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(i.m -&gt; f)[0]"><path d="M 817.750000 1901.875000 L 817.750000 2098.000000 S 817.750000 2108.000000 827.750000 2108.000000 L 1034.750000 2108.000000 S 1044.750000 2108.000000 1044.750000 2118.000000 L 1044.750000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(d -&gt; e)[0]"><path d="M 912.250000 2296.000000 L 912.250000 2390.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.s.(x -&gt; t)[0]"><path d="M 731.333333 591.000000 L 731.333333 589.000000 S 731.333333 599.000000 721.333333 599.000000 L 388.250000 599.000000 S 378.250000 599.000000 378.250000 609.000000 L 378.250000 667.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.s.(x -&gt; w)[0]"><path d="M 769.000000 591.000000 L 769.000000 682.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(gg -&gt; s.t)[0]"><path d="M 1236.666667 365.000000 L 1236.666667 363.000000 S 1236.666667 373.000000 1226.666667 373.000000 L 360.500000 373.000000 S 350.500000 373.000000 350.500000 383.000000 L 350.500000 667.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(s.u.v -&gt; z)[0]"><path d="M 558.000000 812.000000 L 558.000000 986.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(aa -&gt; s.t)[0]"><path d="M 322.750000 365.000000 L 322.750000 667.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(r.s.w -&gt; i.m)[0]"><path d="M 769.000000 814.500000 L 769.000000 1769.875000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(r.s.t -&gt; g)[0]"><path d="M 332.000000 799.000000 L 332.000000 2164.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="(r.s.t -&gt; h)[0]"><path d="M 369.000000 799.000000 L 369.000000 1236.000000 S 369.000000 1246.000000 379.000000 1246.000000 L 389.500000 1246.000000 S 399.500000 1246.000000 399.500000 1256.000000 L 399.500000 1297.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><g id="r.(ee -&gt; ff)[0]"><path d="M 1094.166667 365.000000 L 1094.166667 384.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2047417490)"/></g><mask id="2047417490" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1698" height="2712">
 <rect x="-100" y="-100" width="1698" height="2712" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/latex/dagre/sketch.exp.svg b/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
index 4fd042967..7db81da7c 100644
--- a/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="917" height="933" viewBox="-102 -102 917 933"><style type="text/css">
@@ -18,7 +19,27 @@ width="917" height="933" viewBox="-102 -102 917 933"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/latex/elk/sketch.exp.svg b/e2etests/testdata/stable/latex/elk/sketch.exp.svg
index ad5922fee..8afe0e340 100644
--- a/e2etests/testdata/stable/latex/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/latex/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="837" height="1054" viewBox="-90 -90 837 1054"><style type="text/css">
@@ -18,7 +19,27 @@ width="837" height="1054" viewBox="-90 -90 837 1054"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li1/dagre/sketch.exp.svg b/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
index b1ff8c0fc..b5eed21ad 100644
--- a/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="583" height="756" viewBox="-102 -102 583 756"><style type="text/css">
@@ -18,7 +19,27 @@ width="583" height="756" viewBox="-102 -102 583 756"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li1/elk/sketch.exp.svg b/e2etests/testdata/stable/li1/elk/sketch.exp.svg
index 9aed5b43b..ca94e1b1f 100644
--- a/e2etests/testdata/stable/li1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li1/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="583" height="756" viewBox="-90 -90 583 756"><style type="text/css">
@@ -18,7 +19,27 @@ width="583" height="756" viewBox="-90 -90 583 756"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li2/dagre/sketch.exp.svg b/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
index c92dccbd7..9c96573ef 100644
--- a/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="449" height="732" viewBox="-102 -102 449 732"><style type="text/css">
@@ -18,7 +19,27 @@ width="449" height="732" viewBox="-102 -102 449 732"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li2/elk/sketch.exp.svg b/e2etests/testdata/stable/li2/elk/sketch.exp.svg
index e93d77292..a31a92e0f 100644
--- a/e2etests/testdata/stable/li2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="449" height="732" viewBox="-90 -90 449 732"><style type="text/css">
@@ -18,7 +19,27 @@ width="449" height="732" viewBox="-90 -90 449 732"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li3/dagre/sketch.exp.svg b/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
index e0aa6b955..38e10b3f6 100644
--- a/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="551" height="1168" viewBox="-102 -102 551 1168"><style type="text/css">
@@ -18,7 +19,27 @@ width="551" height="1168" viewBox="-102 -102 551 1168"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li3/elk/sketch.exp.svg b/e2etests/testdata/stable/li3/elk/sketch.exp.svg
index c1438ff9b..251ad4974 100644
--- a/e2etests/testdata/stable/li3/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="551" height="1168" viewBox="-90 -90 551 1168"><style type="text/css">
@@ -18,7 +19,27 @@ width="551" height="1168" viewBox="-90 -90 551 1168"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li4/dagre/sketch.exp.svg b/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
index 876d8df6b..b22952cee 100644
--- a/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1124" height="1032" viewBox="-102 -102 1124 1032"><style type="text/css">
@@ -18,7 +19,27 @@ width="1124" height="1032" viewBox="-102 -102 1124 1032"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/li4/elk/sketch.exp.svg b/e2etests/testdata/stable/li4/elk/sketch.exp.svg
index 27234b4de..8a94c5871 100644
--- a/e2etests/testdata/stable/li4/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1124" height="1032" viewBox="-90 -90 1124 1032"><style type="text/css">
@@ -18,7 +19,27 @@ width="1124" height="1032" viewBox="-90 -90 1124 1032"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/links/dagre/sketch.exp.svg b/e2etests/testdata/stable/links/dagre/sketch.exp.svg
index fb9563220..528da3345 100644
--- a/e2etests/testdata/stable/links/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/links/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="334" height="572" viewBox="-102 -118 334 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="334" height="572" viewBox="-102 -118 334 572"><style type="text/css">
 }
 
 ]]>
-</style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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"/>
diff --git a/e2etests/testdata/stable/links/elk/sketch.exp.svg b/e2etests/testdata/stable/links/elk/sketch.exp.svg
index 8a2d07a01..a67cdb315 100644
--- a/e2etests/testdata/stable/links/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/links/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="334" height="572" viewBox="-90 -106 334 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="334" height="572" viewBox="-90 -106 334 572"><style type="text/css">
 }
 
 ]]>
-</style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(109 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(109 -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"/>
diff --git a/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg b/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
index b1c5c5631..a2f26109a 100644
--- a/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="470" height="706" viewBox="-102 -102 470 706"><style type="text/css">
@@ -18,7 +19,27 @@ width="470" height="706" viewBox="-102 -102 470 706"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg b/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
index a1920ffd8..a11d57fbd 100644
--- a/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="470" height="706" viewBox="-90 -90 470 706"><style type="text/css">
@@ -18,7 +19,27 @@ width="470" height="706" viewBox="-90 -90 470 706"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg b/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
index 8d5327d5b..1376381a7 100644
--- a/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="735" height="842" viewBox="-102 -102 735 842"><style type="text/css">
@@ -18,7 +19,27 @@ width="735" height="842" viewBox="-102 -102 735 842"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/markdown/elk/sketch.exp.svg b/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
index 6dc9b37ab..80e32b099 100644
--- a/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="735" height="842" viewBox="-90 -90 735 842"><style type="text/css">
@@ -18,7 +19,27 @@ width="735" height="842" viewBox="-90 -90 735 842"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 b2ecb06b8..cb80d9150 100644
--- a/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="516" height="685" viewBox="-102 -102 516 685"><style type="text/css">
@@ -18,7 +19,27 @@ width="516" height="685" viewBox="-102 -102 516 685"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 0270db726..af4f70bea 100644
--- a/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="566" height="735" viewBox="-90 -90 566 735"><style type="text/css">
@@ -18,7 +19,27 @@ width="566" height="735" viewBox="-90 -90 566 735"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 e9a429cba..8067bd57d 100644
--- a/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="763" height="352" viewBox="-102 -102 763 352"><style type="text/css">
@@ -18,7 +19,27 @@ width="763" height="352" viewBox="-102 -102 763 352"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 ed857d063..556034da3 100644
--- a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="813" height="402" viewBox="-90 -90 813 402"><style type="text/css">
@@ -18,7 +19,27 @@ width="813" height="402" viewBox="-90 -90 813 402"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 1b30a3803..02882dac2 100644
--- a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="763" height="352" viewBox="-102 -102 763 352"><style type="text/css">
@@ -18,7 +19,27 @@ width="763" height="352" viewBox="-102 -102 763 352"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 0824f0166..36b39bde1 100644
--- a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="813" height="402" viewBox="-90 -90 813 402"><style type="text/css">
@@ -18,7 +19,27 @@ width="813" height="402" viewBox="-90 -90 813 402"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 9b8266e65..e6e3efc9b 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="400" height="767" viewBox="-102 -102 400 767"><style type="text/css">
@@ -18,7 +19,27 @@ width="400" height="767" viewBox="-102 -102 400 767"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 9abf69017..f872e7556 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="400" height="767" viewBox="-90 -90 400 767"><style type="text/css">
@@ -18,7 +19,27 @@ width="400" height="767" viewBox="-90 -90 400 767"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 c501cf3d2..82eccd60a 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="416" height="807" viewBox="-102 -102 416 807"><style type="text/css">
@@ -18,7 +19,27 @@ width="416" height="807" viewBox="-102 -102 416 807"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 0194444a1..b3f33573f 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="416" height="807" viewBox="-90 -90 416 807"><style type="text/css">
@@ -18,7 +19,27 @@ width="416" height="807" viewBox="-90 -90 416 807"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 01bd629ce..68589f1d4 100644
--- a/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="680" viewBox="-102 -102 317 680"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="680" viewBox="-102 -102 317 680"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 f3e4c19a1..016cfb6a6 100644
--- a/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="680" viewBox="-90 -90 317 680"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="680" viewBox="-90 -90 317 680"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg b/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
index deb9d2b7f..9f4ed17f9 100644
--- a/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="406" height="362" viewBox="-102 -102 406 362"><style type="text/css">
@@ -18,7 +19,27 @@ width="406" height="362" viewBox="-102 -102 406 362"><style type="text/css">
 }
 
 ]]>
-</style><g id="hey"><g class="shape" ><rect x="0" y="0" width="202" height="158" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="101.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="101.000000" dy="0.000000">this</tspan><tspan x="101.000000" dy="19.333333">goes</tspan><tspan x="101.000000" dy="19.333333">multiple lines</tspan></text></g><mask id="2998533480" maskUnits="userSpaceOnUse" x="-100" y="-100" width="406" height="362">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="202" height="158" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="101.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="101.000000" dy="0.000000">this</tspan><tspan x="101.000000" dy="19.333333">goes</tspan><tspan x="101.000000" dy="19.333333">multiple lines</tspan></text></g><mask id="2998533480" maskUnits="userSpaceOnUse" x="-100" y="-100" width="406" height="362">
 <rect x="-100" y="-100" width="406" height="362" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg b/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
index 10fddddab..d26813cd3 100644
--- a/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="406" height="362" viewBox="-90 -90 406 362"><style type="text/css">
@@ -18,7 +19,27 @@ width="406" height="362" viewBox="-90 -90 406 362"><style type="text/css">
 }
 
 ]]>
-</style><g id="hey"><g class="shape" ><rect x="12" y="12" width="202" height="158" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="113.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="113.000000" dy="0.000000">this</tspan><tspan x="113.000000" dy="19.333333">goes</tspan><tspan x="113.000000" dy="19.333333">multiple lines</tspan></text></g><mask id="1312485744" maskUnits="userSpaceOnUse" x="-100" y="-100" width="406" height="362">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="202" height="158" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="113.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="113.000000" dy="0.000000">this</tspan><tspan x="113.000000" dy="19.333333">goes</tspan><tspan x="113.000000" dy="19.333333">multiple lines</tspan></text></g><mask id="1312485744" maskUnits="userSpaceOnUse" x="-100" y="-100" width="406" height="362">
 <rect x="-100" y="-100" width="406" height="362" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg b/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
index 2793b202d..0530ac6a9 100644
--- a/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1954" height="1460" viewBox="-102 -102 1954 1460"><style type="text/css">
@@ -18,7 +19,27 @@ width="1954" height="1460" viewBox="-102 -102 1954 1460"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="795" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="851.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="83" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="139.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="274" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="330.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="622" y="678" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="679.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="969" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1025.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="1313" y="678" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1368.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="795" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="852.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="1545" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1601.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="0" y="452" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="54.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="169" y="452" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="224.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="710" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="766.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="883" y="0" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="937.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="185" y="904" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="243.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="362" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="418.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="535" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="592.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="709" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="765.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="882" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="939.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="1056" y="904" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1111.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="709" y="1130" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="765.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="1227" y="904" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1282.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="1398" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1455.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="v"><g class="shape" ><rect x="1458" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1515.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="w"><g class="shape" ><rect x="1632" y="452" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1691.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 793.017992 522.897779 C 170.800000 606.926023 28.350000 640.343775 79.788088 687.030553" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; c)[0]"><path d="M 793.045487 527.684321 C 423.600000 607.852040 330.750000 638.000000 330.750000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; d)[0]"><path d="M 793.325549 552.998341 C 701.800000 612.780925 678.500000 638.000000 678.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; e)[0]"><path d="M 909.675893 552.889775 C 1001.600000 612.759654 1025.000000 638.000000 1025.000000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; f)[0]"><path d="M 909.953874 527.776185 C 1276.400000 607.869826 1368.500000 638.000000 1368.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(g -&gt; a)[0]"><path d="M 851.500000 354.000000 C 851.500000 392.000000 851.500000 412.000000 851.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; h)[0]"><path d="M 909.967891 525.604931 C 1361.200000 607.449599 1488.700000 640.600000 1542.508039 688.345161" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(i -&gt; b)[0]"><path d="M 54.643805 579.999995 C 54.727876 618.000000 62.150000 638.000000 89.370628 674.784632" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(j -&gt; b)[0]"><path d="M 224.143805 579.999995 C 224.227876 618.000000 216.650000 638.000000 188.670333 674.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(k -&gt; g)[0]"><path d="M 766.000000 128.000000 C 766.000000 166.000000 773.600000 186.000000 801.579667 222.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(l -&gt; g)[0]"><path d="M 937.000000 128.000000 C 937.000000 166.000000 929.400000 186.000000 901.420333 222.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(c -&gt; m)[0]"><path d="M 280.742327 805.581338 C 250.993363 844.000000 243.250000 864.000000 243.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(c -&gt; n)[0]"><path d="M 380.757673 805.581338 C 410.506637 844.000000 418.250000 864.000000 418.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(d -&gt; o)[0]"><path d="M 628.917061 805.586422 C 599.426991 844.000000 591.750000 864.000000 591.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(d -&gt; p)[0]"><path d="M 728.082939 805.586422 C 757.573009 844.000000 765.250000 864.000000 765.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(e -&gt; q)[0]"><path d="M 975.700253 805.589813 C 946.382743 844.000000 938.750000 864.000000 938.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(e -&gt; r)[0]"><path d="M 1074.299747 805.589813 C 1103.617257 844.000000 1111.250000 864.000000 1111.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(p -&gt; s)[0]"><path d="M 765.250000 1032.000000 C 765.250000 1070.000000 765.250000 1090.000000 765.250000 1126.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(f -&gt; t)[0]"><path d="M 1319.200253 805.589813 C 1289.882743 844.000000 1282.250000 864.000000 1282.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(f -&gt; u)[0]"><path d="M 1417.799747 805.589813 C 1447.117257 844.000000 1454.750000 864.000000 1454.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(v -&gt; h)[0]"><path d="M 1514.500000 580.000000 C 1514.500000 618.000000 1522.300000 638.000000 1551.039873 674.845991" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(w -&gt; h)[0]"><path d="M 1690.500000 580.000000 C 1690.500000 618.000000 1682.700000 638.000000 1653.960127 674.845991" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><mask id="95120517" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1954" height="1460">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="795" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="851.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="83" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="139.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="274" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="330.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="622" y="678" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="679.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="969" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1025.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="1313" y="678" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1368.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="795" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="852.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="1545" y="678" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1601.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="0" y="452" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="54.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="169" y="452" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="224.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="710" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="766.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="883" y="0" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="937.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="185" y="904" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="243.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="362" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="418.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="535" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="592.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="709" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="765.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="882" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="939.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="1056" y="904" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1111.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="709" y="1130" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="765.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="1227" y="904" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1282.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="1398" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1455.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="v"><g class="shape" ><rect x="1458" y="452" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1515.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="w"><g class="shape" ><rect x="1632" y="452" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1691.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 793.017992 522.897779 C 170.800000 606.926023 28.350000 640.343775 79.788088 687.030553" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; c)[0]"><path d="M 793.045487 527.684321 C 423.600000 607.852040 330.750000 638.000000 330.750000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; d)[0]"><path d="M 793.325549 552.998341 C 701.800000 612.780925 678.500000 638.000000 678.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; e)[0]"><path d="M 909.675893 552.889775 C 1001.600000 612.759654 1025.000000 638.000000 1025.000000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; f)[0]"><path d="M 909.953874 527.776185 C 1276.400000 607.869826 1368.500000 638.000000 1368.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(g -&gt; a)[0]"><path d="M 851.500000 354.000000 C 851.500000 392.000000 851.500000 412.000000 851.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(a -&gt; h)[0]"><path d="M 909.967891 525.604931 C 1361.200000 607.449599 1488.700000 640.600000 1542.508039 688.345161" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(i -&gt; b)[0]"><path d="M 54.643805 579.999995 C 54.727876 618.000000 62.150000 638.000000 89.370628 674.784632" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(j -&gt; b)[0]"><path d="M 224.143805 579.999995 C 224.227876 618.000000 216.650000 638.000000 188.670333 674.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(k -&gt; g)[0]"><path d="M 766.000000 128.000000 C 766.000000 166.000000 773.600000 186.000000 801.579667 222.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(l -&gt; g)[0]"><path d="M 937.000000 128.000000 C 937.000000 166.000000 929.400000 186.000000 901.420333 222.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(c -&gt; m)[0]"><path d="M 280.742327 805.581338 C 250.993363 844.000000 243.250000 864.000000 243.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(c -&gt; n)[0]"><path d="M 380.757673 805.581338 C 410.506637 844.000000 418.250000 864.000000 418.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(d -&gt; o)[0]"><path d="M 628.917061 805.586422 C 599.426991 844.000000 591.750000 864.000000 591.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(d -&gt; p)[0]"><path d="M 728.082939 805.586422 C 757.573009 844.000000 765.250000 864.000000 765.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(e -&gt; q)[0]"><path d="M 975.700253 805.589813 C 946.382743 844.000000 938.750000 864.000000 938.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(e -&gt; r)[0]"><path d="M 1074.299747 805.589813 C 1103.617257 844.000000 1111.250000 864.000000 1111.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(p -&gt; s)[0]"><path d="M 765.250000 1032.000000 C 765.250000 1070.000000 765.250000 1090.000000 765.250000 1126.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(f -&gt; t)[0]"><path d="M 1319.200253 805.589813 C 1289.882743 844.000000 1282.250000 864.000000 1282.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(f -&gt; u)[0]"><path d="M 1417.799747 805.589813 C 1447.117257 844.000000 1454.750000 864.000000 1454.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(v -&gt; h)[0]"><path d="M 1514.500000 580.000000 C 1514.500000 618.000000 1522.300000 638.000000 1551.039873 674.845991" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><g id="(w -&gt; h)[0]"><path d="M 1690.500000 580.000000 C 1690.500000 618.000000 1682.700000 638.000000 1653.960127 674.845991" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#95120517)"/></g><mask id="95120517" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1954" height="1460">
 <rect x="-100" y="-100" width="1954" height="1460" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg b/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
index 931d1b524..59a32275b 100644
--- a/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1537" height="1480" viewBox="-90 -90 1537 1480"><style type="text/css">
@@ -18,7 +19,27 @@ width="1537" height="1480" viewBox="-90 -90 1537 1480"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="797" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="853.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="140" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="196.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="273" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="539" y="710" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="596.000000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="806" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="862.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="1070" y="710" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1125.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="797" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="854.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="1201" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1257.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="142" y="464" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="196.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="12" y="464" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="67.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="816" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="872.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="687" y="12" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="741.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="154" y="936" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="212.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="291" y="936" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="347.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="424" y="936" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="481.000000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="558" y="936" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="614.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="691" y="936" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="748.000000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="825" y="936" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="880.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="559" y="1162" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="615.000000" y="1228.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="956" y="936" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1011.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="1087" y="936" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1144.000000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="v"><g class="shape" ><rect x="1093" y="464" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1150.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="w"><g class="shape" ><rect x="1227" y="464" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1286.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 814.071429 592.000000 L 814.071429 630.000000 S 814.071429 640.000000 804.071429 640.000000 L 234.750000 640.000000 S 224.750000 640.000000 224.750000 650.000000 L 224.750000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; c)[0]"><path d="M 830.214286 592.000000 L 830.214286 640.000000 S 830.214286 650.000000 820.214286 650.000000 L 339.500000 650.000000 S 329.500000 650.000000 329.500000 660.000000 L 329.500000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; d)[0]"><path d="M 846.357143 592.000000 L 846.357143 650.000000 S 846.357143 660.000000 836.357143 660.000000 L 606.333333 660.000000 S 596.333333 660.000000 596.333333 670.000000 L 596.333333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; e)[0]"><path d="M 862.500000 592.000000 L 862.500000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; f)[0]"><path d="M 878.642857 592.000000 L 878.642857 650.000000 S 878.642857 660.000000 888.642857 660.000000 L 1116.333333 660.000000 S 1126.333333 660.000000 1126.333333 670.000000 L 1126.333333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(g -&gt; a)[0]"><path d="M 854.428571 366.000000 L 854.428571 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; h)[0]"><path d="M 894.785714 592.000000 L 894.785714 640.000000 S 894.785714 650.000000 904.785714 650.000000 L 1220.083333 650.000000 S 1230.083333 650.000000 1230.083333 660.000000 L 1230.083333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(i -&gt; b)[0]"><path d="M 196.500000 592.000000 L 196.500000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(j -&gt; b)[0]"><path d="M 67.000000 592.000000 L 67.000000 630.000000 S 67.000000 640.000000 77.000000 640.000000 L 158.250000 640.000000 S 168.250000 640.000000 168.250000 650.000000 L 168.250000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(k -&gt; g)[0]"><path d="M 873.428571 140.000000 L 873.428571 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(l -&gt; g)[0]"><path d="M 742.428571 140.000000 L 742.428571 178.000000 S 742.428571 188.000000 752.428571 188.000000 L 825.428571 188.000000 S 835.428571 188.000000 835.428571 198.000000 L 835.428571 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(c -&gt; m)[0]"><path d="M 310.666667 838.000000 L 310.666667 876.000000 S 310.666667 886.000000 300.666667 886.000000 L 223.333333 886.000000 S 213.333333 886.000000 213.333333 896.000000 L 213.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(c -&gt; n)[0]"><path d="M 348.333333 838.000000 L 348.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(d -&gt; o)[0]"><path d="M 577.333333 838.000000 L 577.333333 876.000000 S 577.333333 886.000000 567.333333 886.000000 L 491.833333 886.000000 S 481.833333 886.000000 481.833333 896.000000 L 481.833333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(d -&gt; p)[0]"><path d="M 615.333333 838.000000 L 615.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(e -&gt; q)[0]"><path d="M 843.666667 838.000000 L 843.666667 876.000000 S 843.666667 886.000000 833.666667 886.000000 L 758.833333 886.000000 S 748.833333 886.000000 748.833333 896.000000 L 748.833333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(e -&gt; r)[0]"><path d="M 881.333333 838.000000 L 881.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(p -&gt; s)[0]"><path d="M 615.333333 1064.000000 L 615.333333 1158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(f -&gt; t)[0]"><path d="M 1107.833333 838.000000 L 1107.833333 876.000000 S 1107.833333 886.000000 1097.833333 886.000000 L 1022.333333 886.000000 S 1012.333333 886.000000 1012.333333 896.000000 L 1012.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(f -&gt; u)[0]"><path d="M 1144.833333 838.000000 L 1144.833333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(v -&gt; h)[0]"><path d="M 1150.583333 592.000000 L 1150.583333 630.000000 S 1150.583333 640.000000 1160.583333 640.000000 L 1248.333333 640.000000 S 1258.333333 640.000000 1258.333333 650.000000 L 1258.333333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(w -&gt; h)[0]"><path d="M 1286.583333 592.000000 L 1286.583333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><mask id="3730604033" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1537" height="1480">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="797" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="853.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="140" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="196.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="273" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="539" y="710" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="596.000000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="806" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="862.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="1070" y="710" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1125.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="797" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="854.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="1201" y="710" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1257.500000" y="776.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="142" y="464" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="196.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="12" y="464" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="67.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="816" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="872.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="687" y="12" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="741.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="154" y="936" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="212.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="291" y="936" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="347.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="424" y="936" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="481.000000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="558" y="936" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="614.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="691" y="936" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="748.000000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="825" y="936" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="880.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="559" y="1162" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="615.000000" y="1228.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="956" y="936" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1011.500000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="1087" y="936" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1144.000000" y="1002.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="v"><g class="shape" ><rect x="1093" y="464" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1150.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">v</text></g><g id="w"><g class="shape" ><rect x="1227" y="464" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1286.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">w</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 814.071429 592.000000 L 814.071429 630.000000 S 814.071429 640.000000 804.071429 640.000000 L 234.750000 640.000000 S 224.750000 640.000000 224.750000 650.000000 L 224.750000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; c)[0]"><path d="M 830.214286 592.000000 L 830.214286 640.000000 S 830.214286 650.000000 820.214286 650.000000 L 339.500000 650.000000 S 329.500000 650.000000 329.500000 660.000000 L 329.500000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; d)[0]"><path d="M 846.357143 592.000000 L 846.357143 650.000000 S 846.357143 660.000000 836.357143 660.000000 L 606.333333 660.000000 S 596.333333 660.000000 596.333333 670.000000 L 596.333333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; e)[0]"><path d="M 862.500000 592.000000 L 862.500000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; f)[0]"><path d="M 878.642857 592.000000 L 878.642857 650.000000 S 878.642857 660.000000 888.642857 660.000000 L 1116.333333 660.000000 S 1126.333333 660.000000 1126.333333 670.000000 L 1126.333333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(g -&gt; a)[0]"><path d="M 854.428571 366.000000 L 854.428571 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(a -&gt; h)[0]"><path d="M 894.785714 592.000000 L 894.785714 640.000000 S 894.785714 650.000000 904.785714 650.000000 L 1220.083333 650.000000 S 1230.083333 650.000000 1230.083333 660.000000 L 1230.083333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(i -&gt; b)[0]"><path d="M 196.500000 592.000000 L 196.500000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(j -&gt; b)[0]"><path d="M 67.000000 592.000000 L 67.000000 630.000000 S 67.000000 640.000000 77.000000 640.000000 L 158.250000 640.000000 S 168.250000 640.000000 168.250000 650.000000 L 168.250000 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(k -&gt; g)[0]"><path d="M 873.428571 140.000000 L 873.428571 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(l -&gt; g)[0]"><path d="M 742.428571 140.000000 L 742.428571 178.000000 S 742.428571 188.000000 752.428571 188.000000 L 825.428571 188.000000 S 835.428571 188.000000 835.428571 198.000000 L 835.428571 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(c -&gt; m)[0]"><path d="M 310.666667 838.000000 L 310.666667 876.000000 S 310.666667 886.000000 300.666667 886.000000 L 223.333333 886.000000 S 213.333333 886.000000 213.333333 896.000000 L 213.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(c -&gt; n)[0]"><path d="M 348.333333 838.000000 L 348.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(d -&gt; o)[0]"><path d="M 577.333333 838.000000 L 577.333333 876.000000 S 577.333333 886.000000 567.333333 886.000000 L 491.833333 886.000000 S 481.833333 886.000000 481.833333 896.000000 L 481.833333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(d -&gt; p)[0]"><path d="M 615.333333 838.000000 L 615.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(e -&gt; q)[0]"><path d="M 843.666667 838.000000 L 843.666667 876.000000 S 843.666667 886.000000 833.666667 886.000000 L 758.833333 886.000000 S 748.833333 886.000000 748.833333 896.000000 L 748.833333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(e -&gt; r)[0]"><path d="M 881.333333 838.000000 L 881.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(p -&gt; s)[0]"><path d="M 615.333333 1064.000000 L 615.333333 1158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(f -&gt; t)[0]"><path d="M 1107.833333 838.000000 L 1107.833333 876.000000 S 1107.833333 886.000000 1097.833333 886.000000 L 1022.333333 886.000000 S 1012.333333 886.000000 1012.333333 896.000000 L 1012.333333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(f -&gt; u)[0]"><path d="M 1144.833333 838.000000 L 1144.833333 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(v -&gt; h)[0]"><path d="M 1150.583333 592.000000 L 1150.583333 630.000000 S 1150.583333 640.000000 1160.583333 640.000000 L 1248.333333 640.000000 S 1258.333333 640.000000 1258.333333 650.000000 L 1258.333333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><g id="(w -&gt; h)[0]"><path d="M 1286.583333 592.000000 L 1286.583333 706.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3730604033)"/></g><mask id="3730604033" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1537" height="1480">
 <rect x="-100" y="-100" width="1537" height="1480" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg b/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
index bc512013a..b06dcf8a1 100644
--- a/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1356" height="1912" viewBox="-150 -102 1356 1912"><style type="text/css">
@@ -18,7 +19,27 @@ width="1356" height="1912" viewBox="-150 -102 1356 1912"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="381" y="1130" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="437.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="299" y="1582" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="355.500000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="420" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="476.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="213" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="80" y="1130" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="0" y="1356" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="55.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="220" y="0" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="277.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="40" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="96.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="42" y="452" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="96.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="42" y="678" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="40" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="96.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="995" y="1130" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1049.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="919" y="1582" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="977.500000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="900" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="956.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="781" y="1130" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="838.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="708" y="1356" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="835" y="0" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="892.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="616" y="226" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="671.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="615" y="452" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="671.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="616" y="678" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="671.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="527" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="584.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 437.000000 1258.000000 C 437.000000 1296.000000 437.000000 1328.600000 437.000000 1362.500000 C 437.000000 1396.400000 429.800000 1542.000000 403.337219 1578.753863" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(c -&gt; a)[0]"><path d="M 476.750000 580.000000 C 476.750000 618.000000 476.750000 650.600000 476.750000 684.500000 C 476.750000 718.400000 476.750000 763.600000 476.750000 797.500000 C 476.750000 831.400000 476.750000 876.600000 476.750000 910.500000 C 476.750000 944.400000 473.150000 1090.000000 460.104878 1126.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(d -&gt; a)[0]"><path d="M 328.655651 1006.748657 C 414.800000 1065.125337 436.750000 1090.000000 436.750000 1126.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(d -&gt; b)[0]"><path d="M 270.000000 1032.000000 C 270.000000 1070.000000 270.000000 1102.600000 270.000000 1136.500000 C 270.000000 1170.400000 270.000000 1215.600000 270.000000 1249.500000 C 270.000000 1283.400000 270.000000 1328.600000 270.000000 1362.500000 C 270.000000 1396.400000 277.600000 1542.000000 305.579667 1578.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(d -&gt; e)[0]"><path d="M 220.417061 1031.586422 C 190.926991 1070.000000 179.050000 1090.000000 163.798930 1126.312072" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(e -&gt; f)[0]"><path d="M 136.500000 1258.000000 C 136.500000 1296.000000 129.300000 1316.000000 102.837219 1352.753863" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(f -&gt; b)[0]"><path d="M 55.500000 1484.000000 C 55.500000 1522.000000 104.300000 1550.400000 295.757211 1622.588784" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(c -&gt; f)[0]"><path d="M 418.301810 528.568866 C 76.050000 608.023318 -10.000000 650.600000 -10.000000 684.500000 C -10.000000 718.400000 -10.000000 763.600000 -10.000000 797.500000 C -10.000000 831.400000 -10.000000 876.600000 -10.000000 910.500000 C -10.000000 944.400000 -10.000000 989.600000 -10.000000 1023.500000 C -10.000000 1057.400000 -10.000000 1102.600000 -10.000000 1136.500000 C -10.000000 1170.400000 -4.200000 1316.000000 16.993128 1352.539875" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(g -&gt; c)[0]"><path d="M 335.491288 96.188828 C 448.150000 159.841000 476.750000 198.600000 476.750000 232.500000 C 476.750000 266.400000 476.750000 412.000000 476.750000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(g -&gt; h)[0]"><path d="M 218.055457 99.796024 C 121.150000 160.546741 96.500000 186.000000 96.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(h -&gt; i)[0]"><path d="M 96.500000 354.000000 C 96.500000 392.000000 96.500000 412.000000 96.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(i -&gt; j)[0]"><path d="M 96.500000 580.000000 C 96.500000 618.000000 96.500000 638.000000 96.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(j -&gt; k)[0]"><path d="M 96.500000 806.000000 C 96.500000 844.000000 96.500000 864.000000 96.500000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(k -&gt; e)[0]"><path d="M 96.500000 1032.000000 C 96.500000 1070.000000 100.100000 1090.000000 113.145122 1126.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(j -&gt; f)[0]"><path d="M 39.916361 784.644718 C -31.700000 839.884642 -50.000000 876.600000 -50.000000 910.500000 C -50.000000 944.400000 -50.000000 989.600000 -50.000000 1023.500000 C -50.000000 1057.400000 -50.000000 1102.600000 -50.000000 1136.500000 C -50.000000 1170.400000 -40.000000 1316.800000 -2.717632 1357.064957" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(l -&gt; m)[0]"><path d="M 1049.250000 1258.000000 C 1049.250000 1296.000000 1049.250000 1328.600000 1049.250000 1362.500000 C 1049.250000 1396.400000 1042.850000 1542.000000 1019.406215 1578.630914" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; l)[0]"><path d="M 1014.164214 1024.914214 C 1057.950000 1068.700000 1067.450000 1090.000000 1060.958612 1126.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; l)[1]"><path d="M 991.066506 1031.761568 C 1011.623894 1070.000000 1019.800000 1090.000000 1029.921480 1126.148144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; m)[0]"><path d="M 949.636002 1031.989723 C 945.767699 1070.000000 944.750000 1102.600000 944.750000 1136.500000 C 944.750000 1170.400000 944.750000 1215.600000 944.750000 1249.500000 C 944.750000 1283.400000 944.750000 1328.600000 944.750000 1362.500000 C 944.750000 1396.400000 947.550000 1542.000000 957.671480 1578.148144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; o)[0]"><path d="M 907.658358 1031.598301 C 878.772124 1070.000000 868.250000 1090.000000 857.399392 1126.168695" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(o -&gt; p)[0]"><path d="M 837.750000 1258.000000 C 837.750000 1296.000000 831.350000 1316.000000 807.906215 1352.630914" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(p -&gt; m)[0]"><path d="M 764.500000 1484.000000 C 764.500000 1522.000000 795.350000 1548.385664 915.217376 1612.052002" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; p)[0]"><path d="M 897.961939 996.208651 C 764.550000 1063.062528 730.750000 1102.600000 730.750000 1136.500000 C 730.750000 1170.400000 733.750000 1316.000000 744.600608 1352.168695" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(q -&gt; n)[0]"><path d="M 928.701627 127.736959 C 950.542035 166.000000 956.250000 198.600000 956.250000 232.500000 C 956.250000 266.400000 956.250000 311.600000 956.250000 345.500000 C 956.250000 379.400000 956.250000 424.600000 956.250000 458.500000 C 956.250000 492.400000 956.250000 537.600000 956.250000 571.500000 C 956.250000 605.400000 956.250000 650.600000 956.250000 684.500000 C 956.250000 718.400000 956.250000 864.000000 956.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(q -&gt; r)[0]"><path d="M 832.969694 93.089126 C 703.750000 159.235561 671.000000 186.000000 671.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(r -&gt; s)[0]"><path d="M 671.000000 354.000000 C 671.000000 392.000000 671.000000 412.000000 671.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(s -&gt; t)[0]"><path d="M 724.544715 579.539230 C 756.453540 618.000000 756.550000 638.000000 726.286318 674.906929" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(t -&gt; u)[0]"><path d="M 621.133898 805.583032 C 591.471239 844.000000 583.750000 864.000000 583.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(u -&gt; o)[0]"><path d="M 642.529887 997.123026 C 771.550000 1063.242177 807.250000 1090.000000 818.100608 1126.168695" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(t -&gt; p)[0]"><path d="M 682.355400 805.970135 C 689.002212 844.000000 690.750000 876.600000 690.750000 910.500000 C 690.750000 944.400000 690.750000 989.600000 690.750000 1023.500000 C 690.750000 1057.400000 690.750000 1102.600000 690.750000 1136.500000 C 690.750000 1170.400000 697.350000 1316.000000 721.546631 1352.661562" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(c -&gt; t)[0]"><path d="M 518.818374 579.676548 C 543.745575 618.000000 563.300000 640.212422 612.579401 686.328963" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(s -&gt; a)[0]"><path d="M 613.150818 538.835761 C 440.400000 610.014768 396.750000 650.600000 396.750000 684.500000 C 396.750000 718.400000 396.750000 763.600000 396.750000 797.500000 C 396.750000 831.400000 396.750000 876.600000 396.750000 910.500000 C 396.750000 944.400000 400.350000 1090.000000 413.395122 1126.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(u -&gt; a)[0]"><path d="M 524.939851 994.632211 C 379.950000 1062.756341 351.450000 1090.000000 381.713682 1126.906929" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><mask id="1919492344" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1356" height="1912">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="381" y="1130" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="437.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="299" y="1582" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="355.500000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="420" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="476.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="213" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="270.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="80" y="1130" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="136.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="0" y="1356" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="55.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="220" y="0" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="277.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="40" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="96.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="42" y="452" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="96.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="42" y="678" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="40" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="96.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="995" y="1130" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1049.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="919" y="1582" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="977.500000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="900" y="904" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="956.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="781" y="1130" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="838.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="708" y="1356" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="764.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="835" y="0" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="892.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="616" y="226" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="671.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="615" y="452" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="671.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="616" y="678" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="671.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="527" y="904" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="584.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 437.000000 1258.000000 C 437.000000 1296.000000 437.000000 1328.600000 437.000000 1362.500000 C 437.000000 1396.400000 429.800000 1542.000000 403.337219 1578.753863" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(c -&gt; a)[0]"><path d="M 476.750000 580.000000 C 476.750000 618.000000 476.750000 650.600000 476.750000 684.500000 C 476.750000 718.400000 476.750000 763.600000 476.750000 797.500000 C 476.750000 831.400000 476.750000 876.600000 476.750000 910.500000 C 476.750000 944.400000 473.150000 1090.000000 460.104878 1126.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(d -&gt; a)[0]"><path d="M 328.655651 1006.748657 C 414.800000 1065.125337 436.750000 1090.000000 436.750000 1126.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(d -&gt; b)[0]"><path d="M 270.000000 1032.000000 C 270.000000 1070.000000 270.000000 1102.600000 270.000000 1136.500000 C 270.000000 1170.400000 270.000000 1215.600000 270.000000 1249.500000 C 270.000000 1283.400000 270.000000 1328.600000 270.000000 1362.500000 C 270.000000 1396.400000 277.600000 1542.000000 305.579667 1578.815351" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(d -&gt; e)[0]"><path d="M 220.417061 1031.586422 C 190.926991 1070.000000 179.050000 1090.000000 163.798930 1126.312072" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(e -&gt; f)[0]"><path d="M 136.500000 1258.000000 C 136.500000 1296.000000 129.300000 1316.000000 102.837219 1352.753863" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(f -&gt; b)[0]"><path d="M 55.500000 1484.000000 C 55.500000 1522.000000 104.300000 1550.400000 295.757211 1622.588784" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(c -&gt; f)[0]"><path d="M 418.301810 528.568866 C 76.050000 608.023318 -10.000000 650.600000 -10.000000 684.500000 C -10.000000 718.400000 -10.000000 763.600000 -10.000000 797.500000 C -10.000000 831.400000 -10.000000 876.600000 -10.000000 910.500000 C -10.000000 944.400000 -10.000000 989.600000 -10.000000 1023.500000 C -10.000000 1057.400000 -10.000000 1102.600000 -10.000000 1136.500000 C -10.000000 1170.400000 -4.200000 1316.000000 16.993128 1352.539875" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(g -&gt; c)[0]"><path d="M 335.491288 96.188828 C 448.150000 159.841000 476.750000 198.600000 476.750000 232.500000 C 476.750000 266.400000 476.750000 412.000000 476.750000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(g -&gt; h)[0]"><path d="M 218.055457 99.796024 C 121.150000 160.546741 96.500000 186.000000 96.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(h -&gt; i)[0]"><path d="M 96.500000 354.000000 C 96.500000 392.000000 96.500000 412.000000 96.500000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(i -&gt; j)[0]"><path d="M 96.500000 580.000000 C 96.500000 618.000000 96.500000 638.000000 96.500000 674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(j -&gt; k)[0]"><path d="M 96.500000 806.000000 C 96.500000 844.000000 96.500000 864.000000 96.500000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(k -&gt; e)[0]"><path d="M 96.500000 1032.000000 C 96.500000 1070.000000 100.100000 1090.000000 113.145122 1126.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(j -&gt; f)[0]"><path d="M 39.916361 784.644718 C -31.700000 839.884642 -50.000000 876.600000 -50.000000 910.500000 C -50.000000 944.400000 -50.000000 989.600000 -50.000000 1023.500000 C -50.000000 1057.400000 -50.000000 1102.600000 -50.000000 1136.500000 C -50.000000 1170.400000 -40.000000 1316.800000 -2.717632 1357.064957" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(l -&gt; m)[0]"><path d="M 1049.250000 1258.000000 C 1049.250000 1296.000000 1049.250000 1328.600000 1049.250000 1362.500000 C 1049.250000 1396.400000 1042.850000 1542.000000 1019.406215 1578.630914" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; l)[0]"><path d="M 1014.164214 1024.914214 C 1057.950000 1068.700000 1067.450000 1090.000000 1060.958612 1126.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; l)[1]"><path d="M 991.066506 1031.761568 C 1011.623894 1070.000000 1019.800000 1090.000000 1029.921480 1126.148144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; m)[0]"><path d="M 949.636002 1031.989723 C 945.767699 1070.000000 944.750000 1102.600000 944.750000 1136.500000 C 944.750000 1170.400000 944.750000 1215.600000 944.750000 1249.500000 C 944.750000 1283.400000 944.750000 1328.600000 944.750000 1362.500000 C 944.750000 1396.400000 947.550000 1542.000000 957.671480 1578.148144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; o)[0]"><path d="M 907.658358 1031.598301 C 878.772124 1070.000000 868.250000 1090.000000 857.399392 1126.168695" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(o -&gt; p)[0]"><path d="M 837.750000 1258.000000 C 837.750000 1296.000000 831.350000 1316.000000 807.906215 1352.630914" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(p -&gt; m)[0]"><path d="M 764.500000 1484.000000 C 764.500000 1522.000000 795.350000 1548.385664 915.217376 1612.052002" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(n -&gt; p)[0]"><path d="M 897.961939 996.208651 C 764.550000 1063.062528 730.750000 1102.600000 730.750000 1136.500000 C 730.750000 1170.400000 733.750000 1316.000000 744.600608 1352.168695" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(q -&gt; n)[0]"><path d="M 928.701627 127.736959 C 950.542035 166.000000 956.250000 198.600000 956.250000 232.500000 C 956.250000 266.400000 956.250000 311.600000 956.250000 345.500000 C 956.250000 379.400000 956.250000 424.600000 956.250000 458.500000 C 956.250000 492.400000 956.250000 537.600000 956.250000 571.500000 C 956.250000 605.400000 956.250000 650.600000 956.250000 684.500000 C 956.250000 718.400000 956.250000 864.000000 956.250000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(q -&gt; r)[0]"><path d="M 832.969694 93.089126 C 703.750000 159.235561 671.000000 186.000000 671.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(r -&gt; s)[0]"><path d="M 671.000000 354.000000 C 671.000000 392.000000 671.000000 412.000000 671.000000 448.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(s -&gt; t)[0]"><path d="M 724.544715 579.539230 C 756.453540 618.000000 756.550000 638.000000 726.286318 674.906929" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(t -&gt; u)[0]"><path d="M 621.133898 805.583032 C 591.471239 844.000000 583.750000 864.000000 583.750000 900.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(u -&gt; o)[0]"><path d="M 642.529887 997.123026 C 771.550000 1063.242177 807.250000 1090.000000 818.100608 1126.168695" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(t -&gt; p)[0]"><path d="M 682.355400 805.970135 C 689.002212 844.000000 690.750000 876.600000 690.750000 910.500000 C 690.750000 944.400000 690.750000 989.600000 690.750000 1023.500000 C 690.750000 1057.400000 690.750000 1102.600000 690.750000 1136.500000 C 690.750000 1170.400000 697.350000 1316.000000 721.546631 1352.661562" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(c -&gt; t)[0]"><path d="M 518.818374 579.676548 C 543.745575 618.000000 563.300000 640.212422 612.579401 686.328963" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(s -&gt; a)[0]"><path d="M 613.150818 538.835761 C 440.400000 610.014768 396.750000 650.600000 396.750000 684.500000 C 396.750000 718.400000 396.750000 763.600000 396.750000 797.500000 C 396.750000 831.400000 396.750000 876.600000 396.750000 910.500000 C 396.750000 944.400000 400.350000 1090.000000 413.395122 1126.236450" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><g id="(u -&gt; a)[0]"><path d="M 524.939851 994.632211 C 379.950000 1062.756341 351.450000 1090.000000 381.713682 1126.906929" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1919492344)"/></g><mask id="1919492344" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1356" height="1912">
 <rect x="-100" y="-100" width="1356" height="1912" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg b/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
index 3d34b6189..6d71ab393 100644
--- a/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1017" height="1952" viewBox="-90 -90 1017 1952"><style type="text/css">
@@ -18,7 +19,27 @@ width="1017" height="1952" viewBox="-90 -90 1017 1952"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="366" y="1182" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="422.500000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="446" y="1634" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="502.500000" y="1700.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="378" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="434.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="445" y="926" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="502.000000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="560" y="1182" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="616.500000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="647" y="1408" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="702.500000" y="1474.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="396" y="12" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="453.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="712" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="768.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="714" y="464" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="768.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="713" y="700" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="768.000000" y="766.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="579" y="926" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="635.500000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="12" y="1182" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="66.500000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="72" y="1634" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="130.500000" y="1700.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="29" y="926" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="153" y="1182" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="210.000000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="153" y="1408" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="209.500000" y="1474.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="47" y="12" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="104.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="240" y="238" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="239" y="464" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="240" y="700" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.500000" y="766.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="288" y="926" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="345.000000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 423.300000 1310.000000 L 423.300000 1574.000000 S 423.300000 1584.000000 433.300000 1584.000000 L 464.350000 1584.000000 S 474.350000 1584.000000 474.350000 1594.000000 L 474.350000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(c -&gt; a)[0]"><path d="M 434.600000 592.000000 L 434.600000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(d -&gt; a)[0]"><path d="M 474.100000 1054.000000 L 474.100000 1093.550000 C 474.100000 1110.450000 457.200000 1093.550000 457.200000 1110.450000 L 457.200000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(d -&gt; b)[0]"><path d="M 502.600000 1054.000000 L 502.600000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(d -&gt; e)[0]"><path d="M 531.100000 1054.000000 L 531.100000 1092.000000 S 531.100000 1102.000000 541.100000 1102.000000 L 588.433333 1102.000000 S 598.433333 1102.000000 598.433333 1112.000000 L 598.433333 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(e -&gt; f)[0]"><path d="M 617.266667 1310.000000 L 617.266667 1348.000000 S 617.266667 1358.000000 627.266667 1358.000000 L 664.850000 1358.000000 S 674.850000 1358.000000 674.850000 1368.000000 L 674.850000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(f -&gt; b)[0]"><path d="M 702.600000 1536.000000 L 702.600000 1574.000000 S 702.600000 1584.000000 692.600000 1584.000000 L 540.850000 1584.000000 S 530.850000 1584.000000 530.850000 1594.000000 L 530.850000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(c -&gt; f)[0]"><path d="M 462.850000 592.000000 L 462.850000 630.000000 S 462.850000 640.000000 472.850000 640.000000 L 692.600000 640.000000 S 702.600000 640.000000 702.600000 650.000000 L 702.600000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(g -&gt; c)[0]"><path d="M 434.600000 140.000000 L 434.600000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(g -&gt; h)[0]"><path d="M 472.600000 140.000000 L 472.600000 178.000000 S 472.600000 188.000000 482.600000 188.000000 L 758.600000 188.000000 S 768.600000 188.000000 768.600000 198.000000 L 768.600000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(h -&gt; i)[0]"><path d="M 768.600000 366.000000 L 768.600000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(i -&gt; j)[0]"><path d="M 768.600000 592.000000 L 768.600000 696.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(j -&gt; k)[0]"><path d="M 750.266667 828.000000 L 750.266667 866.000000 S 750.266667 876.000000 740.266667 876.000000 L 646.100000 876.000000 S 636.100000 876.000000 636.100000 886.000000 L 636.100000 922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(k -&gt; e)[0]"><path d="M 636.100000 1054.000000 L 636.100000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(j -&gt; f)[0]"><path d="M 786.933333 828.000000 L 786.933333 1348.000000 S 786.933333 1358.000000 776.933333 1358.000000 L 740.350000 1358.000000 S 730.350000 1358.000000 730.350000 1368.000000 L 730.350000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(l -&gt; m)[0]"><path d="M 66.500000 1310.000000 L 66.500000 1574.000000 S 66.500000 1584.000000 76.500000 1584.000000 L 91.750000 1584.000000 S 101.750000 1584.000000 101.750000 1594.000000 L 101.750000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; l)[0]"><path d="M 48.333333 1054.000000 L 48.333333 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; l)[1]"><path d="M 67.166667 1054.000000 L 67.166667 1123.250000 C 67.166667 1140.750000 84.666667 1123.250000 84.666667 1140.750000 L 84.666667 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; m)[0]"><path d="M 86.000000 1054.000000 L 86.000000 1112.000000 S 86.000000 1122.000000 96.000000 1122.000000 L 121.000000 1122.000000 S 131.000000 1122.000000 131.000000 1132.000000 L 131.000000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; o)[0]"><path d="M 123.666667 1054.000000 L 123.666667 1092.000000 S 123.666667 1102.000000 133.666667 1102.000000 L 181.000000 1102.000000 S 191.000000 1102.000000 191.000000 1112.000000 L 191.000000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(o -&gt; p)[0]"><path d="M 210.000000 1310.000000 L 210.000000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(p -&gt; m)[0]"><path d="M 210.000000 1536.000000 L 210.000000 1574.000000 S 210.000000 1584.000000 200.000000 1584.000000 L 170.250000 1584.000000 S 160.250000 1584.000000 160.250000 1594.000000 L 160.250000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; p)[0]"><path d="M 104.833333 1054.000000 L 104.833333 1102.000000 S 104.833333 1112.000000 114.833333 1112.000000 L 132.000000 1112.000000 S 142.000000 1112.000000 142.000000 1122.000000 L 142.000000 1348.000000 S 142.000000 1358.000000 152.000000 1358.000000 L 171.750000 1358.000000 S 181.750000 1358.000000 181.750000 1368.000000 L 181.750000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(q -&gt; n)[0]"><path d="M 86.000000 140.000000 L 86.000000 922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(q -&gt; r)[0]"><path d="M 124.000000 140.000000 L 124.000000 178.000000 S 124.000000 188.000000 134.000000 188.000000 L 285.666667 188.000000 S 295.666667 188.000000 295.666667 198.000000 L 295.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(r -&gt; s)[0]"><path d="M 295.666667 366.000000 L 295.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(s -&gt; t)[0]"><path d="M 277.000000 592.000000 L 277.000000 696.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(t -&gt; u)[0]"><path d="M 314.000000 828.000000 L 314.000000 866.000000 S 314.000000 876.000000 324.000000 876.000000 L 335.000000 876.000000 S 345.000000 876.000000 345.000000 886.000000 L 345.000000 922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(u -&gt; o)[0]"><path d="M 326.000000 1054.000000 L 326.000000 1092.000000 S 326.000000 1102.000000 316.000000 1102.000000 L 239.000000 1102.000000 S 229.000000 1102.000000 229.000000 1112.000000 L 229.000000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(t -&gt; p)[0]"><path d="M 277.000000 828.000000 L 277.000000 1348.000000 S 277.000000 1358.000000 267.000000 1358.000000 L 248.250000 1358.000000 S 238.250000 1358.000000 238.250000 1368.000000 L 238.250000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(c -&gt; t)[0]"><path d="M 406.350000 592.000000 L 406.350000 640.000000 S 406.350000 650.000000 396.350000 650.000000 L 324.000000 650.000000 S 314.000000 650.000000 314.000000 660.000000 L 314.000000 696.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(s -&gt; a)[0]"><path d="M 314.333333 592.000000 L 314.333333 630.000000 S 314.333333 640.000000 324.333333 640.000000 L 402.000000 640.000000 S 412.000000 640.000000 412.000000 650.000000 L 412.000000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(u -&gt; a)[0]"><path d="M 364.000000 1054.000000 L 364.000000 1092.000000 S 364.000000 1102.000000 374.000000 1102.000000 L 379.400000 1102.000000 S 389.400000 1102.000000 389.400000 1112.000000 L 389.400000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><mask id="1448461963" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1017" height="1952">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="366" y="1182" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="422.500000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="446" y="1634" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="502.500000" y="1700.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="378" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="434.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="445" y="926" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="502.000000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="560" y="1182" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="616.500000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="647" y="1408" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="702.500000" y="1474.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="396" y="12" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="453.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="h"><g class="shape" ><rect x="712" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="768.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="i"><g class="shape" ><rect x="714" y="464" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="768.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">i</text></g><g id="j"><g class="shape" ><rect x="713" y="700" width="110" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="768.000000" y="766.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">j</text></g><g id="k"><g class="shape" ><rect x="579" y="926" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="635.500000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">k</text></g><g id="l"><g class="shape" ><rect x="12" y="1182" width="109" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="66.500000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">l</text></g><g id="m"><g class="shape" ><rect x="72" y="1634" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="130.500000" y="1700.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">m</text></g><g id="n"><g class="shape" ><rect x="29" y="926" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">n</text></g><g id="o"><g class="shape" ><rect x="153" y="1182" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="210.000000" y="1248.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">o</text></g><g id="p"><g class="shape" ><rect x="153" y="1408" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="209.500000" y="1474.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">p</text></g><g id="q"><g class="shape" ><rect x="47" y="12" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="104.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">q</text></g><g id="r"><g class="shape" ><rect x="240" y="238" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">r</text></g><g id="s"><g class="shape" ><rect x="239" y="464" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">s</text></g><g id="t"><g class="shape" ><rect x="240" y="700" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.500000" y="766.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">t</text></g><g id="u"><g class="shape" ><rect x="288" y="926" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="345.000000" y="992.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">u</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 423.300000 1310.000000 L 423.300000 1574.000000 S 423.300000 1584.000000 433.300000 1584.000000 L 464.350000 1584.000000 S 474.350000 1584.000000 474.350000 1594.000000 L 474.350000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(c -&gt; a)[0]"><path d="M 434.600000 592.000000 L 434.600000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(d -&gt; a)[0]"><path d="M 474.100000 1054.000000 L 474.100000 1093.550000 C 474.100000 1110.450000 457.200000 1093.550000 457.200000 1110.450000 L 457.200000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(d -&gt; b)[0]"><path d="M 502.600000 1054.000000 L 502.600000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(d -&gt; e)[0]"><path d="M 531.100000 1054.000000 L 531.100000 1092.000000 S 531.100000 1102.000000 541.100000 1102.000000 L 588.433333 1102.000000 S 598.433333 1102.000000 598.433333 1112.000000 L 598.433333 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(e -&gt; f)[0]"><path d="M 617.266667 1310.000000 L 617.266667 1348.000000 S 617.266667 1358.000000 627.266667 1358.000000 L 664.850000 1358.000000 S 674.850000 1358.000000 674.850000 1368.000000 L 674.850000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(f -&gt; b)[0]"><path d="M 702.600000 1536.000000 L 702.600000 1574.000000 S 702.600000 1584.000000 692.600000 1584.000000 L 540.850000 1584.000000 S 530.850000 1584.000000 530.850000 1594.000000 L 530.850000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(c -&gt; f)[0]"><path d="M 462.850000 592.000000 L 462.850000 630.000000 S 462.850000 640.000000 472.850000 640.000000 L 692.600000 640.000000 S 702.600000 640.000000 702.600000 650.000000 L 702.600000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(g -&gt; c)[0]"><path d="M 434.600000 140.000000 L 434.600000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(g -&gt; h)[0]"><path d="M 472.600000 140.000000 L 472.600000 178.000000 S 472.600000 188.000000 482.600000 188.000000 L 758.600000 188.000000 S 768.600000 188.000000 768.600000 198.000000 L 768.600000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(h -&gt; i)[0]"><path d="M 768.600000 366.000000 L 768.600000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(i -&gt; j)[0]"><path d="M 768.600000 592.000000 L 768.600000 696.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(j -&gt; k)[0]"><path d="M 750.266667 828.000000 L 750.266667 866.000000 S 750.266667 876.000000 740.266667 876.000000 L 646.100000 876.000000 S 636.100000 876.000000 636.100000 886.000000 L 636.100000 922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(k -&gt; e)[0]"><path d="M 636.100000 1054.000000 L 636.100000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(j -&gt; f)[0]"><path d="M 786.933333 828.000000 L 786.933333 1348.000000 S 786.933333 1358.000000 776.933333 1358.000000 L 740.350000 1358.000000 S 730.350000 1358.000000 730.350000 1368.000000 L 730.350000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(l -&gt; m)[0]"><path d="M 66.500000 1310.000000 L 66.500000 1574.000000 S 66.500000 1584.000000 76.500000 1584.000000 L 91.750000 1584.000000 S 101.750000 1584.000000 101.750000 1594.000000 L 101.750000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; l)[0]"><path d="M 48.333333 1054.000000 L 48.333333 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; l)[1]"><path d="M 67.166667 1054.000000 L 67.166667 1123.250000 C 67.166667 1140.750000 84.666667 1123.250000 84.666667 1140.750000 L 84.666667 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; m)[0]"><path d="M 86.000000 1054.000000 L 86.000000 1112.000000 S 86.000000 1122.000000 96.000000 1122.000000 L 121.000000 1122.000000 S 131.000000 1122.000000 131.000000 1132.000000 L 131.000000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; o)[0]"><path d="M 123.666667 1054.000000 L 123.666667 1092.000000 S 123.666667 1102.000000 133.666667 1102.000000 L 181.000000 1102.000000 S 191.000000 1102.000000 191.000000 1112.000000 L 191.000000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(o -&gt; p)[0]"><path d="M 210.000000 1310.000000 L 210.000000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(p -&gt; m)[0]"><path d="M 210.000000 1536.000000 L 210.000000 1574.000000 S 210.000000 1584.000000 200.000000 1584.000000 L 170.250000 1584.000000 S 160.250000 1584.000000 160.250000 1594.000000 L 160.250000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(n -&gt; p)[0]"><path d="M 104.833333 1054.000000 L 104.833333 1102.000000 S 104.833333 1112.000000 114.833333 1112.000000 L 132.000000 1112.000000 S 142.000000 1112.000000 142.000000 1122.000000 L 142.000000 1348.000000 S 142.000000 1358.000000 152.000000 1358.000000 L 171.750000 1358.000000 S 181.750000 1358.000000 181.750000 1368.000000 L 181.750000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(q -&gt; n)[0]"><path d="M 86.000000 140.000000 L 86.000000 922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(q -&gt; r)[0]"><path d="M 124.000000 140.000000 L 124.000000 178.000000 S 124.000000 188.000000 134.000000 188.000000 L 285.666667 188.000000 S 295.666667 188.000000 295.666667 198.000000 L 295.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(r -&gt; s)[0]"><path d="M 295.666667 366.000000 L 295.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(s -&gt; t)[0]"><path d="M 277.000000 592.000000 L 277.000000 696.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(t -&gt; u)[0]"><path d="M 314.000000 828.000000 L 314.000000 866.000000 S 314.000000 876.000000 324.000000 876.000000 L 335.000000 876.000000 S 345.000000 876.000000 345.000000 886.000000 L 345.000000 922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(u -&gt; o)[0]"><path d="M 326.000000 1054.000000 L 326.000000 1092.000000 S 326.000000 1102.000000 316.000000 1102.000000 L 239.000000 1102.000000 S 229.000000 1102.000000 229.000000 1112.000000 L 229.000000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(t -&gt; p)[0]"><path d="M 277.000000 828.000000 L 277.000000 1348.000000 S 277.000000 1358.000000 267.000000 1358.000000 L 248.250000 1358.000000 S 238.250000 1358.000000 238.250000 1368.000000 L 238.250000 1404.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(c -&gt; t)[0]"><path d="M 406.350000 592.000000 L 406.350000 640.000000 S 406.350000 650.000000 396.350000 650.000000 L 324.000000 650.000000 S 314.000000 650.000000 314.000000 660.000000 L 314.000000 696.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(s -&gt; a)[0]"><path d="M 314.333333 592.000000 L 314.333333 630.000000 S 314.333333 640.000000 324.333333 640.000000 L 402.000000 640.000000 S 412.000000 640.000000 412.000000 650.000000 L 412.000000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><g id="(u -&gt; a)[0]"><path d="M 364.000000 1054.000000 L 364.000000 1092.000000 S 364.000000 1102.000000 374.000000 1102.000000 L 379.400000 1102.000000 S 389.400000 1102.000000 389.400000 1112.000000 L 389.400000 1178.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1448461963)"/></g><mask id="1448461963" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1017" height="1952">
 <rect x="-100" y="-100" width="1017" height="1952" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg b/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
index e0cbbcdbf..6676d8fe9 100644
--- a/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="536" height="556" viewBox="-102 -102 536 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="536" height="556" viewBox="-102 -102 536 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="foo baz"><g class="shape" ><rect x="173" y="0" width="159" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Foo Baz</text></g><g id="1"><g class="shape" ><rect x="1" y="0" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="2"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="hello"><g class="shape" ><rect x="182" y="226" width="140" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1241709240)"/></g><g id="(foo baz -&gt; hello)[0]"><path d="M 252.000000 128.000000 C 252.000000 166.000000 252.000000 186.000000 252.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1241709240)"/></g><mask id="1241709240" maskUnits="userSpaceOnUse" x="-100" y="-100" width="536" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 baz"><g class="shape" ><rect x="173" y="0" width="159" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Foo Baz</text></g><g id="1"><g class="shape" ><rect x="1" y="0" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="2"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="hello"><g class="shape" ><rect x="182" y="226" width="140" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1241709240)"/></g><g id="(foo baz -&gt; hello)[0]"><path d="M 252.000000 128.000000 C 252.000000 166.000000 252.000000 186.000000 252.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1241709240)"/></g><mask id="1241709240" maskUnits="userSpaceOnUse" x="-100" y="-100" width="536" height="556">
 <rect x="-100" y="-100" width="536" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg b/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
index c7f67c7c5..e588fdede 100644
--- a/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="495" height="556" viewBox="-90 -90 495 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="495" height="556" viewBox="-90 -90 495 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="foo baz"><g class="shape" ><rect x="12" y="12" width="159" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="91.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Foo Baz</text></g><g id="1"><g class="shape" ><rect x="191" y="12" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="247.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="2"><g class="shape" ><rect x="190" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="246.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="hello"><g class="shape" ><rect x="21" y="238" width="140" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="91.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 247.000000 140.000000 L 247.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1189412536)"/></g><g id="(foo baz -&gt; hello)[0]"><path d="M 91.500000 140.000000 L 91.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1189412536)"/></g><mask id="1189412536" maskUnits="userSpaceOnUse" x="-100" y="-100" width="495" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 baz"><g class="shape" ><rect x="12" y="12" width="159" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="91.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Foo Baz</text></g><g id="1"><g class="shape" ><rect x="191" y="12" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="247.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">1</text></g><g id="2"><g class="shape" ><rect x="190" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="246.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">2</text></g><g id="hello"><g class="shape" ><rect x="21" y="238" width="140" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="91.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="(1 -&gt; 2)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 247.000000 140.000000 L 247.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1189412536)"/></g><g id="(foo baz -&gt; hello)[0]"><path d="M 91.500000 140.000000 L 91.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1189412536)"/></g><mask id="1189412536" maskUnits="userSpaceOnUse" x="-100" y="-100" width="495" height="556">
 <rect x="-100" y="-100" width="495" height="556" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 3ae77faf6..7c7d22c0c 100644
--- a/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="683" height="1334" viewBox="-102 -102 683 1334"><style type="text/css">
@@ -18,7 +19,27 @@ width="683" height="1334" viewBox="-102 -102 683 1334"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="479" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="239.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="143" y="1004" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="316" y="778" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.000000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="143" y="778" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="318" y="552" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="316" y="326" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.000000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="a.b"><g class="shape" ><rect x="90" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.h"><g class="shape" ><rect x="317" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 115.959389 177.809184 C 97.962389 216.000000 93.250000 236.000000 93.250000 251.000000 C 93.250000 266.000000 93.250000 298.600000 93.250000 332.500000 C 93.250000 366.400000 93.250000 411.600000 93.250000 445.500000 C 93.250000 479.400000 93.250000 524.600000 93.250000 558.500000 C 93.250000 592.400000 93.250000 637.600000 93.250000 671.500000 C 93.250000 705.400000 93.250000 750.600000 93.250000 784.500000 C 93.250000 818.400000 103.250000 964.600000 140.505118 1004.090425" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(d -&gt; c)[0]"><path d="M 373.250000 906.000000 C 373.250000 944.000000 349.850000 969.240346 259.601787 1028.018721" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(e -&gt; c)[0]"><path d="M 199.750000 906.000000 C 199.750000 944.000000 199.750000 964.000000 199.750000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(f -&gt; d)[0]"><path d="M 373.250000 680.000000 C 373.250000 718.000000 373.250000 738.000000 373.250000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(a -&gt; e)[0]"><path d="M 199.750000 228.000000 C 199.750000 266.000000 199.750000 298.600000 199.750000 332.500000 C 199.750000 366.400000 199.750000 411.600000 199.750000 445.500000 C 199.750000 479.400000 199.750000 524.600000 199.750000 558.500000 C 199.750000 592.400000 199.750000 738.000000 199.750000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(g -&gt; f)[0]"><path d="M 373.250000 454.000000 C 373.250000 492.000000 373.250000 512.000000 373.250000 548.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(a.h -&gt; g)[0]"><path d="M 373.250000 178.000000 C 373.250000 216.000000 373.250000 286.000000 373.250000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><mask id="484882326" maskUnits="userSpaceOnUse" x="-100" y="-100" width="683" height="1334">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="479" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="239.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="143" y="1004" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="1070.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="316" y="778" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.000000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="143" y="778" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="199.500000" y="844.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="318" y="552" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.500000" y="618.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="316" y="326" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.000000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="a.b"><g class="shape" ><rect x="90" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.h"><g class="shape" ><rect x="317" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="373.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 115.959389 177.809184 C 97.962389 216.000000 93.250000 236.000000 93.250000 251.000000 C 93.250000 266.000000 93.250000 298.600000 93.250000 332.500000 C 93.250000 366.400000 93.250000 411.600000 93.250000 445.500000 C 93.250000 479.400000 93.250000 524.600000 93.250000 558.500000 C 93.250000 592.400000 93.250000 637.600000 93.250000 671.500000 C 93.250000 705.400000 93.250000 750.600000 93.250000 784.500000 C 93.250000 818.400000 103.250000 964.600000 140.505118 1004.090425" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(d -&gt; c)[0]"><path d="M 373.250000 906.000000 C 373.250000 944.000000 349.850000 969.240346 259.601787 1028.018721" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(e -&gt; c)[0]"><path d="M 199.750000 906.000000 C 199.750000 944.000000 199.750000 964.000000 199.750000 1000.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(f -&gt; d)[0]"><path d="M 373.250000 680.000000 C 373.250000 718.000000 373.250000 738.000000 373.250000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(a -&gt; e)[0]"><path d="M 199.750000 228.000000 C 199.750000 266.000000 199.750000 298.600000 199.750000 332.500000 C 199.750000 366.400000 199.750000 411.600000 199.750000 445.500000 C 199.750000 479.400000 199.750000 524.600000 199.750000 558.500000 C 199.750000 592.400000 199.750000 738.000000 199.750000 774.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(g -&gt; f)[0]"><path d="M 373.250000 454.000000 C 373.250000 492.000000 373.250000 512.000000 373.250000 548.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><g id="(a.h -&gt; g)[0]"><path d="M 373.250000 178.000000 C 373.250000 216.000000 373.250000 286.000000 373.250000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#484882326)"/></g><mask id="484882326" maskUnits="userSpaceOnUse" x="-100" y="-100" width="683" height="1334">
 <rect x="-100" y="-100" width="683" height="1334" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 a4ade6117..81ef22293 100644
--- a/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="600" height="1389" viewBox="-90 -90 600 1389"><style type="text/css">
@@ -18,7 +19,27 @@ width="600" height="1389" viewBox="-90 -90 600 1389"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="210.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="98" y="1071" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.500000" y="1137.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="97" y="845" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.000000" y="911.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="230" y="619" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="685.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="99" y="619" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.500000" y="685.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="97" y="393" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.000000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.h"><g class="shape" ><rect x="220" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 143.500000 215.000000 L 143.500000 333.000000 S 143.500000 343.000000 133.500000 343.000000 L 96.500000 343.000000 S 86.500000 343.000000 86.500000 353.000000 L 86.500000 1011.000000 S 86.500000 1021.000000 96.500000 1021.000000 L 116.250000 1021.000000 S 126.250000 1021.000000 126.250000 1031.000000 L 126.250000 1067.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(d -&gt; c)[0]"><path d="M 154.500000 973.000000 L 154.500000 1067.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(e -&gt; c)[0]"><path d="M 286.500000 747.000000 L 286.500000 1011.000000 S 286.500000 1021.000000 276.500000 1021.000000 L 192.750000 1021.000000 S 182.750000 1021.000000 182.750000 1031.000000 L 182.750000 1067.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(f -&gt; d)[0]"><path d="M 154.500000 747.000000 L 154.500000 841.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(a -&gt; e)[0]"><path d="M 286.500000 290.000000 L 286.500000 615.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(g -&gt; f)[0]"><path d="M 154.500000 521.000000 L 154.500000 615.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(a.h -&gt; g)[0]"><path d="M 276.500000 215.000000 L 276.500000 333.000000 S 276.500000 343.000000 266.500000 343.000000 L 164.500000 343.000000 S 154.500000 343.000000 154.500000 353.000000 L 154.500000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><mask id="3207896693" maskUnits="userSpaceOnUse" x="-100" y="-100" width="600" height="1389">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="210.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="98" y="1071" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.500000" y="1137.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="97" y="845" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.000000" y="911.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="e"><g class="shape" ><rect x="230" y="619" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="685.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="f"><g class="shape" ><rect x="99" y="619" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.500000" y="685.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g"><g class="shape" ><rect x="97" y="393" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="154.000000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a.h"><g class="shape" ><rect x="220" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">h</text></g><g id="(a.b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 143.500000 215.000000 L 143.500000 333.000000 S 143.500000 343.000000 133.500000 343.000000 L 96.500000 343.000000 S 86.500000 343.000000 86.500000 353.000000 L 86.500000 1011.000000 S 86.500000 1021.000000 96.500000 1021.000000 L 116.250000 1021.000000 S 126.250000 1021.000000 126.250000 1031.000000 L 126.250000 1067.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(d -&gt; c)[0]"><path d="M 154.500000 973.000000 L 154.500000 1067.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(e -&gt; c)[0]"><path d="M 286.500000 747.000000 L 286.500000 1011.000000 S 286.500000 1021.000000 276.500000 1021.000000 L 192.750000 1021.000000 S 182.750000 1021.000000 182.750000 1031.000000 L 182.750000 1067.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(f -&gt; d)[0]"><path d="M 154.500000 747.000000 L 154.500000 841.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(a -&gt; e)[0]"><path d="M 286.500000 290.000000 L 286.500000 615.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(g -&gt; f)[0]"><path d="M 154.500000 521.000000 L 154.500000 615.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><g id="(a.h -&gt; g)[0]"><path d="M 276.500000 215.000000 L 276.500000 333.000000 S 276.500000 343.000000 266.500000 343.000000 L 164.500000 343.000000 S 154.500000 343.000000 154.500000 353.000000 L 154.500000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3207896693)"/></g><mask id="3207896693" maskUnits="userSpaceOnUse" x="-100" y="-100" width="600" height="1389">
 <rect x="-100" y="-100" width="600" height="1389" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 21f5dbf88..96d652be7 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="710" height="982" viewBox="-102 -102 710 982"><style type="text/css">
@@ -18,7 +19,27 @@ width="710" height="982" viewBox="-102 -102 710 982"><style type="text/css">
 }
 
 ]]>
-</style><g id="top"><g class="shape" ><rect x="0" y="0" width="506" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="253.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">top</text></g><g id="a"><g class="shape" ><rect x="42" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="98.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="215" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="271.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="388" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="444.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="bottom"><g class="shape" ><rect x="0" y="552" width="504" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="252.000000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">bottom</text></g><g id="top.start"><g class="shape" ><rect x="183" y="50" width="140" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="253.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">start</text></g><g id="bottom.end"><g class="shape" ><rect x="207" y="602" width="132" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="273.000000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">end</text></g><g id="(top.start -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 181.383882 165.210461 C 115.000000 213.606452 98.000000 286.000000 98.000000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(top.start -&gt; b)[0]"><path d="M 263.350016 177.975099 C 269.407080 216.000000 271.000000 286.000000 271.000000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(top.start -&gt; c)[0]"><path d="M 324.721315 155.431982 C 419.800000 211.682723 444.000000 286.000000 444.000000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(a -&gt; bottom.end)[0]"><path d="M 98.000000 454.000000 C 98.000000 492.000000 119.800000 566.000000 203.634283 619.838530" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(b -&gt; bottom.end)[0]"><path d="M 271.000000 454.000000 C 271.000000 492.000000 271.200000 562.000000 271.920016 598.000800" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(c -&gt; bottom.end)[0]"><path d="M 444.000000 454.000000 C 444.000000 492.000000 423.000000 565.800000 342.342822 618.803288" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><mask id="706568155" maskUnits="userSpaceOnUse" x="-100" y="-100" width="710" height="982">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="top"><g class="shape" ><rect x="0" y="0" width="506" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="253.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">top</text></g><g id="a"><g class="shape" ><rect x="42" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="98.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="215" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="271.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="388" y="326" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="444.500000" y="392.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="bottom"><g class="shape" ><rect x="0" y="552" width="504" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="252.000000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">bottom</text></g><g id="top.start"><g class="shape" ><rect x="183" y="50" width="140" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="253.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">start</text></g><g id="bottom.end"><g class="shape" ><rect x="207" y="602" width="132" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="273.000000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">end</text></g><g id="(top.start -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 181.383882 165.210461 C 115.000000 213.606452 98.000000 286.000000 98.000000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(top.start -&gt; b)[0]"><path d="M 263.350016 177.975099 C 269.407080 216.000000 271.000000 286.000000 271.000000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(top.start -&gt; c)[0]"><path d="M 324.721315 155.431982 C 419.800000 211.682723 444.000000 286.000000 444.000000 322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(a -&gt; bottom.end)[0]"><path d="M 98.000000 454.000000 C 98.000000 492.000000 119.800000 566.000000 203.634283 619.838530" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(b -&gt; bottom.end)[0]"><path d="M 271.000000 454.000000 C 271.000000 492.000000 271.200000 562.000000 271.920016 598.000800" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><g id="(c -&gt; bottom.end)[0]"><path d="M 444.000000 454.000000 C 444.000000 492.000000 423.000000 565.800000 342.342822 618.803288" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#706568155)"/></g><mask id="706568155" maskUnits="userSpaceOnUse" x="-100" y="-100" width="710" height="982">
 <rect x="-100" y="-100" width="710" height="982" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 e5a801e6c..d864e3855 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="634" height="1102" viewBox="-90 -90 634 1102"><style type="text/css">
@@ -18,7 +19,27 @@ width="634" height="1102" viewBox="-90 -90 634 1102"><style type="text/css">
 }
 
 ]]>
-</style><g id="top"><g class="shape" ><rect x="108" y="12" width="290" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="253.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">top</text></g><g id="a"><g class="shape" ><rect x="63" y="393" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="119.500000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="196" y="393" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.500000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="329" y="393" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="385.500000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="bottom"><g class="shape" ><rect x="12" y="634" width="282" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="153.000000" y="667.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">bottom</text></g><g id="top.start"><g class="shape" ><rect x="183" y="87" width="140" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="253.000000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">start</text></g><g id="bottom.end"><g class="shape" ><rect x="87" y="709" width="132" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="153.000000" y="775.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">end</text></g><g id="(top.start -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 218.000000 215.000000 L 218.000000 333.000000 S 218.000000 343.000000 208.000000 343.000000 L 130.000000 343.000000 S 120.000000 343.000000 120.000000 353.000000 L 120.000000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(top.start -&gt; b)[0]"><path d="M 253.000000 215.000000 L 253.000000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(top.start -&gt; c)[0]"><path d="M 288.000000 215.000000 L 288.000000 333.000000 S 288.000000 343.000000 298.000000 343.000000 L 376.000000 343.000000 S 386.000000 343.000000 386.000000 353.000000 L 386.000000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(a -&gt; bottom.end)[0]"><path d="M 120.000000 521.000000 L 120.000000 705.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(b -&gt; bottom.end)[0]"><path d="M 253.000000 521.000000 L 253.000000 559.000000 S 253.000000 569.000000 243.000000 569.000000 L 163.000000 569.000000 S 153.000000 569.000000 153.000000 579.000000 L 153.000000 705.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(c -&gt; bottom.end)[0]"><path d="M 386.000000 521.000000 L 386.000000 569.000000 S 386.000000 579.000000 376.000000 579.000000 L 196.000000 579.000000 S 186.000000 579.000000 186.000000 589.000000 L 186.000000 705.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><mask id="4259267286" maskUnits="userSpaceOnUse" x="-100" y="-100" width="634" height="1102">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="top"><g class="shape" ><rect x="108" y="12" width="290" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="253.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">top</text></g><g id="a"><g class="shape" ><rect x="63" y="393" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="119.500000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="196" y="393" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="252.500000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="329" y="393" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="385.500000" y="459.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="bottom"><g class="shape" ><rect x="12" y="634" width="282" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="153.000000" y="667.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">bottom</text></g><g id="top.start"><g class="shape" ><rect x="183" y="87" width="140" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="253.000000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">start</text></g><g id="bottom.end"><g class="shape" ><rect x="87" y="709" width="132" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="153.000000" y="775.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">end</text></g><g id="(top.start -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 218.000000 215.000000 L 218.000000 333.000000 S 218.000000 343.000000 208.000000 343.000000 L 130.000000 343.000000 S 120.000000 343.000000 120.000000 353.000000 L 120.000000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(top.start -&gt; b)[0]"><path d="M 253.000000 215.000000 L 253.000000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(top.start -&gt; c)[0]"><path d="M 288.000000 215.000000 L 288.000000 333.000000 S 288.000000 343.000000 298.000000 343.000000 L 376.000000 343.000000 S 386.000000 343.000000 386.000000 353.000000 L 386.000000 389.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(a -&gt; bottom.end)[0]"><path d="M 120.000000 521.000000 L 120.000000 705.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(b -&gt; bottom.end)[0]"><path d="M 253.000000 521.000000 L 253.000000 559.000000 S 253.000000 569.000000 243.000000 569.000000 L 163.000000 569.000000 S 153.000000 569.000000 153.000000 579.000000 L 153.000000 705.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><g id="(c -&gt; bottom.end)[0]"><path d="M 386.000000 521.000000 L 386.000000 569.000000 S 386.000000 579.000000 376.000000 579.000000 L 196.000000 579.000000 S 186.000000 579.000000 186.000000 589.000000 L 186.000000 705.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4259267286)"/></g><mask id="4259267286" maskUnits="userSpaceOnUse" x="-100" y="-100" width="634" height="1102">
 <rect x="-100" y="-100" width="634" height="1102" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 30566e3a0..f26f9a901 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1316" height="1420" viewBox="-102 -102 1316 1420"><style type="text/css">
@@ -18,7 +19,27 @@ width="1316" height="1420" viewBox="-102 -102 1316 1420"><style type="text/css">
 }
 
 ]]>
-</style><g id="root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="492" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="556.000000" y="149.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container"><g class="shape" ><rect x="0" y="254" width="1112" height="962" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="556.000000" y="287.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="492" y="304" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="556.000000" y="453.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left"><g class="shape" ><rect x="40" y="558" width="496" height="608" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="288.000000" y="587.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">left</text></g><g id="container.right"><g class="shape" ><rect x="576" y="558" width="496" height="608" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="824.000000" y="587.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">right</text></g><g id="container.left.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="224" y="608" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="288.000000" y="757.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left.inner"><g class="shape" ><rect x="80" y="862" width="416" height="254" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="288.000000" y="887.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="760" y="608" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="824.000000" y="757.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="616" y="862" width="416" height="254" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="824.000000" y="887.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.left.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="130" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="194.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.left.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="318" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="382.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="container.right.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="666" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="730.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="854" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="918.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 556.000000 156.000000 C 556.000000 194.000000 556.000000 264.000000 556.000000 300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/></g><g id="container.left.(root -&gt; inner.left)[0]"><path d="M 229.818024 763.607563 C 201.401575 802.000000 194.000000 872.000000 194.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="198.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.left.(root -&gt; inner.right)[0]"><path d="M 346.181976 763.607563 C 374.598425 802.000000 382.000000 872.000000 382.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="378.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.right.(root -&gt; inner.left)[0]"><path d="M 765.818024 763.607563 C 737.401575 802.000000 730.000000 872.000000 730.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="734.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 882.181976 763.607563 C 910.598425 802.000000 918.000000 872.000000 918.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="914.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.(root -&gt; left.root)[0]"><path d="M 490.192662 412.184821 C 328.800000 488.665672 288.000000 568.000000 288.000000 604.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="352.000000" y="483.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to left container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 621.807338 412.184821 C 783.200000 488.665672 824.000000 568.000000 824.000000 604.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="760.000000" y="483.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to right container root</text></g><mask id="387629512" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1316" height="1420">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="492" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="556.000000" y="149.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container"><g class="shape" ><rect x="0" y="254" width="1112" height="962" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="556.000000" y="287.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="492" y="304" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="556.000000" y="453.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left"><g class="shape" ><rect x="40" y="558" width="496" height="608" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="288.000000" y="587.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">left</text></g><g id="container.right"><g class="shape" ><rect x="576" y="558" width="496" height="608" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="824.000000" y="587.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">right</text></g><g id="container.left.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="224" y="608" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="288.000000" y="757.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left.inner"><g class="shape" ><rect x="80" y="862" width="416" height="254" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="288.000000" y="887.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="760" y="608" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="824.000000" y="757.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="616" y="862" width="416" height="254" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="824.000000" y="887.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.left.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="130" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="194.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.left.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="318" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="382.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="container.right.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="666" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="730.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="854" y="912" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="918.000000" y="1061.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 556.000000 156.000000 C 556.000000 194.000000 556.000000 264.000000 556.000000 300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/></g><g id="container.left.(root -&gt; inner.left)[0]"><path d="M 229.818024 763.607563 C 201.401575 802.000000 194.000000 872.000000 194.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="198.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.left.(root -&gt; inner.right)[0]"><path d="M 346.181976 763.607563 C 374.598425 802.000000 382.000000 872.000000 382.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="378.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.right.(root -&gt; inner.left)[0]"><path d="M 765.818024 763.607563 C 737.401575 802.000000 730.000000 872.000000 730.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="734.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 882.181976 763.607563 C 910.598425 802.000000 918.000000 872.000000 918.000000 908.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="914.000000" y="838.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.(root -&gt; left.root)[0]"><path d="M 490.192662 412.184821 C 328.800000 488.665672 288.000000 568.000000 288.000000 604.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="352.000000" y="483.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to left container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 621.807338 412.184821 C 783.200000 488.665672 824.000000 568.000000 824.000000 604.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#387629512)"/><text class="text-italic" x="760.000000" y="483.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to right container root</text></g><mask id="387629512" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1316" height="1420">
 <rect x="-100" y="-100" width="1316" height="1420" fill="white"></rect>
 <rect x="160.000000" y="822.000000" width="76" height="21" fill="black"></rect>
 <rect x="335.000000" y="822.000000" width="86" height="21" fill="black"></rect>
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 137f8af63..e27957884 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1526" height="1507" viewBox="-90 -90 1526 1507"><style type="text/css">
@@ -18,7 +19,27 @@ width="1526" height="1507" viewBox="-90 -90 1526 1507"><style type="text/css">
 }
 
 ]]>
-</style><g id="root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="279" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="343.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container"><g class="shape" ><rect x="12" y="271" width="1322" height="1044" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="673.000000" y="304.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="279" y="346" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="343.000000" y="495.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left"><g class="shape" ><rect x="87" y="566" width="576" height="674" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="375.000000" y="595.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">left</text></g><g id="container.right"><g class="shape" ><rect x="683" y="566" width="576" height="674" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="971.000000" y="595.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">right</text></g><g id="container.left.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="258" y="641" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="322.000000" y="790.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left.inner"><g class="shape" ><rect x="162" y="861" width="426" height="304" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="375.000000" y="886.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="854" y="641" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="918.000000" y="790.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="758" y="861" width="426" height="304" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="971.000000" y="886.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.left.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="237" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.left.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="385" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="449.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="container.right.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="833" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="897.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="981" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1045.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 343.666667 168.000000 L 343.666667 342.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/></g><g id="container.left.(root -&gt; inner.left)[0]"><path d="M 301.000000 797.000000 L 301.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="301.000000" y="871.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.left.(root -&gt; inner.right)[0]"><path d="M 343.666667 797.000000 L 343.666667 795.000000 S 343.666667 805.000000 353.666667 805.000000 L 383.000000 805.000000 S 393.000000 805.000000 393.000000 815.000000 L 393.000000 836.000000 S 393.000000 846.000000 403.000000 846.000000 L 439.000000 846.000000 S 449.000000 846.000000 449.000000 856.000000 L 449.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="416.000000" y="852.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.right.(root -&gt; inner.left)[0]"><path d="M 897.000000 797.000000 L 897.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="897.000000" y="871.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 939.666667 797.000000 L 939.666667 795.000000 S 939.666667 805.000000 949.666667 805.000000 L 979.000000 805.000000 S 989.000000 805.000000 989.000000 815.000000 L 989.000000 836.000000 S 989.000000 846.000000 999.000000 846.000000 L 1035.000000 846.000000 S 1045.000000 846.000000 1045.000000 856.000000 L 1045.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="1012.000000" y="852.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.(root -&gt; left.root)[0]"><path d="M 322.333333 502.000000 L 322.333333 637.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="322.000000" y="576.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to left container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 365.000000 502.000000 L 365.000000 500.000000 S 365.000000 510.000000 375.000000 510.000000 L 908.333333 510.000000 S 918.333333 510.000000 918.333333 520.000000 L 918.333333 637.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="702.000000" y="516.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to right container root</text></g><mask id="1284823021" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1526" height="1507">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="279" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="343.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container"><g class="shape" ><rect x="12" y="271" width="1322" height="1044" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="673.000000" y="304.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="279" y="346" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="343.000000" y="495.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left"><g class="shape" ><rect x="87" y="566" width="576" height="674" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="375.000000" y="595.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">left</text></g><g id="container.right"><g class="shape" ><rect x="683" y="566" width="576" height="674" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="971.000000" y="595.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">right</text></g><g id="container.left.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="258" y="641" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="322.000000" y="790.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.left.inner"><g class="shape" ><rect x="162" y="861" width="426" height="304" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="375.000000" y="886.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.right.root"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="854" y="641" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="918.000000" y="790.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">root</text></g><g id="container.right.inner"><g class="shape" ><rect x="758" y="861" width="426" height="304" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="971.000000" y="886.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">inner</text></g><g id="container.left.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="237" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="301.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.left.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="385" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="449.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="container.right.inner.left"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="833" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="897.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">left</text></g><g id="container.right.inner.right"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="981" y="936" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1045.000000" y="1085.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">right</text></g><g id="(root -&gt; container.root)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 343.666667 168.000000 L 343.666667 342.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/></g><g id="container.left.(root -&gt; inner.left)[0]"><path d="M 301.000000 797.000000 L 301.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="301.000000" y="871.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.left.(root -&gt; inner.right)[0]"><path d="M 343.666667 797.000000 L 343.666667 795.000000 S 343.666667 805.000000 353.666667 805.000000 L 383.000000 805.000000 S 393.000000 805.000000 393.000000 815.000000 L 393.000000 836.000000 S 393.000000 846.000000 403.000000 846.000000 L 439.000000 846.000000 S 449.000000 846.000000 449.000000 856.000000 L 449.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="416.000000" y="852.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.right.(root -&gt; inner.left)[0]"><path d="M 897.000000 797.000000 L 897.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="897.000000" y="871.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner left</text></g><g id="container.right.(root -&gt; inner.right)[0]"><path d="M 939.666667 797.000000 L 939.666667 795.000000 S 939.666667 805.000000 949.666667 805.000000 L 979.000000 805.000000 S 989.000000 805.000000 989.000000 815.000000 L 989.000000 836.000000 S 989.000000 846.000000 999.000000 846.000000 L 1035.000000 846.000000 S 1045.000000 846.000000 1045.000000 856.000000 L 1045.000000 932.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="1012.000000" y="852.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to inner right</text></g><g id="container.(root -&gt; left.root)[0]"><path d="M 322.333333 502.000000 L 322.333333 637.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="322.000000" y="576.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to left container root</text></g><g id="container.(root -&gt; right.root)[0]"><path d="M 365.000000 502.000000 L 365.000000 500.000000 S 365.000000 510.000000 375.000000 510.000000 L 908.333333 510.000000 S 918.333333 510.000000 918.333333 520.000000 L 918.333333 637.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1284823021)"/><text class="text-italic" x="702.000000" y="516.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to right container root</text></g><mask id="1284823021" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1526" height="1507">
 <rect x="-100" y="-100" width="1526" height="1507" fill="white"></rect>
 <rect x="263.000000" y="855.000000" width="76" height="21" fill="black"></rect>
 <rect x="373.000000" y="836.000000" width="86" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/p/dagre/sketch.exp.svg b/e2etests/testdata/stable/p/dagre/sketch.exp.svg
index 88d53bc02..caec929ea 100644
--- a/e2etests/testdata/stable/p/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2061" height="680" viewBox="-102 -102 2061 680"><style type="text/css">
@@ -18,7 +19,27 @@ width="2061" height="680" viewBox="-102 -102 2061 680"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/p/elk/sketch.exp.svg b/e2etests/testdata/stable/p/elk/sketch.exp.svg
index c4dc24c84..59837a6d0 100644
--- a/e2etests/testdata/stable/p/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2061" height="680" viewBox="-90 -90 2061 680"><style type="text/css">
@@ -18,7 +19,27 @@ width="2061" height="680" viewBox="-90 -90 2061 680"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/pre/dagre/sketch.exp.svg b/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
index ae52f8777..a369446bc 100644
--- a/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="806" height="826" viewBox="-102 -102 806 826"><style type="text/css">
@@ -18,7 +19,27 @@ width="806" height="826" viewBox="-102 -102 806 826"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/pre/elk/sketch.exp.svg b/e2etests/testdata/stable/pre/elk/sketch.exp.svg
index c67fb7465..efc635ff2 100644
--- a/e2etests/testdata/stable/pre/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="806" height="826" viewBox="-90 -90 806 826"><style type="text/css">
@@ -18,7 +19,27 @@ width="806" height="826" viewBox="-90 -90 806 826"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg b/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
index 4ed7ab47d..427cabe4b 100644
--- a/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="656" height="556" viewBox="-102 -102 656 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="656" height="556" viewBox="-102 -102 656 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="x"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="136" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="193.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="z"><g class="shape" ><rect x="273" y="0" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 114.656769 23.673956 C 142.333333 4.958855 151.500000 0.000000 154.250000 0.000000 C 157.000000 0.000000 160.666667 12.600000 163.416667 31.500000 C 166.166667 50.400000 166.166667 75.600000 163.416667 94.500000 C 160.666667 113.400000 142.333333 121.041145 116.313538 103.446364" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(x -&gt; x)[1]"><path d="M 114.790267 33.970064 C 169.000000 6.972332 186.500000 0.000000 191.750000 0.000000 C 197.000000 0.000000 204.000000 12.600000 209.250000 31.500000 C 214.500000 50.400000 214.500000 75.600000 209.250000 94.500000 C 204.000000 113.400000 169.000000 119.027668 116.580535 92.921531" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(x -&gt; y)[0]"><path d="M 56.500000 128.000000 C 56.500000 166.000000 72.350000 189.145321 132.671104 239.173099" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(z -&gt; y)[0]"><path d="M 329.000000 128.000000 C 329.000000 166.000000 313.200000 189.200000 253.069698 239.435442" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(z -&gt; z)[0]"><path d="M 386.653964 23.803600 C 414.333333 4.985612 423.500000 0.000000 426.250000 0.000000 C 429.000000 0.000000 432.666667 12.600000 435.416667 31.500000 C 438.166667 50.400000 438.166667 75.600000 435.416667 94.500000 C 432.666667 113.400000 414.333333 121.014388 388.307927 103.320857" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/><text class="text-italic" x="438.500000" y="64.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2541740366" maskUnits="userSpaceOnUse" x="-100" y="-100" width="656" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="136" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="193.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="z"><g class="shape" ><rect x="273" y="0" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="329.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 114.656769 23.673956 C 142.333333 4.958855 151.500000 0.000000 154.250000 0.000000 C 157.000000 0.000000 160.666667 12.600000 163.416667 31.500000 C 166.166667 50.400000 166.166667 75.600000 163.416667 94.500000 C 160.666667 113.400000 142.333333 121.041145 116.313538 103.446364" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(x -&gt; x)[1]"><path d="M 114.790267 33.970064 C 169.000000 6.972332 186.500000 0.000000 191.750000 0.000000 C 197.000000 0.000000 204.000000 12.600000 209.250000 31.500000 C 214.500000 50.400000 214.500000 75.600000 209.250000 94.500000 C 204.000000 113.400000 169.000000 119.027668 116.580535 92.921531" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(x -&gt; y)[0]"><path d="M 56.500000 128.000000 C 56.500000 166.000000 72.350000 189.145321 132.671104 239.173099" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(z -&gt; y)[0]"><path d="M 329.000000 128.000000 C 329.000000 166.000000 313.200000 189.200000 253.069698 239.435442" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/></g><g id="(z -&gt; z)[0]"><path d="M 386.653964 23.803600 C 414.333333 4.985612 423.500000 0.000000 426.250000 0.000000 C 429.000000 0.000000 432.666667 12.600000 435.416667 31.500000 C 438.166667 50.400000 438.166667 75.600000 435.416667 94.500000 C 432.666667 113.400000 414.333333 121.014388 388.307927 103.320857" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2541740366)"/><text class="text-italic" x="438.500000" y="64.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="2541740366" maskUnits="userSpaceOnUse" x="-100" y="-100" width="656" height="556">
 <rect x="-100" y="-100" width="656" height="556" fill="white"></rect>
 <rect x="422.000000" y="48.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg b/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
index 27863bedc..adb980627 100644
--- a/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="592" height="556" viewBox="-88 -90 592 556"><style type="text/css">
@@ -18,7 +19,27 @@ width="592" height="556" viewBox="-88 -90 592 556"><style type="text/css">
 }
 
 ]]>
-</style><g id="x"><g class="shape" ><rect x="72" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="128.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="90" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="z"><g class="shape" ><rect x="290" y="12" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="346.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 70.000000 62.400000 L 32.000000 62.400000 S 22.000000 62.400000 22.000000 72.400000 L 22.000000 77.600000 S 22.000000 87.600000 32.000000 87.600000 L 68.000000 87.600000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(x -&gt; x)[1]"><path d="M 70.000000 37.200000 L 22.000000 37.200000 S 12.000000 37.200000 12.000000 47.200000 L 12.000000 102.800000 S 12.000000 112.800000 22.000000 112.800000 L 68.000000 112.800000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(x -&gt; y)[0]"><path d="M 128.500000 140.000000 L 128.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(z -&gt; y)[0]"><path d="M 346.000000 140.000000 L 346.000000 178.000000 S 346.000000 188.000000 336.000000 188.000000 L 176.500000 188.000000 S 166.500000 188.000000 166.500000 198.000000 L 166.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(z -&gt; z)[0]"><path d="M 288.000000 54.000000 L 250.000000 54.000000 S 240.000000 54.000000 240.000000 64.000000 L 240.000000 86.000000 S 240.000000 96.000000 250.000000 96.000000 L 286.000000 96.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/><text class="text-italic" x="240.500000" y="81.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="1441263338" maskUnits="userSpaceOnUse" x="-100" y="-100" width="592" height="556">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="128.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="90" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="z"><g class="shape" ><rect x="290" y="12" width="112" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="346.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">z</text></g><g id="(x -&gt; x)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 70.000000 62.400000 L 32.000000 62.400000 S 22.000000 62.400000 22.000000 72.400000 L 22.000000 77.600000 S 22.000000 87.600000 32.000000 87.600000 L 68.000000 87.600000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(x -&gt; x)[1]"><path d="M 70.000000 37.200000 L 22.000000 37.200000 S 12.000000 37.200000 12.000000 47.200000 L 12.000000 102.800000 S 12.000000 112.800000 22.000000 112.800000 L 68.000000 112.800000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(x -&gt; y)[0]"><path d="M 128.500000 140.000000 L 128.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(z -&gt; y)[0]"><path d="M 346.000000 140.000000 L 346.000000 178.000000 S 346.000000 188.000000 336.000000 188.000000 L 176.500000 188.000000 S 166.500000 188.000000 166.500000 198.000000 L 166.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/></g><g id="(z -&gt; z)[0]"><path d="M 288.000000 54.000000 L 250.000000 54.000000 S 240.000000 54.000000 240.000000 64.000000 L 240.000000 86.000000 S 240.000000 96.000000 250.000000 96.000000 L 286.000000 96.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1441263338)"/><text class="text-italic" x="240.500000" y="81.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">hello</text></g><mask id="1441263338" maskUnits="userSpaceOnUse" x="-100" y="-100" width="592" height="556">
 <rect x="-100" y="-100" width="592" height="556" fill="white"></rect>
 <rect x="224.000000" y="65.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
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 ede5133f7..da52a5275 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2696" height="1398" viewBox="-78 -28 2696 1398"><style type="text/css">
@@ -18,7 +19,27 @@ width="2696" height="1398" viewBox="-78 -28 2696 1398"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="234" width="487" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="267.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="602" y="74" width="177" height="286" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="690.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="690.500000" dy="0.000000">an</tspan><tspan x="690.500000" dy="16.909091">actor</tspan><tspan x="690.500000" dy="16.909091">with</tspan><tspan x="690.500000" dy="16.909091">a</tspan><tspan x="690.500000" dy="16.909091">really</tspan><tspan x="690.500000" dy="16.909091">long</tspan><tspan x="690.500000" dy="16.909091">label</tspan><tspan x="690.500000" dy="16.909091">that</tspan><tspan x="690.500000" dy="16.909091">will</tspan><tspan x="690.500000" dy="16.909091">break</tspan><tspan x="690.500000" dy="16.909091">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1038" y="234" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1113.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">simple</text></g><g id="e"><g class="shape" ><rect x="1484" y="234" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1574.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a short one</text></g><g id="b"><g class="shape" ><rect x="1742" y="234" width="163" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1823.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">far away</text></g><g id="f"><g class="shape" ><rect x="1955" y="234" width="561" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2235.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 267.500000 362.000000 L 267.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(c -- )[0]"><path d="M 690.500000 362.000000 L 690.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(d -- )[0]"><path d="M 1113.000000 362.000000 L 1113.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(e -- )[0]"><path d="M 1574.000000 362.000000 L 1574.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(b -- )[0]"><path d="M 1823.500000 362.000000 L 1823.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(f -- )[0]"><path d="M 2235.500000 362.000000 L 2235.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 269.500000 490.000000 L 1819.500000 490.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1046.000000" y="496.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; b)[1]"><path d="M 269.500000 620.000000 L 1819.500000 620.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1045.500000" y="626.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 692.500000 750.000000 L 1109.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="902.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; d)[0]"><path d="M 269.500000 880.000000 L 1109.000000 880.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="690.500000" y="886.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1115.000000 1010.000000 L 1570.000000 1010.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1343.500000" y="1016.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 269.500000 1140.000000 L 2231.500000 1140.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/></g><mask id="3635504124" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2696" height="1398">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="234" width="487" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="267.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="602" y="74" width="177" height="286" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="690.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="690.500000" dy="0.000000">an</tspan><tspan x="690.500000" dy="16.909091">actor</tspan><tspan x="690.500000" dy="16.909091">with</tspan><tspan x="690.500000" dy="16.909091">a</tspan><tspan x="690.500000" dy="16.909091">really</tspan><tspan x="690.500000" dy="16.909091">long</tspan><tspan x="690.500000" dy="16.909091">label</tspan><tspan x="690.500000" dy="16.909091">that</tspan><tspan x="690.500000" dy="16.909091">will</tspan><tspan x="690.500000" dy="16.909091">break</tspan><tspan x="690.500000" dy="16.909091">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1038" y="234" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1113.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">simple</text></g><g id="e"><g class="shape" ><rect x="1484" y="234" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1574.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a short one</text></g><g id="b"><g class="shape" ><rect x="1742" y="234" width="163" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1823.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">far away</text></g><g id="f"><g class="shape" ><rect x="1955" y="234" width="561" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2235.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 267.500000 362.000000 L 267.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(c -- )[0]"><path d="M 690.500000 362.000000 L 690.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(d -- )[0]"><path d="M 1113.000000 362.000000 L 1113.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(e -- )[0]"><path d="M 1574.000000 362.000000 L 1574.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(b -- )[0]"><path d="M 1823.500000 362.000000 L 1823.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(f -- )[0]"><path d="M 2235.500000 362.000000 L 2235.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 269.500000 490.000000 L 1819.500000 490.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1046.000000" y="496.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; b)[1]"><path d="M 269.500000 620.000000 L 1819.500000 620.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1045.500000" y="626.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 692.500000 750.000000 L 1109.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="902.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; d)[0]"><path d="M 269.500000 880.000000 L 1109.000000 880.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="690.500000" y="886.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1115.000000 1010.000000 L 1570.000000 1010.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1343.500000" y="1016.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 269.500000 1140.000000 L 2231.500000 1140.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/></g><mask id="3635504124" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2696" height="1398">
 <rect x="-100" y="-100" width="2696" height="1398" fill="white"></rect>
 <rect x="1028.000000" y="480.000000" width="36" height="21" fill="black"></rect>
 <rect x="840.000000" y="610.000000" width="411" height="21" fill="black"></rect>
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 ede5133f7..da52a5275 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2696" height="1398" viewBox="-78 -28 2696 1398"><style type="text/css">
@@ -18,7 +19,27 @@ width="2696" height="1398" viewBox="-78 -28 2696 1398"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="234" width="487" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="267.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="602" y="74" width="177" height="286" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="690.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="690.500000" dy="0.000000">an</tspan><tspan x="690.500000" dy="16.909091">actor</tspan><tspan x="690.500000" dy="16.909091">with</tspan><tspan x="690.500000" dy="16.909091">a</tspan><tspan x="690.500000" dy="16.909091">really</tspan><tspan x="690.500000" dy="16.909091">long</tspan><tspan x="690.500000" dy="16.909091">label</tspan><tspan x="690.500000" dy="16.909091">that</tspan><tspan x="690.500000" dy="16.909091">will</tspan><tspan x="690.500000" dy="16.909091">break</tspan><tspan x="690.500000" dy="16.909091">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1038" y="234" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1113.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">simple</text></g><g id="e"><g class="shape" ><rect x="1484" y="234" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1574.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a short one</text></g><g id="b"><g class="shape" ><rect x="1742" y="234" width="163" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1823.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">far away</text></g><g id="f"><g class="shape" ><rect x="1955" y="234" width="561" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2235.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 267.500000 362.000000 L 267.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(c -- )[0]"><path d="M 690.500000 362.000000 L 690.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(d -- )[0]"><path d="M 1113.000000 362.000000 L 1113.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(e -- )[0]"><path d="M 1574.000000 362.000000 L 1574.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(b -- )[0]"><path d="M 1823.500000 362.000000 L 1823.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(f -- )[0]"><path d="M 2235.500000 362.000000 L 2235.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 269.500000 490.000000 L 1819.500000 490.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1046.000000" y="496.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; b)[1]"><path d="M 269.500000 620.000000 L 1819.500000 620.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1045.500000" y="626.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 692.500000 750.000000 L 1109.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="902.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; d)[0]"><path d="M 269.500000 880.000000 L 1109.000000 880.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="690.500000" y="886.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1115.000000 1010.000000 L 1570.000000 1010.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1343.500000" y="1016.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 269.500000 1140.000000 L 2231.500000 1140.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/></g><mask id="3635504124" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2696" height="1398">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="234" width="487" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="267.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">an actor with a really long label that will break everything</text></g><g id="c"><g class="shape" ><rect x="602" y="74" width="177" height="286" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="690.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="690.500000" dy="0.000000">an</tspan><tspan x="690.500000" dy="16.909091">actor</tspan><tspan x="690.500000" dy="16.909091">with</tspan><tspan x="690.500000" dy="16.909091">a</tspan><tspan x="690.500000" dy="16.909091">really</tspan><tspan x="690.500000" dy="16.909091">long</tspan><tspan x="690.500000" dy="16.909091">label</tspan><tspan x="690.500000" dy="16.909091">that</tspan><tspan x="690.500000" dy="16.909091">will</tspan><tspan x="690.500000" dy="16.909091">break</tspan><tspan x="690.500000" dy="16.909091">everything</tspan></text></g><g id="d"><g class="shape" ><rect x="1038" y="234" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1113.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">simple</text></g><g id="e"><g class="shape" ><rect x="1484" y="234" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1574.000000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a short one</text></g><g id="b"><g class="shape" ><rect x="1742" y="234" width="163" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1823.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">far away</text></g><g id="f"><g class="shape" ><rect x="1955" y="234" width="561" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2235.500000" y="300.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what if there were no labels between this actor and the previous one</text></g><g id="(a -- )[0]"><path d="M 267.500000 362.000000 L 267.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(c -- )[0]"><path d="M 690.500000 362.000000 L 690.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(d -- )[0]"><path d="M 1113.000000 362.000000 L 1113.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(e -- )[0]"><path d="M 1574.000000 362.000000 L 1574.000000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(b -- )[0]"><path d="M 1823.500000 362.000000 L 1823.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(f -- )[0]"><path d="M 2235.500000 362.000000 L 2235.500000 1269.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3635504124)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 269.500000 490.000000 L 1819.500000 490.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1046.000000" y="496.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; b)[1]"><path d="M 269.500000 620.000000 L 1819.500000 620.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1045.500000" y="626.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(c -&gt; d)[0]"><path d="M 692.500000 750.000000 L 1109.000000 750.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="902.000000" y="756.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">short</text></g><g id="(a -&gt; d)[0]"><path d="M 269.500000 880.000000 L 1109.000000 880.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="690.500000" y="886.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1115.000000 1010.000000 L 1570.000000 1010.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/><text class="text-italic" x="1343.500000" y="1016.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">long label for testing purposes and it must be really, really long</text></g><g id="(a -&gt; f)[0]"><path d="M 269.500000 1140.000000 L 2231.500000 1140.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3635504124)"/></g><mask id="3635504124" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2696" height="1398">
 <rect x="-100" y="-100" width="2696" height="1398" fill="white"></rect>
 <rect x="1028.000000" y="480.000000" width="36" height="21" fill="black"></rect>
 <rect x="840.000000" y="610.000000" width="411" height="21" fill="black"></rect>
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 27909bcdd..b3642eb08 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="5181" height="2986" viewBox="-78 -28 5181 2986"><style type="text/css">
@@ -18,7 +19,27 @@ width="5181" height="2986" viewBox="-78 -28 5181 2986"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><path d="M 24 132 V 213 H 99 V 258 L 129 213 H 174 V 132 H 24 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="175.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a label</text></g><g id="b"><g class="shape" ><ellipse class="shape" cx="356.000000" cy="186.000000" rx="75.000000" ry="72.000000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="356.000000" y="181.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="356.000000" dy="0.000000">b</tspan><tspan x="356.000000" dy="21.000000">labels</tspan></text></g><g id="c"><g class="shape" ><rect class="shape" x="481" y="74" width="302" height="184" style="fill:#FFFFFF;stroke:#EDF0FD;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="481.000000" y="74.000000" width="302.000000" height="92.000000" fill="#EDF0FD" /><text class="text-mono" x="632.000000" y="129.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">a class</text><line x1="481.000000" y1="166.000000" x2="783.000000" y2="166.000000" style="stroke-width:1;stroke:#EDF0FD" /><text class="text-mono" x="491.000000" y="194.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 24 132 V 213 H 99 V 258 L 129 213 H 174 V 132 H 24 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="175.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a label</text></g><g id="b"><g class="shape" ><ellipse class="shape" cx="356.000000" cy="186.000000" rx="75.000000" ry="72.000000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="356.000000" y="181.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="356.000000" dy="0.000000">b</tspan><tspan x="356.000000" dy="21.000000">labels</tspan></text></g><g id="c"><g class="shape" ><rect class="shape" x="481" y="74" width="302" height="184" style="fill:#FFFFFF;stroke:#EDF0FD;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="481.000000" y="74.000000" width="302.000000" height="92.000000" fill="#EDF0FD" /><text class="text-mono" x="632.000000" y="129.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">a class</text><line x1="481.000000" y1="166.000000" x2="783.000000" y2="166.000000" style="stroke-width:1;stroke:#EDF0FD" /><text class="text-mono" x="491.000000" y="194.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
 <text class="text-mono" x="511.000000" y="194.000000" style="text-anchor:start;font-size:20px;fill:#EDF0FD">public() bool</text>
 <text class="text-mono" x="763.000000" y="194.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text><text class="text-mono" x="491.000000" y="240.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="511.000000" y="240.000000" style="text-anchor:start;font-size:20px;fill:#EDF0FD">private() int</text>
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 27909bcdd..b3642eb08 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="5181" height="2986" viewBox="-78 -28 5181 2986"><style type="text/css">
@@ -18,7 +19,27 @@ width="5181" height="2986" viewBox="-78 -28 5181 2986"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><path d="M 24 132 V 213 H 99 V 258 L 129 213 H 174 V 132 H 24 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="175.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a label</text></g><g id="b"><g class="shape" ><ellipse class="shape" cx="356.000000" cy="186.000000" rx="75.000000" ry="72.000000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="356.000000" y="181.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="356.000000" dy="0.000000">b</tspan><tspan x="356.000000" dy="21.000000">labels</tspan></text></g><g id="c"><g class="shape" ><rect class="shape" x="481" y="74" width="302" height="184" style="fill:#FFFFFF;stroke:#EDF0FD;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="481.000000" y="74.000000" width="302.000000" height="92.000000" fill="#EDF0FD" /><text class="text-mono" x="632.000000" y="129.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">a class</text><line x1="481.000000" y1="166.000000" x2="783.000000" y2="166.000000" style="stroke-width:1;stroke:#EDF0FD" /><text class="text-mono" x="491.000000" y="194.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 24 132 V 213 H 99 V 258 L 129 213 H 174 V 132 H 24 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="175.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a label</text></g><g id="b"><g class="shape" ><ellipse class="shape" cx="356.000000" cy="186.000000" rx="75.000000" ry="72.000000" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="356.000000" y="181.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="356.000000" dy="0.000000">b</tspan><tspan x="356.000000" dy="21.000000">labels</tspan></text></g><g id="c"><g class="shape" ><rect class="shape" x="481" y="74" width="302" height="184" style="fill:#FFFFFF;stroke:#EDF0FD;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="481.000000" y="74.000000" width="302.000000" height="92.000000" fill="#EDF0FD" /><text class="text-mono" x="632.000000" y="129.000000" style="text-anchor:middle;font-size:24px;fill:#FFFFFF">a class</text><line x1="481.000000" y1="166.000000" x2="783.000000" y2="166.000000" style="stroke-width:1;stroke:#EDF0FD" /><text class="text-mono" x="491.000000" y="194.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">+</text>
 <text class="text-mono" x="511.000000" y="194.000000" style="text-anchor:start;font-size:20px;fill:#EDF0FD">public() bool</text>
 <text class="text-mono" x="763.000000" y="194.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">void</text><text class="text-mono" x="491.000000" y="240.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="511.000000" y="240.000000" style="text-anchor:start;font-size:20px;fill:#EDF0FD">private() int</text>
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 be7b96ccf..ff9aa774f 100644
--- a/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="756" height="718" viewBox="-78 -28 756 718"><style type="text/css">
@@ -18,7 +19,27 @@ width="756" height="718" viewBox="-78 -28 756 718"><style type="text/css">
 }
 
 ]]>
-</style><g id="alice"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alice</text></g><g id="bob"><g class="shape" ><rect x="426" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="501.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bob</text></g><g id="(alice -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(bob -- )[0]"><path d="M 501.000000 202.000000 L 501.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 497.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.500000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 499.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">The ability to play bridge or golf as if they were games</text></g><mask id="1775804900" maskUnits="userSpaceOnUse" x="-100" y="-100" width="756" height="718">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alice</text></g><g id="bob"><g class="shape" ><rect x="426" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="501.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bob</text></g><g id="(alice -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(bob -- )[0]"><path d="M 501.000000 202.000000 L 501.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 497.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.500000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 499.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">The ability to play bridge or golf as if they were games</text></g><mask id="1775804900" maskUnits="userSpaceOnUse" x="-100" y="-100" width="756" height="718">
 <rect x="-100" y="-100" width="756" height="718" fill="white"></rect>
 <rect x="176.000000" y="320.000000" width="249" height="21" fill="black"></rect>
 <rect x="124.000000" y="450.000000" width="352" height="21" fill="black"></rect>
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 be7b96ccf..ff9aa774f 100644
--- a/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="756" height="718" viewBox="-78 -28 756 718"><style type="text/css">
@@ -18,7 +19,27 @@ width="756" height="718" viewBox="-78 -28 756 718"><style type="text/css">
 }
 
 ]]>
-</style><g id="alice"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alice</text></g><g id="bob"><g class="shape" ><rect x="426" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="501.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bob</text></g><g id="(alice -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(bob -- )[0]"><path d="M 501.000000 202.000000 L 501.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 497.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.500000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 499.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">The ability to play bridge or golf as if they were games</text></g><mask id="1775804900" maskUnits="userSpaceOnUse" x="-100" y="-100" width="756" height="718">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alice</text></g><g id="bob"><g class="shape" ><rect x="426" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="501.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bob</text></g><g id="(alice -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(bob -- )[0]"><path d="M 501.000000 202.000000 L 501.000000 589.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1775804900)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 497.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.500000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">what does it mean to be well-adjusted</text></g><g id="(bob -&gt; alice)[0]"><path d="M 499.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1775804900)"/><text class="text-italic" x="300.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">The ability to play bridge or golf as if they were games</text></g><mask id="1775804900" maskUnits="userSpaceOnUse" x="-100" y="-100" width="756" height="718">
 <rect x="-100" y="-100" width="756" height="718" fill="white"></rect>
 <rect x="176.000000" y="320.000000" width="249" height="21" fill="black"></rect>
 <rect x="124.000000" y="450.000000" width="352" height="21" fill="black"></rect>
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 5d32f66da..65bec6a73 100644
--- a/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1149" height="2270" viewBox="-78 -28 1149 2270"><style type="text/css">
@@ -18,7 +19,27 @@ width="1149" height="2270" viewBox="-78 -28 1149 2270"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="b.t1"><g class="shape" ><rect x="343" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="593" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="339" y="1094" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="49" y="420" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="69.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="275" y="550" width="398" height="730" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="308.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="299" y="1330" width="468" height="466" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="333.000000" y="1351.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group b</text></g><g id="choo"><g class="shape blend" ><rect x="717" y="1846" width="254" height="216" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="741.000000" y="1867.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="299" y="810" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="343.000000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nested guy</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 590.000000 L 595.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 720.000000 L 353.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.000000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">ey</text></g><g id="(c -&gt; b)[1]"><path d="M 597.000000 850.000000 L 353.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 357.000000 980.000000 L 589.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 361.000000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 591.000000 1240.000000 L 359.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b -&gt; c)[1]"><path d="M 351.000000 1370.000000 L 595.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[2]"><path d="M 597.000000 1756.000000 L 353.000000 1756.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="1762.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 470.5 1500 H 706.1836 C 707.3544 1500 708.479 1500.4563 709.3189 1501.272 L 725.6353 1517.12 C 726.5077 1517.9674 727 1519.1318 727 1520.348 V 1625.5 C 727 1625.7761 726.7761 1626 726.5 1626 H 470.5 C 470.2239 1626 470 1625.7761 470 1625.5 V 1500.5 C 470 1500.2239 470.2239 1500 470.5 1500 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 725.918 1626 H 471.082 C 470.4328 1626 470 1625.5671 470 1624.9178 V 1501.0822 C 470 1500.4329 470.4328 1500 471.082 1500 H 705.3607 C 706.0099 1500 706.4427 1500.4329 706.4427 1501.0822 V 1518.1808 C 706.4427 1519.4794 707.3083 1520.5616 708.823 1520.5616 H 725.918 C 726.5672 1520.5616 727 1520.9945 727 1521.6436 V 1624.9178 C 726 1625.5671 726.5672 1626 725.918 1626 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="598.500000" y="1566.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 767.5 1886 H 910.1836 C 911.3544 1886 912.479 1886.4563 913.3189 1887.272 L 929.6353 1903.12 C 930.5077 1903.9674 931 1905.1318 931 1906.348 V 2011.5 C 931 2011.7761 930.7761 2012 930.5 2012 H 767.5 C 767.2239 2012 767 2011.7761 767 2011.5 V 1886.5 C 767 1886.2239 767.2239 1886 767.5 1886 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 929.918 2012 H 768.082 C 767.4328 2012 767 2011.5671 767 2010.9178 V 1887.0822 C 767 1886.4329 767.4328 1886 768.082 1886 H 909.3607 C 910.0099 1886 910.4427 1886.4329 910.4427 1887.0822 V 1904.1808 C 910.4427 1905.4794 911.3083 1906.5616 912.823 1906.5616 H 929.918 C 930.5672 1906.5616 931 1906.9945 931 1907.6436 V 2010.9178 C 930 2011.5671 930.5672 2012 929.918 2012 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1952.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this note</text></g><mask id="1747228497" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1149" height="2270">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="b.t1"><g class="shape" ><rect x="343" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="593" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="339" y="1094" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="49" y="420" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="69.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="275" y="550" width="398" height="730" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="308.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="299" y="1330" width="468" height="466" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="333.000000" y="1351.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group b</text></g><g id="choo"><g class="shape blend" ><rect x="717" y="1846" width="254" height="216" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="741.000000" y="1867.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="299" y="810" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="343.000000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nested guy</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 590.000000 L 595.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 720.000000 L 353.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.000000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">ey</text></g><g id="(c -&gt; b)[1]"><path d="M 597.000000 850.000000 L 353.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 357.000000 980.000000 L 589.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 361.000000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 591.000000 1240.000000 L 359.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b -&gt; c)[1]"><path d="M 351.000000 1370.000000 L 595.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[2]"><path d="M 597.000000 1756.000000 L 353.000000 1756.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="1762.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 470.5 1500 H 706.1836 C 707.3544 1500 708.479 1500.4563 709.3189 1501.272 L 725.6353 1517.12 C 726.5077 1517.9674 727 1519.1318 727 1520.348 V 1625.5 C 727 1625.7761 726.7761 1626 726.5 1626 H 470.5 C 470.2239 1626 470 1625.7761 470 1625.5 V 1500.5 C 470 1500.2239 470.2239 1500 470.5 1500 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 725.918 1626 H 471.082 C 470.4328 1626 470 1625.5671 470 1624.9178 V 1501.0822 C 470 1500.4329 470.4328 1500 471.082 1500 H 705.3607 C 706.0099 1500 706.4427 1500.4329 706.4427 1501.0822 V 1518.1808 C 706.4427 1519.4794 707.3083 1520.5616 708.823 1520.5616 H 725.918 C 726.5672 1520.5616 727 1520.9945 727 1521.6436 V 1624.9178 C 726 1625.5671 726.5672 1626 725.918 1626 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="598.500000" y="1566.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 767.5 1886 H 910.1836 C 911.3544 1886 912.479 1886.4563 913.3189 1887.272 L 929.6353 1903.12 C 930.5077 1903.9674 931 1905.1318 931 1906.348 V 2011.5 C 931 2011.7761 930.7761 2012 930.5 2012 H 767.5 C 767.2239 2012 767 2011.7761 767 2011.5 V 1886.5 C 767 1886.2239 767.2239 1886 767.5 1886 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 929.918 2012 H 768.082 C 767.4328 2012 767 2011.5671 767 2010.9178 V 1887.0822 C 767 1886.4329 767.4328 1886 768.082 1886 H 909.3607 C 910.0099 1886 910.4427 1886.4329 910.4427 1887.0822 V 1904.1808 C 910.4427 1905.4794 911.3083 1906.5616 912.823 1906.5616 H 929.918 C 930.5672 1906.5616 931 1906.9945 931 1907.6436 V 2010.9178 C 930 2011.5671 930.5672 2012 929.918 2012 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1952.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this note</text></g><mask id="1747228497" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1149" height="2270">
 <rect x="-100" y="-100" width="1149" height="2270" fill="white"></rect>
 <rect x="54.000000" y="425.000000" width="30" height="21" fill="black"></rect>
 <rect x="280.000000" y="555.000000" width="57" height="21" fill="black"></rect>
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 5d32f66da..65bec6a73 100644
--- a/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1149" height="2270" viewBox="-78 -28 1149 2270"><style type="text/css">
@@ -18,7 +19,27 @@ width="1149" height="2270" viewBox="-78 -28 1149 2270"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="b.t1"><g class="shape" ><rect x="343" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="593" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="339" y="1094" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="49" y="420" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="69.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="275" y="550" width="398" height="730" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="308.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="299" y="1330" width="468" height="466" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="333.000000" y="1351.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group b</text></g><g id="choo"><g class="shape blend" ><rect x="717" y="1846" width="254" height="216" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="741.000000" y="1867.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="299" y="810" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="343.000000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nested guy</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 590.000000 L 595.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 720.000000 L 353.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.000000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">ey</text></g><g id="(c -&gt; b)[1]"><path d="M 597.000000 850.000000 L 353.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 357.000000 980.000000 L 589.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 361.000000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 591.000000 1240.000000 L 359.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b -&gt; c)[1]"><path d="M 351.000000 1370.000000 L 595.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[2]"><path d="M 597.000000 1756.000000 L 353.000000 1756.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="1762.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 470.5 1500 H 706.1836 C 707.3544 1500 708.479 1500.4563 709.3189 1501.272 L 725.6353 1517.12 C 726.5077 1517.9674 727 1519.1318 727 1520.348 V 1625.5 C 727 1625.7761 726.7761 1626 726.5 1626 H 470.5 C 470.2239 1626 470 1625.7761 470 1625.5 V 1500.5 C 470 1500.2239 470.2239 1500 470.5 1500 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 725.918 1626 H 471.082 C 470.4328 1626 470 1625.5671 470 1624.9178 V 1501.0822 C 470 1500.4329 470.4328 1500 471.082 1500 H 705.3607 C 706.0099 1500 706.4427 1500.4329 706.4427 1501.0822 V 1518.1808 C 706.4427 1519.4794 707.3083 1520.5616 708.823 1520.5616 H 725.918 C 726.5672 1520.5616 727 1520.9945 727 1521.6436 V 1624.9178 C 726 1625.5671 726.5672 1626 725.918 1626 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="598.500000" y="1566.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 767.5 1886 H 910.1836 C 911.3544 1886 912.479 1886.4563 913.3189 1887.272 L 929.6353 1903.12 C 930.5077 1903.9674 931 1905.1318 931 1906.348 V 2011.5 C 931 2011.7761 930.7761 2012 930.5 2012 H 767.5 C 767.2239 2012 767 2011.7761 767 2011.5 V 1886.5 C 767 1886.2239 767.2239 1886 767.5 1886 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 929.918 2012 H 768.082 C 767.4328 2012 767 2011.5671 767 2010.9178 V 1887.0822 C 767 1886.4329 767.4328 1886 768.082 1886 H 909.3607 C 910.0099 1886 910.4427 1886.4329 910.4427 1887.0822 V 1904.1808 C 910.4427 1905.4794 911.3083 1906.5616 912.823 1906.5616 H 929.918 C 930.5672 1906.5616 931 1906.9945 931 1907.6436 V 2010.9178 C 930 2011.5671 930.5672 2012 929.918 2012 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1952.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this note</text></g><mask id="1747228497" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1149" height="2270">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2141.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1747228497)"/></g><g id="b.t1"><g class="shape" ><rect x="343" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="c.t1"><g class="shape" ><rect x="593" y="964" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.t1.t2"><g class="shape" ><rect x="339" y="1094" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="ggg"><g class="shape blend" ><rect x="49" y="420" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="69.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ggg</text></g><g id="group 1"><g class="shape blend" ><rect x="275" y="550" width="398" height="730" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="308.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group 1</text></g><g id="group b"><g class="shape blend" ><rect x="299" y="1330" width="468" height="466" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="333.000000" y="1351.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">group b</text></g><g id="choo"><g class="shape blend" ><rect x="717" y="1846" width="254" height="216" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="741.000000" y="1867.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">choo</text></g><g id="group 1.nested guy"><g class="shape blend" ><rect x="299" y="810" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="343.000000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">nested guy</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">lala</text></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 590.000000 L 595.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 720.000000 L 353.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.000000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">ey</text></g><g id="(c -&gt; b)[1]"><path d="M 597.000000 850.000000 L 353.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="(b.t1 -&gt; c.t1)[0]"><path d="M 357.000000 980.000000 L 589.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b.t1.t2 -&gt; c.t1)[0]"><path d="M 361.000000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c.t1 -&gt; b.t1)[0]"><path d="M 591.000000 1240.000000 L 359.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(b -&gt; c)[1]"><path d="M 351.000000 1370.000000 L 595.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/></g><g id="(c -&gt; b)[2]"><path d="M 597.000000 1756.000000 L 353.000000 1756.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1747228497)"/><text class="text-italic" x="474.500000" y="1762.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="c.what would arnold say"><g class="shape" ><path d="M 470.5 1500 H 706.1836 C 707.3544 1500 708.479 1500.4563 709.3189 1501.272 L 725.6353 1517.12 C 726.5077 1517.9674 727 1519.1318 727 1520.348 V 1625.5 C 727 1625.7761 726.7761 1626 726.5 1626 H 470.5 C 470.2239 1626 470 1625.7761 470 1625.5 V 1500.5 C 470 1500.2239 470.2239 1500 470.5 1500 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 725.918 1626 H 471.082 C 470.4328 1626 470 1625.5671 470 1624.9178 V 1501.0822 C 470 1500.4329 470.4328 1500 471.082 1500 H 705.3607 C 706.0099 1500 706.4427 1500.4329 706.4427 1501.0822 V 1518.1808 C 706.4427 1519.4794 707.3083 1520.5616 708.823 1520.5616 H 725.918 C 726.5672 1520.5616 727 1520.9945 727 1521.6436 V 1624.9178 C 726 1625.5671 726.5672 1626 725.918 1626 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="598.500000" y="1566.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what would arnold say</text></g><g id="d.this note"><g class="shape" ><path d="M 767.5 1886 H 910.1836 C 911.3544 1886 912.479 1886.4563 913.3189 1887.272 L 929.6353 1903.12 C 930.5077 1903.9674 931 1905.1318 931 1906.348 V 2011.5 C 931 2011.7761 930.7761 2012 930.5 2012 H 767.5 C 767.2239 2012 767 2011.7761 767 2011.5 V 1886.5 C 767 1886.2239 767.2239 1886 767.5 1886 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 929.918 2012 H 768.082 C 767.4328 2012 767 2011.5671 767 2010.9178 V 1887.0822 C 767 1886.4329 767.4328 1886 768.082 1886 H 909.3607 C 910.0099 1886 910.4427 1886.4329 910.4427 1887.0822 V 1904.1808 C 910.4427 1905.4794 911.3083 1906.5616 912.823 1906.5616 H 929.918 C 930.5672 1906.5616 931 1906.9945 931 1907.6436 V 2010.9178 C 930 2011.5671 930.5672 2012 929.918 2012 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1952.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this note</text></g><mask id="1747228497" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1149" height="2270">
 <rect x="-100" y="-100" width="1149" height="2270" fill="white"></rect>
 <rect x="54.000000" y="425.000000" width="30" height="21" fill="black"></rect>
 <rect x="280.000000" y="555.000000" width="57" height="21" fill="black"></rect>
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 a74340c58..14ef25227 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="854" height="1164" viewBox="-265 -28 854 1164"><style type="text/css">
@@ -18,7 +19,27 @@ width="854" height="1164" viewBox="-265 -28 854 1164"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#713278014)"/></g><g id="b.note"><g class="shape" ><path d="M -162.5 460 H 341.1836 C 342.3544 460 343.479 460.4563 344.3189 461.272 L 360.6353 477.12 C 361.5077 477.9674 362 479.1318 362 480.348 V 585.5 C 362 585.7761 361.7761 586 361.5 586 H -162.5 C -162.7761 586 -163 585.7761 -163 585.5 V 460.5 C -163 460.2239 -162.7761 460 -162.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 360.918 586 H -161.918 C -162.5672 586 -163 585.5671 -163 584.9178 V 461.0822 C -163 460.4329 -162.5672 460 -161.918 460 H 340.3607 C 341.0099 460 341.4427 460.4329 341.4427 461.0822 V 478.1808 C 341.4427 479.4794 342.3083 480.5616 343.823 480.5616 H 360.918 C 361.5672 480.5616 362 480.9945 362 481.6436 V 584.9178 C 361 585.5671 361.5672 586 360.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 343.5 716 H 459.1836 C 460.3544 716 461.479 716.4563 462.3189 717.272 L 478.6353 733.12 C 479.5077 733.9674 480 735.1318 480 736.348 V 905.5 C 480 905.7761 479.7761 906 479.5 906 H 343.5 C 343.2239 906 343 905.7761 343 905.5 V 716.5 C 343 716.2239 343.2239 716 343.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 478.918 906 H 344.082 C 343.4328 906 343 905.5671 343 904.9178 V 717.0822 C 343 716.4329 343.4328 716 344.082 716 H 458.3607 C 459.0099 716 459.4427 716.4329 459.4427 717.0822 V 734.1808 C 459.4427 735.4794 460.3083 736.5616 461.823 736.5616 H 478.918 C 479.5672 736.5616 480 736.9945 480 737.6436 V 904.9178 C 479 905.5671 479.5672 906 478.918 906 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><mask id="713278014" maskUnits="userSpaceOnUse" x="-100" y="-100" width="854" height="1164">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#713278014)"/></g><g id="b.note"><g class="shape" ><path d="M -162.5 460 H 341.1836 C 342.3544 460 343.479 460.4563 344.3189 461.272 L 360.6353 477.12 C 361.5077 477.9674 362 479.1318 362 480.348 V 585.5 C 362 585.7761 361.7761 586 361.5 586 H -162.5 C -162.7761 586 -163 585.7761 -163 585.5 V 460.5 C -163 460.2239 -162.7761 460 -162.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 360.918 586 H -161.918 C -162.5672 586 -163 585.5671 -163 584.9178 V 461.0822 C -163 460.4329 -162.5672 460 -161.918 460 H 340.3607 C 341.0099 460 341.4427 460.4329 341.4427 461.0822 V 478.1808 C 341.4427 479.4794 342.3083 480.5616 343.823 480.5616 H 360.918 C 361.5672 480.5616 362 480.9945 362 481.6436 V 584.9178 C 361 585.5671 361.5672 586 360.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 343.5 716 H 459.1836 C 460.3544 716 461.479 716.4563 462.3189 717.272 L 478.6353 733.12 C 479.5077 733.9674 480 735.1318 480 736.348 V 905.5 C 480 905.7761 479.7761 906 479.5 906 H 343.5 C 343.2239 906 343 905.7761 343 905.5 V 716.5 C 343 716.2239 343.2239 716 343.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 478.918 906 H 344.082 C 343.4328 906 343 905.5671 343 904.9178 V 717.0822 C 343 716.4329 343.4328 716 344.082 716 H 458.3607 C 459.0099 716 459.4427 716.4329 459.4427 717.0822 V 734.1808 C 459.4427 735.4794 460.3083 736.5616 461.823 736.5616 H 478.918 C 479.5672 736.5616 480 736.9945 480 737.6436 V 904.9178 C 479 905.5671 479.5672 906 478.918 906 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><mask id="713278014" maskUnits="userSpaceOnUse" x="-100" y="-100" width="854" height="1164">
 <rect x="-100" y="-100" width="854" height="1164" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 a74340c58..14ef25227 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="854" height="1164" viewBox="-265 -28 854 1164"><style type="text/css">
@@ -18,7 +19,27 @@ width="854" height="1164" viewBox="-265 -28 854 1164"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#713278014)"/></g><g id="b.note"><g class="shape" ><path d="M -162.5 460 H 341.1836 C 342.3544 460 343.479 460.4563 344.3189 461.272 L 360.6353 477.12 C 361.5077 477.9674 362 479.1318 362 480.348 V 585.5 C 362 585.7761 361.7761 586 361.5 586 H -162.5 C -162.7761 586 -163 585.7761 -163 585.5 V 460.5 C -163 460.2239 -162.7761 460 -162.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 360.918 586 H -161.918 C -162.5672 586 -163 585.5671 -163 584.9178 V 461.0822 C -163 460.4329 -162.5672 460 -161.918 460 H 340.3607 C 341.0099 460 341.4427 460.4329 341.4427 461.0822 V 478.1808 C 341.4427 479.4794 342.3083 480.5616 343.823 480.5616 H 360.918 C 361.5672 480.5616 362 480.9945 362 481.6436 V 584.9178 C 361 585.5671 361.5672 586 360.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 343.5 716 H 459.1836 C 460.3544 716 461.479 716.4563 462.3189 717.272 L 478.6353 733.12 C 479.5077 733.9674 480 735.1318 480 736.348 V 905.5 C 480 905.7761 479.7761 906 479.5 906 H 343.5 C 343.2239 906 343 905.7761 343 905.5 V 716.5 C 343 716.2239 343.2239 716 343.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 478.918 906 H 344.082 C 343.4328 906 343 905.5671 343 904.9178 V 717.0822 C 343 716.4329 343.4328 716 344.082 716 H 458.3607 C 459.0099 716 459.4427 716.4329 459.4427 717.0822 V 734.1808 C 459.4427 735.4794 460.3083 736.5616 461.823 736.5616 H 478.918 C 479.5672 736.5616 480 736.9945 480 737.6436 V 904.9178 C 479 905.5671 479.5672 906 478.918 906 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><mask id="713278014" maskUnits="userSpaceOnUse" x="-100" y="-100" width="854" height="1164">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#713278014)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#713278014)"/></g><g id="b.note"><g class="shape" ><path d="M -162.5 460 H 341.1836 C 342.3544 460 343.479 460.4563 344.3189 461.272 L 360.6353 477.12 C 361.5077 477.9674 362 479.1318 362 480.348 V 585.5 C 362 585.7761 361.7761 586 361.5 586 H -162.5 C -162.7761 586 -163 585.7761 -163 585.5 V 460.5 C -163 460.2239 -162.7761 460 -162.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 360.918 586 H -161.918 C -162.5672 586 -163 585.5671 -163 584.9178 V 461.0822 C -163 460.4329 -162.5672 460 -161.918 460 H 340.3607 C 341.0099 460 341.4427 460.4329 341.4427 461.0822 V 478.1808 C 341.4427 479.4794 342.3083 480.5616 343.823 480.5616 H 360.918 C 361.5672 480.5616 362 480.9945 362 481.6436 V 584.9178 C 361 585.5671 361.5672 586 360.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 343.5 716 H 459.1836 C 460.3544 716 461.479 716.4563 462.3189 717.272 L 478.6353 733.12 C 479.5077 733.9674 480 735.1318 480 736.348 V 905.5 C 480 905.7761 479.7761 906 479.5 906 H 343.5 C 343.2239 906 343 905.7761 343 905.5 V 716.5 C 343 716.2239 343.2239 716 343.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 478.918 906 H 344.082 C 343.4328 906 343 905.5671 343 904.9178 V 717.0822 C 343 716.4329 343.4328 716 344.082 716 H 458.3607 C 459.0099 716 459.4427 716.4329 459.4427 717.0822 V 734.1808 C 459.4427 735.4794 460.3083 736.5616 461.823 736.5616 H 478.918 C 479.5672 736.5616 480 736.9945 480 737.6436 V 904.9178 C 479 905.5671 479.5672 906 478.918 906 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><mask id="713278014" maskUnits="userSpaceOnUse" x="-100" y="-100" width="854" height="1164">
 <rect x="-100" y="-100" width="854" height="1164" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 ac5400e06..dcb85eeaa 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1118" height="2460" viewBox="-197 -28 1118 2460"><style type="text/css">
@@ -18,7 +19,27 @@ width="1118" height="2460" viewBox="-197 -28 1118 2460"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="629" y="74" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="724.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(b -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(c -- )[0]"><path d="M 724.000000 202.000000 L 724.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-97" y="290" width="655" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-12.000000" y="311.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="338" y="1172" width="460" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="355.000000" y="1193.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-73" y="420" width="607" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="51.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="362" y="1196" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1217.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="362" y="1326" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1347.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="362" y="1456" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1477.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="362" y="1586" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-49" y="550" width="559" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="42.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-25" y="680" width="511" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="18.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="49" y="1066" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="74.500000" y="1087.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 408.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 408.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[2]"><path d="M 101.000000 590.000000 L 408.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[3]"><path d="M 101.000000 976.000000 L 408.000000 976.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[4]"><path d="M 101.000000 1106.000000 L 408.000000 1106.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[0]"><path d="M 414.000000 1236.000000 L 720.000000 1236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[1]"><path d="M 414.000000 1366.000000 L 720.000000 1366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[2]"><path d="M 414.000000 1496.000000 L 720.000000 1496.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[3]"><path d="M 414.000000 1626.000000 L 720.000000 1626.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="a.a note"><g class="shape" ><path d="M 25.5 720 H 152.1836 C 153.3544 720 154.479 720.4563 155.3189 721.272 L 171.6353 737.12 C 172.5077 737.9674 173 739.1318 173 740.348 V 845.5 C 173 845.7761 172.7761 846 172.5 846 H 25.5 C 25.2239 846 25 845.7761 25 845.5 V 720.5 C 25 720.2239 25.2239 720 25.5 720 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 171.918 846 H 26.082 C 25.4328 846 25 845.5671 25 844.9178 V 721.0822 C 25 720.4329 25.4328 720 26.082 720 H 151.3607 C 152.0099 720 152.4427 720.4329 152.4427 721.0822 V 738.1808 C 152.4427 739.4794 153.3083 740.5616 154.823 740.5616 H 171.918 C 172.5672 740.5616 173 740.9945 173 741.6436 V 844.9178 C 172 845.5671 172.5672 846 171.918 846 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="786.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><path d="M 149.5 2076 H 653.1836 C 654.3544 2076 655.479 2076.4563 656.3189 2077.272 L 672.6353 2093.12 C 673.5077 2093.9674 674 2095.1318 674 2096.348 V 2201.5 C 674 2201.7761 673.7761 2202 673.5 2202 H 149.5 C 149.2239 2202 149 2201.7761 149 2201.5 V 2076.5 C 149 2076.2239 149.2239 2076 149.5 2076 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 672.918 2202 H 150.082 C 149.4328 2202 149 2201.5671 149 2200.9178 V 2077.0822 C 149 2076.4329 149.4328 2076 150.082 2076 H 652.3607 C 653.0099 2076 653.4427 2076.4329 653.4427 2077.0822 V 2094.1808 C 653.4427 2095.4794 654.3083 2096.5616 655.823 2096.5616 H 672.918 C 673.5672 2096.5616 674 2096.9945 674 2097.6436 V 2200.9178 C 673 2201.5671 673.5672 2202 672.918 2202 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="2142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 30.5 1756 H 146.1836 C 147.3544 1756 148.479 1756.4563 149.3189 1757.272 L 165.6353 1773.12 C 166.5077 1773.9674 167 1775.1318 167 1776.348 V 1945.5 C 167 1945.7761 166.7761 1946 166.5 1946 H 30.5 C 30.2239 1946 30 1945.7761 30 1945.5 V 1756.5 C 30 1756.2239 30.2239 1756 30.5 1756 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 1946 H 31.082 C 30.4328 1946 30 1945.5671 30 1944.9178 V 1757.0822 C 30 1756.4329 30.4328 1756 31.082 1756 H 145.3607 C 146.0099 1756 146.4427 1756.4329 146.4427 1757.0822 V 1774.1808 C 146.4427 1775.4794 147.3083 1776.5616 148.823 1776.5616 H 165.918 C 166.5672 1776.5616 167 1776.9945 167 1777.6436 V 1944.9178 C 166 1945.5671 166.5672 1946 165.918 1946 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="98.500000" y="1822.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="98.500000" dy="0.000000">just</tspan><tspan x="98.500000" dy="18.000000">a</tspan><tspan x="98.500000" dy="18.000000">long</tspan><tspan x="98.500000" dy="18.000000">note</tspan><tspan x="98.500000" dy="18.000000">here</tspan></text></g><mask id="854237888" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1118" height="2460">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="629" y="74" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="724.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(b -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(c -- )[0]"><path d="M 724.000000 202.000000 L 724.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-97" y="290" width="655" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-12.000000" y="311.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="338" y="1172" width="460" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="355.000000" y="1193.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-73" y="420" width="607" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="51.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="362" y="1196" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1217.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="362" y="1326" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1347.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="362" y="1456" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1477.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="362" y="1586" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-49" y="550" width="559" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="42.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-25" y="680" width="511" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="18.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="49" y="1066" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="74.500000" y="1087.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 408.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 408.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[2]"><path d="M 101.000000 590.000000 L 408.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[3]"><path d="M 101.000000 976.000000 L 408.000000 976.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[4]"><path d="M 101.000000 1106.000000 L 408.000000 1106.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[0]"><path d="M 414.000000 1236.000000 L 720.000000 1236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[1]"><path d="M 414.000000 1366.000000 L 720.000000 1366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[2]"><path d="M 414.000000 1496.000000 L 720.000000 1496.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[3]"><path d="M 414.000000 1626.000000 L 720.000000 1626.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="a.a note"><g class="shape" ><path d="M 25.5 720 H 152.1836 C 153.3544 720 154.479 720.4563 155.3189 721.272 L 171.6353 737.12 C 172.5077 737.9674 173 739.1318 173 740.348 V 845.5 C 173 845.7761 172.7761 846 172.5 846 H 25.5 C 25.2239 846 25 845.7761 25 845.5 V 720.5 C 25 720.2239 25.2239 720 25.5 720 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 171.918 846 H 26.082 C 25.4328 846 25 845.5671 25 844.9178 V 721.0822 C 25 720.4329 25.4328 720 26.082 720 H 151.3607 C 152.0099 720 152.4427 720.4329 152.4427 721.0822 V 738.1808 C 152.4427 739.4794 153.3083 740.5616 154.823 740.5616 H 171.918 C 172.5672 740.5616 173 740.9945 173 741.6436 V 844.9178 C 172 845.5671 172.5672 846 171.918 846 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="786.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><path d="M 149.5 2076 H 653.1836 C 654.3544 2076 655.479 2076.4563 656.3189 2077.272 L 672.6353 2093.12 C 673.5077 2093.9674 674 2095.1318 674 2096.348 V 2201.5 C 674 2201.7761 673.7761 2202 673.5 2202 H 149.5 C 149.2239 2202 149 2201.7761 149 2201.5 V 2076.5 C 149 2076.2239 149.2239 2076 149.5 2076 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 672.918 2202 H 150.082 C 149.4328 2202 149 2201.5671 149 2200.9178 V 2077.0822 C 149 2076.4329 149.4328 2076 150.082 2076 H 652.3607 C 653.0099 2076 653.4427 2076.4329 653.4427 2077.0822 V 2094.1808 C 653.4427 2095.4794 654.3083 2096.5616 655.823 2096.5616 H 672.918 C 673.5672 2096.5616 674 2096.9945 674 2097.6436 V 2200.9178 C 673 2201.5671 673.5672 2202 672.918 2202 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="2142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 30.5 1756 H 146.1836 C 147.3544 1756 148.479 1756.4563 149.3189 1757.272 L 165.6353 1773.12 C 166.5077 1773.9674 167 1775.1318 167 1776.348 V 1945.5 C 167 1945.7761 166.7761 1946 166.5 1946 H 30.5 C 30.2239 1946 30 1945.7761 30 1945.5 V 1756.5 C 30 1756.2239 30.2239 1756 30.5 1756 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 1946 H 31.082 C 30.4328 1946 30 1945.5671 30 1944.9178 V 1757.0822 C 30 1756.4329 30.4328 1756 31.082 1756 H 145.3607 C 146.0099 1756 146.4427 1756.4329 146.4427 1757.0822 V 1774.1808 C 146.4427 1775.4794 147.3083 1776.5616 148.823 1776.5616 H 165.918 C 166.5672 1776.5616 167 1776.9945 167 1777.6436 V 1944.9178 C 166 1945.5671 166.5672 1946 165.918 1946 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="98.500000" y="1822.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="98.500000" dy="0.000000">just</tspan><tspan x="98.500000" dy="18.000000">a</tspan><tspan x="98.500000" dy="18.000000">long</tspan><tspan x="98.500000" dy="18.000000">note</tspan><tspan x="98.500000" dy="18.000000">here</tspan></text></g><mask id="854237888" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1118" height="2460">
 <rect x="-100" y="-100" width="1118" height="2460" fill="white"></rect>
 <rect x="-92.000000" y="295.000000" width="160" height="21" fill="black"></rect>
 <rect x="343.000000" y="1177.000000" width="24" height="21" fill="black"></rect>
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 ac5400e06..dcb85eeaa 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1118" height="2460" viewBox="-197 -28 1118 2460"><style type="text/css">
@@ -18,7 +19,27 @@ width="1118" height="2460" viewBox="-197 -28 1118 2460"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="629" y="74" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="724.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(b -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(c -- )[0]"><path d="M 724.000000 202.000000 L 724.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-97" y="290" width="655" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-12.000000" y="311.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="338" y="1172" width="460" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="355.000000" y="1193.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-73" y="420" width="607" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="51.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="362" y="1196" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1217.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="362" y="1326" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1347.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="362" y="1456" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1477.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="362" y="1586" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-49" y="550" width="559" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="42.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-25" y="680" width="511" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="18.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="49" y="1066" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="74.500000" y="1087.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 408.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 408.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[2]"><path d="M 101.000000 590.000000 L 408.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[3]"><path d="M 101.000000 976.000000 L 408.000000 976.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[4]"><path d="M 101.000000 1106.000000 L 408.000000 1106.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[0]"><path d="M 414.000000 1236.000000 L 720.000000 1236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[1]"><path d="M 414.000000 1366.000000 L 720.000000 1366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[2]"><path d="M 414.000000 1496.000000 L 720.000000 1496.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[3]"><path d="M 414.000000 1626.000000 L 720.000000 1626.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="a.a note"><g class="shape" ><path d="M 25.5 720 H 152.1836 C 153.3544 720 154.479 720.4563 155.3189 721.272 L 171.6353 737.12 C 172.5077 737.9674 173 739.1318 173 740.348 V 845.5 C 173 845.7761 172.7761 846 172.5 846 H 25.5 C 25.2239 846 25 845.7761 25 845.5 V 720.5 C 25 720.2239 25.2239 720 25.5 720 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 171.918 846 H 26.082 C 25.4328 846 25 845.5671 25 844.9178 V 721.0822 C 25 720.4329 25.4328 720 26.082 720 H 151.3607 C 152.0099 720 152.4427 720.4329 152.4427 721.0822 V 738.1808 C 152.4427 739.4794 153.3083 740.5616 154.823 740.5616 H 171.918 C 172.5672 740.5616 173 740.9945 173 741.6436 V 844.9178 C 172 845.5671 172.5672 846 171.918 846 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="786.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><path d="M 149.5 2076 H 653.1836 C 654.3544 2076 655.479 2076.4563 656.3189 2077.272 L 672.6353 2093.12 C 673.5077 2093.9674 674 2095.1318 674 2096.348 V 2201.5 C 674 2201.7761 673.7761 2202 673.5 2202 H 149.5 C 149.2239 2202 149 2201.7761 149 2201.5 V 2076.5 C 149 2076.2239 149.2239 2076 149.5 2076 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 672.918 2202 H 150.082 C 149.4328 2202 149 2201.5671 149 2200.9178 V 2077.0822 C 149 2076.4329 149.4328 2076 150.082 2076 H 652.3607 C 653.0099 2076 653.4427 2076.4329 653.4427 2077.0822 V 2094.1808 C 653.4427 2095.4794 654.3083 2096.5616 655.823 2096.5616 H 672.918 C 673.5672 2096.5616 674 2096.9945 674 2097.6436 V 2200.9178 C 673 2201.5671 673.5672 2202 672.918 2202 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="2142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 30.5 1756 H 146.1836 C 147.3544 1756 148.479 1756.4563 149.3189 1757.272 L 165.6353 1773.12 C 166.5077 1773.9674 167 1775.1318 167 1776.348 V 1945.5 C 167 1945.7761 166.7761 1946 166.5 1946 H 30.5 C 30.2239 1946 30 1945.7761 30 1945.5 V 1756.5 C 30 1756.2239 30.2239 1756 30.5 1756 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 1946 H 31.082 C 30.4328 1946 30 1945.5671 30 1944.9178 V 1757.0822 C 30 1756.4329 30.4328 1756 31.082 1756 H 145.3607 C 146.0099 1756 146.4427 1756.4329 146.4427 1757.0822 V 1774.1808 C 146.4427 1775.4794 147.3083 1776.5616 148.823 1776.5616 H 165.918 C 166.5672 1776.5616 167 1776.9945 167 1777.6436 V 1944.9178 C 166 1945.5671 166.5672 1946 165.918 1946 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="98.500000" y="1822.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="98.500000" dy="0.000000">just</tspan><tspan x="98.500000" dy="18.000000">a</tspan><tspan x="98.500000" dy="18.000000">long</tspan><tspan x="98.500000" dy="18.000000">note</tspan><tspan x="98.500000" dy="18.000000">here</tspan></text></g><mask id="854237888" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1118" height="2460">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="629" y="74" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="724.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(b -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="(c -- )[0]"><path d="M 724.000000 202.000000 L 724.000000 2331.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#854237888)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-97" y="290" width="655" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-12.000000" y="311.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="338" y="1172" width="460" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="355.000000" y="1193.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-73" y="420" width="607" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="51.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="362" y="1196" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1217.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="362" y="1326" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1347.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="362" y="1456" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1477.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="362" y="1586" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="390.500000" y="1607.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-49" y="550" width="559" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="42.500000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-25" y="680" width="511" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="18.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="49" y="1066" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="74.500000" y="1087.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 408.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[1]"><path d="M 101.000000 460.000000 L 408.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[2]"><path d="M 101.000000 590.000000 L 408.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[3]"><path d="M 101.000000 976.000000 L 408.000000 976.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(a -&gt; b)[4]"><path d="M 101.000000 1106.000000 L 408.000000 1106.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[0]"><path d="M 414.000000 1236.000000 L 720.000000 1236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[1]"><path d="M 414.000000 1366.000000 L 720.000000 1366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[2]"><path d="M 414.000000 1496.000000 L 720.000000 1496.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="(b -&gt; c)[3]"><path d="M 414.000000 1626.000000 L 720.000000 1626.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#854237888)"/></g><g id="a.a note"><g class="shape" ><path d="M 25.5 720 H 152.1836 C 153.3544 720 154.479 720.4563 155.3189 721.272 L 171.6353 737.12 C 172.5077 737.9674 173 739.1318 173 740.348 V 845.5 C 173 845.7761 172.7761 846 172.5 846 H 25.5 C 25.2239 846 25 845.7761 25 845.5 V 720.5 C 25 720.2239 25.2239 720 25.5 720 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 171.918 846 H 26.082 C 25.4328 846 25 845.5671 25 844.9178 V 721.0822 C 25 720.4329 25.4328 720 26.082 720 H 151.3607 C 152.0099 720 152.4427 720.4329 152.4427 721.0822 V 738.1808 C 152.4427 739.4794 153.3083 740.5616 154.823 740.5616 H 171.918 C 172.5672 740.5616 173 740.9945 173 741.6436 V 844.9178 C 172 845.5671 172.5672 846 171.918 846 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="786.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><path d="M 149.5 2076 H 653.1836 C 654.3544 2076 655.479 2076.4563 656.3189 2077.272 L 672.6353 2093.12 C 673.5077 2093.9674 674 2095.1318 674 2096.348 V 2201.5 C 674 2201.7761 673.7761 2202 673.5 2202 H 149.5 C 149.2239 2202 149 2201.7761 149 2201.5 V 2076.5 C 149 2076.2239 149.2239 2076 149.5 2076 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 672.918 2202 H 150.082 C 149.4328 2202 149 2201.5671 149 2200.9178 V 2077.0822 C 149 2076.4329 149.4328 2076 150.082 2076 H 652.3607 C 653.0099 2076 653.4427 2076.4329 653.4427 2077.0822 V 2094.1808 C 653.4427 2095.4794 654.3083 2096.5616 655.823 2096.5616 H 672.918 C 673.5672 2096.5616 674 2096.9945 674 2097.6436 V 2200.9178 C 673 2201.5671 673.5672 2202 672.918 2202 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="2142.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 30.5 1756 H 146.1836 C 147.3544 1756 148.479 1756.4563 149.3189 1757.272 L 165.6353 1773.12 C 166.5077 1773.9674 167 1775.1318 167 1776.348 V 1945.5 C 167 1945.7761 166.7761 1946 166.5 1946 H 30.5 C 30.2239 1946 30 1945.7761 30 1945.5 V 1756.5 C 30 1756.2239 30.2239 1756 30.5 1756 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 165.918 1946 H 31.082 C 30.4328 1946 30 1945.5671 30 1944.9178 V 1757.0822 C 30 1756.4329 30.4328 1756 31.082 1756 H 145.3607 C 146.0099 1756 146.4427 1756.4329 146.4427 1757.0822 V 1774.1808 C 146.4427 1775.4794 147.3083 1776.5616 148.823 1776.5616 H 165.918 C 166.5672 1776.5616 167 1776.9945 167 1777.6436 V 1944.9178 C 166 1945.5671 166.5672 1946 165.918 1946 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="98.500000" y="1822.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="98.500000" dy="0.000000">just</tspan><tspan x="98.500000" dy="18.000000">a</tspan><tspan x="98.500000" dy="18.000000">long</tspan><tspan x="98.500000" dy="18.000000">note</tspan><tspan x="98.500000" dy="18.000000">here</tspan></text></g><mask id="854237888" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1118" height="2460">
 <rect x="-100" y="-100" width="1118" height="2460" fill="white"></rect>
 <rect x="-92.000000" y="295.000000" width="160" height="21" fill="black"></rect>
 <rect x="343.000000" y="1177.000000" width="24" height="21" fill="black"></rect>
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 33458b35f..4d782f1f0 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1631" height="1631" viewBox="-81 -31 1631 1631"><style type="text/css">
@@ -18,7 +19,27 @@ width="1631" height="1631" viewBox="-81 -31 1631 1631"><style type="text/css">
 }
 
 ]]>
-</style><g id="scorer"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:5;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 203.500000 L 99.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="scorer.abc"><g class="shape" ><rect x="93" y="1094" width="12" height="80" style="fill:yellow;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="593" y="428" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="843" y="542" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="1093" y="656" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="1343" y="900" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="589" y="444" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="839" y="558" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="1089" y="672" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="1339" y="916" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="835" y="574" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="1085" y="688" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="1335" y="932" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="1081" y="704" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="1331" y="948" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1327" y="964" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1921645492" 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 class="connection" fill="#0D32B2" stroke-width="10" points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" /> </marker><path d="M 106.500000 330.000000 L 327.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:10;" marker-end="url(#mk-1921645492)" mask="url(#505314312)"/></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 357.000000 460.000000 L 585.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 611.000000 590.000000 L 831.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 865.000000 720.000000 L 1077.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 607.000000 850.000000 L 835.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1119.000000 980.000000 L 1323.500000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 109.500000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1325.500000 1240.000000 L 104.500000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 102.500000 1370.000000 L 339.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><mask id="505314312" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1631" height="1631">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:5;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 203.500000 L 99.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="scorer.abc"><g class="shape" ><rect x="93" y="1094" width="12" height="80" style="fill:yellow;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="593" y="428" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="843" y="542" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="1093" y="656" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="1343" y="900" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="589" y="444" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="839" y="558" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="1089" y="672" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="1339" y="916" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="835" y="574" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="1085" y="688" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="1335" y="932" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="1081" y="704" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="1331" y="948" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1327" y="964" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1921645492" 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 class="connection" fill="#0D32B2" stroke-width="10" points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" /> </marker><path d="M 106.500000 330.000000 L 327.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:10;" marker-end="url(#mk-1921645492)" mask="url(#505314312)"/></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 357.000000 460.000000 L 585.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 611.000000 590.000000 L 831.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 865.000000 720.000000 L 1077.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 607.000000 850.000000 L 835.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1119.000000 980.000000 L 1323.500000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 109.500000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1325.500000 1240.000000 L 104.500000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 102.500000 1370.000000 L 339.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><mask id="505314312" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1631" height="1631">
 <rect x="-100" y="-100" width="1631" height="1631" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 33458b35f..4d782f1f0 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1631" height="1631" viewBox="-81 -31 1631 1631"><style type="text/css">
@@ -18,7 +19,27 @@ width="1631" height="1631" viewBox="-81 -31 1631 1631"><style type="text/css">
 }
 
 ]]>
-</style><g id="scorer"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:5;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 203.500000 L 99.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="scorer.abc"><g class="shape" ><rect x="93" y="1094" width="12" height="80" style="fill:yellow;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="593" y="428" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="843" y="542" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="1093" y="656" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="1343" y="900" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="589" y="444" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="839" y="558" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="1089" y="672" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="1339" y="916" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="835" y="574" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="1085" y="688" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="1335" y="932" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="1081" y="704" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="1331" y="948" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1327" y="964" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1921645492" 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 class="connection" fill="#0D32B2" stroke-width="10" points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" /> </marker><path d="M 106.500000 330.000000 L 327.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:10;" marker-end="url(#mk-1921645492)" mask="url(#505314312)"/></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 357.000000 460.000000 L 585.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 611.000000 590.000000 L 831.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 865.000000 720.000000 L 1077.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 607.000000 850.000000 L 835.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1119.000000 980.000000 L 1323.500000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 109.500000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1325.500000 1240.000000 L 104.500000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 102.500000 1370.000000 L 339.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><mask id="505314312" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1631" height="1631">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:5;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 203.500000 L 99.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 1499.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#505314312)"/></g><g id="scorer.abc"><g class="shape" ><rect x="93" y="1094" width="12" height="80" style="fill:yellow;stroke:#0D32B2;opacity:1.000000;stroke-width:7;" /></g></g><g id="itemResponse.a"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a"><g class="shape" ><rect x="593" y="428" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a"><g class="shape" ><rect x="843" y="542" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a"><g class="shape" ><rect x="1093" y="656" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a"><g class="shape" ><rect x="1343" y="900" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.c"><g class="shape" ><rect x="343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.a.b"><g class="shape" ><rect x="589" y="444" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b"><g class="shape" ><rect x="839" y="558" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b"><g class="shape" ><rect x="1089" y="672" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b"><g class="shape" ><rect x="1339" y="916" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.a.b.c"><g class="shape" ><rect x="835" y="574" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c"><g class="shape" ><rect x="1085" y="688" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c"><g class="shape" ><rect x="1335" y="932" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.a.b.c.d"><g class="shape" ><rect x="1081" y="704" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d"><g class="shape" ><rect x="1331" y="948" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1327" y="964" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer -&gt; itemResponse.a)[0]"><marker id="mk-1921645492" 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 class="connection" fill="#0D32B2" stroke-width="10" points="0.000000,0.000000 50.000000,30.000000 0.000000,60.000000" /> </marker><path d="M 106.500000 330.000000 L 327.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:10;" marker-end="url(#mk-1921645492)" mask="url(#505314312)"/></g><g id="(itemResponse.a -&gt; item.a.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 357.000000 460.000000 L 585.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 611.000000 590.000000 L 831.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 865.000000 720.000000 L 1077.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(item.a -&gt; essayRubric.a.b)[0]"><path d="M 607.000000 850.000000 L 835.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1119.000000 980.000000 L 1323.500000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer.abc -&gt; item.a)[0]"><path d="M 109.500000 1110.000000 L 589.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1325.500000 1240.000000 L 104.500000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><g id="(scorer -&gt; itemResponse.c)[0]"><path d="M 102.500000 1370.000000 L 339.000000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#505314312)"/></g><mask id="505314312" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1631" height="1631">
 <rect x="-100" y="-100" width="1631" height="1631" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 c31cb9df3..35550ac21 100644
--- a/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1332" height="1888" viewBox="-123 -28 1332 1888"><style type="text/css">
@@ -18,7 +19,27 @@ width="1332" height="1888" viewBox="-123 -28 1332 1888"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 972.000000 L 595.000000 972.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 1374.000000 L 353.000000 1374.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/><text class="text-italic" x="474.500000" y="1380.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 7.5 460 H 170.1836 C 171.3544 460 172.479 460.4563 173.3189 461.272 L 189.6353 477.12 C 190.5077 477.9674 191 479.1318 191 480.348 V 585.5 C 191 585.7761 190.7761 586 190.5 586 H 7.5 C 7.2239 586 7 585.7761 7 585.5 V 460.5 C 7 460.2239 7.2239 460 7.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 189.918 586 H 8.082 C 7.4328 586 7 585.5671 7 584.9178 V 461.0822 C 7 460.4329 7.4328 460 8.082 460 H 169.3607 C 170.0099 460 170.4427 460.4329 170.4427 461.0822 V 478.1808 C 170.4427 479.4794 171.3083 480.5616 172.823 480.5616 H 189.918 C 190.5672 480.5616 191 480.9945 191 481.6436 V 584.9178 C 190 585.5671 190.5672 586 189.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -20.5 716 H 199.1836 C 200.3544 716 201.479 716.4563 202.3189 717.272 L 218.6353 733.12 C 219.5077 733.9674 220 735.1318 220 736.348 V 841.5 C 220 841.7761 219.7761 842 219.5 842 H -20.5 C -20.7761 842 -21 841.7761 -21 841.5 V 716.5 C -21 716.2239 -20.7761 716 -20.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 218.918 842 H -19.918 C -20.5672 842 -21 841.5671 -21 840.9178 V 717.0822 C -21 716.4329 -20.5672 716 -19.918 716 H 198.3607 C 199.0099 716 199.4427 716.4329 199.4427 717.0822 V 734.1808 C 199.4427 735.4794 200.3083 736.5616 201.823 736.5616 H 218.918 C 219.5672 736.5616 220 736.9945 220 737.6436 V 840.9178 C 219 841.5671 219.5672 842 218.918 842 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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 160.5 1102 H 517.1836 C 518.3544 1102 519.479 1102.4563 520.3189 1103.272 L 536.6353 1119.12 C 537.5077 1119.9674 538 1121.1318 538 1122.348 V 1243.5 C 538 1243.7761 537.7761 1244 537.5 1244 H 160.5 C 160.2239 1244 160 1243.7761 160 1243.5 V 1102.5 C 160 1102.2239 160.2239 1102 160.5 1102 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 536.918 1244 H 161.082 C 160.4328 1244 160 1243.5671 160 1242.9178 V 1103.0822 C 160 1102.4329 160.4328 1102 161.082 1102 H 516.3607 C 517.0099 1102 517.4427 1102.4329 517.4427 1103.0822 V 1120.1808 C 517.4427 1121.4794 518.3083 1122.5616 519.823 1122.5616 H 536.918 C 537.5672 1122.5616 538 1122.9945 538 1123.6436 V 1242.9178 C 537 1243.5671 537.5672 1244 536.918 1244 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="349.000000" y="1168.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="349.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="349.000000" dy="21.000000"> 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 591.5 1504 H 1086.1836 C 1087.3544 1504 1088.479 1504.4563 1089.3189 1505.272 L 1105.6353 1521.12 C 1106.5077 1521.9674 1107 1523.1318 1107 1524.348 V 1629.5 C 1107 1629.7761 1106.7761 1630 1106.5 1630 H 591.5 C 591.2239 1630 591 1629.7761 591 1629.5 V 1504.5 C 591 1504.2239 591.2239 1504 591.5 1504 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1105.918 1630 H 592.082 C 591.4328 1630 591 1629.5671 591 1628.9178 V 1505.0822 C 591 1504.4329 591.4328 1504 592.082 1504 H 1085.3607 C 1086.0099 1504 1086.4427 1504.4329 1086.4427 1505.0822 V 1522.1808 C 1086.4427 1523.4794 1087.3083 1524.5616 1088.823 1524.5616 H 1105.918 C 1106.5672 1524.5616 1107 1524.9945 1107 1525.6436 V 1628.9178 C 1106 1629.5671 1106.5672 1630 1105.918 1630 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="3023509743" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1332" height="1888">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 972.000000 L 595.000000 972.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 1374.000000 L 353.000000 1374.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/><text class="text-italic" x="474.500000" y="1380.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 7.5 460 H 170.1836 C 171.3544 460 172.479 460.4563 173.3189 461.272 L 189.6353 477.12 C 190.5077 477.9674 191 479.1318 191 480.348 V 585.5 C 191 585.7761 190.7761 586 190.5 586 H 7.5 C 7.2239 586 7 585.7761 7 585.5 V 460.5 C 7 460.2239 7.2239 460 7.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 189.918 586 H 8.082 C 7.4328 586 7 585.5671 7 584.9178 V 461.0822 C 7 460.4329 7.4328 460 8.082 460 H 169.3607 C 170.0099 460 170.4427 460.4329 170.4427 461.0822 V 478.1808 C 170.4427 479.4794 171.3083 480.5616 172.823 480.5616 H 189.918 C 190.5672 480.5616 191 480.9945 191 481.6436 V 584.9178 C 190 585.5671 190.5672 586 189.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -20.5 716 H 199.1836 C 200.3544 716 201.479 716.4563 202.3189 717.272 L 218.6353 733.12 C 219.5077 733.9674 220 735.1318 220 736.348 V 841.5 C 220 841.7761 219.7761 842 219.5 842 H -20.5 C -20.7761 842 -21 841.7761 -21 841.5 V 716.5 C -21 716.2239 -20.7761 716 -20.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 218.918 842 H -19.918 C -20.5672 842 -21 841.5671 -21 840.9178 V 717.0822 C -21 716.4329 -20.5672 716 -19.918 716 H 198.3607 C 199.0099 716 199.4427 716.4329 199.4427 717.0822 V 734.1808 C 199.4427 735.4794 200.3083 736.5616 201.823 736.5616 H 218.918 C 219.5672 736.5616 220 736.9945 220 737.6436 V 840.9178 C 219 841.5671 219.5672 842 218.918 842 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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 160.5 1102 H 517.1836 C 518.3544 1102 519.479 1102.4563 520.3189 1103.272 L 536.6353 1119.12 C 537.5077 1119.9674 538 1121.1318 538 1122.348 V 1243.5 C 538 1243.7761 537.7761 1244 537.5 1244 H 160.5 C 160.2239 1244 160 1243.7761 160 1243.5 V 1102.5 C 160 1102.2239 160.2239 1102 160.5 1102 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 536.918 1244 H 161.082 C 160.4328 1244 160 1243.5671 160 1242.9178 V 1103.0822 C 160 1102.4329 160.4328 1102 161.082 1102 H 516.3607 C 517.0099 1102 517.4427 1102.4329 517.4427 1103.0822 V 1120.1808 C 517.4427 1121.4794 518.3083 1122.5616 519.823 1122.5616 H 536.918 C 537.5672 1122.5616 538 1122.9945 538 1123.6436 V 1242.9178 C 537 1243.5671 537.5672 1244 536.918 1244 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="349.000000" y="1168.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="349.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="349.000000" dy="21.000000"> 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 591.5 1504 H 1086.1836 C 1087.3544 1504 1088.479 1504.4563 1089.3189 1505.272 L 1105.6353 1521.12 C 1106.5077 1521.9674 1107 1523.1318 1107 1524.348 V 1629.5 C 1107 1629.7761 1106.7761 1630 1106.5 1630 H 591.5 C 591.2239 1630 591 1629.7761 591 1629.5 V 1504.5 C 591 1504.2239 591.2239 1504 591.5 1504 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1105.918 1630 H 592.082 C 591.4328 1630 591 1629.5671 591 1628.9178 V 1505.0822 C 591 1504.4329 591.4328 1504 592.082 1504 H 1085.3607 C 1086.0099 1504 1086.4427 1504.4329 1086.4427 1505.0822 V 1522.1808 C 1086.4427 1523.4794 1087.3083 1524.5616 1088.823 1524.5616 H 1105.918 C 1106.5672 1524.5616 1107 1524.9945 1107 1525.6436 V 1628.9178 C 1106 1629.5671 1106.5672 1630 1105.918 1630 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="3023509743" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1332" height="1888">
 <rect x="-100" y="-100" width="1332" height="1888" fill="white"></rect>
 <rect x="458.000000" y="1364.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
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 c31cb9df3..35550ac21 100644
--- a/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1332" height="1888" viewBox="-123 -28 1332 1888"><style type="text/css">
@@ -18,7 +19,27 @@ width="1332" height="1888" viewBox="-123 -28 1332 1888"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 972.000000 L 595.000000 972.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 1374.000000 L 353.000000 1374.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/><text class="text-italic" x="474.500000" y="1380.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 7.5 460 H 170.1836 C 171.3544 460 172.479 460.4563 173.3189 461.272 L 189.6353 477.12 C 190.5077 477.9674 191 479.1318 191 480.348 V 585.5 C 191 585.7761 190.7761 586 190.5 586 H 7.5 C 7.2239 586 7 585.7761 7 585.5 V 460.5 C 7 460.2239 7.2239 460 7.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 189.918 586 H 8.082 C 7.4328 586 7 585.5671 7 584.9178 V 461.0822 C 7 460.4329 7.4328 460 8.082 460 H 169.3607 C 170.0099 460 170.4427 460.4329 170.4427 461.0822 V 478.1808 C 170.4427 479.4794 171.3083 480.5616 172.823 480.5616 H 189.918 C 190.5672 480.5616 191 480.9945 191 481.6436 V 584.9178 C 190 585.5671 190.5672 586 189.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -20.5 716 H 199.1836 C 200.3544 716 201.479 716.4563 202.3189 717.272 L 218.6353 733.12 C 219.5077 733.9674 220 735.1318 220 736.348 V 841.5 C 220 841.7761 219.7761 842 219.5 842 H -20.5 C -20.7761 842 -21 841.7761 -21 841.5 V 716.5 C -21 716.2239 -20.7761 716 -20.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 218.918 842 H -19.918 C -20.5672 842 -21 841.5671 -21 840.9178 V 717.0822 C -21 716.4329 -20.5672 716 -19.918 716 H 198.3607 C 199.0099 716 199.4427 716.4329 199.4427 717.0822 V 734.1808 C 199.4427 735.4794 200.3083 736.5616 201.823 736.5616 H 218.918 C 219.5672 736.5616 220 736.9945 220 737.6436 V 840.9178 C 219 841.5671 219.5672 842 218.918 842 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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 160.5 1102 H 517.1836 C 518.3544 1102 519.479 1102.4563 520.3189 1103.272 L 536.6353 1119.12 C 537.5077 1119.9674 538 1121.1318 538 1122.348 V 1243.5 C 538 1243.7761 537.7761 1244 537.5 1244 H 160.5 C 160.2239 1244 160 1243.7761 160 1243.5 V 1102.5 C 160 1102.2239 160.2239 1102 160.5 1102 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 536.918 1244 H 161.082 C 160.4328 1244 160 1243.5671 160 1242.9178 V 1103.0822 C 160 1102.4329 160.4328 1102 161.082 1102 H 516.3607 C 517.0099 1102 517.4427 1102.4329 517.4427 1103.0822 V 1120.1808 C 517.4427 1121.4794 518.3083 1122.5616 519.823 1122.5616 H 536.918 C 537.5672 1122.5616 538 1122.9945 538 1123.6436 V 1242.9178 C 537 1243.5671 537.5672 1244 536.918 1244 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="349.000000" y="1168.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="349.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="349.000000" dy="21.000000"> 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 591.5 1504 H 1086.1836 C 1087.3544 1504 1088.479 1504.4563 1089.3189 1505.272 L 1105.6353 1521.12 C 1106.5077 1521.9674 1107 1523.1318 1107 1524.348 V 1629.5 C 1107 1629.7761 1106.7761 1630 1106.5 1630 H 591.5 C 591.2239 1630 591 1629.7761 591 1629.5 V 1504.5 C 591 1504.2239 591.2239 1504 591.5 1504 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1105.918 1630 H 592.082 C 591.4328 1630 591 1629.5671 591 1628.9178 V 1505.0822 C 591 1504.4329 591.4328 1504 592.082 1504 H 1085.3607 C 1086.0099 1504 1086.4427 1504.4329 1086.4427 1505.0822 V 1522.1808 C 1086.4427 1523.4794 1087.3083 1524.5616 1088.823 1524.5616 H 1105.918 C 1106.5672 1524.5616 1107 1524.9945 1107 1525.6436 V 1628.9178 C 1106 1629.5671 1106.5672 1630 1105.918 1630 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="3023509743" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1332" height="1888">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="d"><g class="shape" ><rect x="774" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(d -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 1759.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#3023509743)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 345.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(b -&gt; c)[0]"><path d="M 351.000000 972.000000 L 595.000000 972.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/></g><g id="(c -&gt; b)[0]"><path d="M 597.000000 1374.000000 L 353.000000 1374.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3023509743)"/><text class="text-italic" x="474.500000" y="1380.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">okay</text></g><g id="a.explanation"><g class="shape" ><path d="M 7.5 460 H 170.1836 C 171.3544 460 172.479 460.4563 173.3189 461.272 L 189.6353 477.12 C 190.5077 477.9674 191 479.1318 191 480.348 V 585.5 C 191 585.7761 190.7761 586 190.5 586 H 7.5 C 7.2239 586 7 585.7761 7 585.5 V 460.5 C 7 460.2239 7.2239 460 7.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 189.918 586 H 8.082 C 7.4328 586 7 585.5671 7 584.9178 V 461.0822 C 7 460.4329 7.4328 460 8.082 460 H 169.3607 C 170.0099 460 170.4427 460.4329 170.4427 461.0822 V 478.1808 C 170.4427 479.4794 171.3083 480.5616 172.823 480.5616 H 189.918 C 190.5672 480.5616 191 480.9945 191 481.6436 V 584.9178 C 190 585.5671 190.5672 586 189.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.000000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">explanation</text></g><g id="a.another explanation"><g class="shape" ><path d="M -20.5 716 H 199.1836 C 200.3544 716 201.479 716.4563 202.3189 717.272 L 218.6353 733.12 C 219.5077 733.9674 220 735.1318 220 736.348 V 841.5 C 220 841.7761 219.7761 842 219.5 842 H -20.5 C -20.7761 842 -21 841.7761 -21 841.5 V 716.5 C -21 716.2239 -20.7761 716 -20.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 218.918 842 H -19.918 C -20.5672 842 -21 841.5671 -21 840.9178 V 717.0822 C -21 716.4329 -20.5672 716 -19.918 716 H 198.3607 C 199.0099 716 199.4427 716.4329 199.4427 717.0822 V 734.1808 C 199.4427 735.4794 200.3083 736.5616 201.823 736.5616 H 218.918 C 219.5672 736.5616 220 736.9945 220 737.6436 V 840.9178 C 219 841.5671 219.5672 842 218.918 842 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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 160.5 1102 H 517.1836 C 518.3544 1102 519.479 1102.4563 520.3189 1103.272 L 536.6353 1119.12 C 537.5077 1119.9674 538 1121.1318 538 1122.348 V 1243.5 C 538 1243.7761 537.7761 1244 537.5 1244 H 160.5 C 160.2239 1244 160 1243.7761 160 1243.5 V 1102.5 C 160 1102.2239 160.2239 1102 160.5 1102 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 536.918 1244 H 161.082 C 160.4328 1244 160 1243.5671 160 1242.9178 V 1103.0822 C 160 1102.4329 160.4328 1102 161.082 1102 H 516.3607 C 517.0099 1102 517.4427 1102.4329 517.4427 1103.0822 V 1120.1808 C 517.4427 1121.4794 518.3083 1122.5616 519.823 1122.5616 H 536.918 C 537.5672 1122.5616 538 1122.9945 538 1123.6436 V 1242.9178 C 537 1243.5671 537.5672 1244 536.918 1244 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="349.000000" y="1168.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="349.000000" dy="0.000000">Some one who believes imaginary things</tspan><tspan x="349.000000" dy="21.000000"> 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 591.5 1504 H 1086.1836 C 1087.3544 1504 1088.479 1504.4563 1089.3189 1505.272 L 1105.6353 1521.12 C 1106.5077 1521.9674 1107 1523.1318 1107 1524.348 V 1629.5 C 1107 1629.7761 1106.7761 1630 1106.5 1630 H 591.5 C 591.2239 1630 591 1629.7761 591 1629.5 V 1504.5 C 591 1504.2239 591.2239 1504 591.5 1504 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1105.918 1630 H 592.082 C 591.4328 1630 591 1629.5671 591 1628.9178 V 1505.0822 C 591 1504.4329 591.4328 1504 592.082 1504 H 1085.3607 C 1086.0099 1504 1086.4427 1504.4329 1086.4427 1505.0822 V 1522.1808 C 1086.4427 1523.4794 1087.3083 1524.5616 1088.823 1524.5616 H 1105.918 C 1106.5672 1524.5616 1107 1524.9945 1107 1525.6436 V 1628.9178 C 1106 1629.5671 1106.5672 1630 1105.918 1630 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="849.000000" y="1570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">The earth is like a tiny grain of sand, only much, much heavier</text></g><mask id="3023509743" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1332" height="1888">
 <rect x="-100" y="-100" width="1332" height="1888" fill="white"></rect>
 <rect x="458.000000" y="1364.000000" width="33" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
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 18bfdf0a6..2bd30406b 100644
--- a/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2447" height="2536" viewBox="-100 -100 2447 2536"><style type="text/css">
@@ -18,7 +19,27 @@ width="2447" height="2536" viewBox="-100 -100 2447 2536"><style type="text/css">
 }
 
 ]]>
-</style><g id="How this is rendered"><g class="shape" ><rect x="0" y="0" width="2247" height="2336" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="1123.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="508" y="110" width="182" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="767" y="110" width="165" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="1009" y="110" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="1263" y="110" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1509" y="110" width="181" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1599.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1740" y="110" width="229" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1854.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="2019" y="110" width="204" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2121.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 599.000000 238.000000 L 599.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 849.500000 238.000000 L 849.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 1099.000000 238.000000 L 1099.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 1349.500000 238.000000 L 1349.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1599.500000 238.000000 L 1599.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1854.500000 238.000000 L 1854.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 2121.000000 238.000000 L 2121.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="843" y="1126" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="1093" y="1906" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="805" y="1362" width="1365" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="902.500000" y="1383.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="224.500000" y="372.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 347.000000 496.000000 L 103.000000 496.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="224.000000" y="502.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 101.000000 626.000000 L 595.000000 626.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="349.000000" y="632.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 597.000000 1012.000000 L 103.000000 1012.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="349.500000" y="1018.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 101.000000 1142.000000 L 839.500000 1142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="471.000000" y="1148.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 857.500000 1272.000000 L 1850.500000 1272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1355.500000" y="1278.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 857.500000 1402.000000 L 2117.000000 1402.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1488.500000" y="1408.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 859.500000 1532.000000 L 1852.500000 1532.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#646484321)"/><text class="text-italic" x="1355.000000" y="1538.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 847.500000 1662.000000 L 103.000000 1662.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="474.500000" y="1668.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 101.000000 1792.000000 L 1095.000000 1792.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="599.000000" y="1798.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 1107.000000 1922.000000 L 1345.500000 1922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1227.000000" y="1928.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 1107.000000 2052.000000 L 1595.500000 2052.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1352.000000" y="2058.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 1091.000000 2182.000000 L 103.000000 2182.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="596.000000" y="2188.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 445.5 756 H 731.1836 C 732.3544 756 733.479 756.4563 734.3189 757.272 L 750.6353 773.12 C 751.5077 773.9674 752 775.1318 752 776.348 V 881.5 C 752 881.7761 751.7761 882 751.5 882 H 445.5 C 445.2239 882 445 881.7761 445 881.5 V 756.5 C 445 756.2239 445.2239 756 445.5 756 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 750.918 882 H 446.082 C 445.4328 882 445 881.5671 445 880.9178 V 757.0822 C 445 756.4329 445.4328 756 446.082 756 H 730.3607 C 731.0099 756 731.4427 756.4329 731.4427 757.0822 V 774.1808 C 731.4427 775.4794 732.3083 776.5616 733.823 776.5616 H 750.918 C 751.5672 776.5616 752 776.9945 752 777.6436 V 880.9178 C 751 881.5671 751.5672 882 750.918 882 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="598.500000" y="822.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">measurements also take place</text></g><mask id="646484321" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2447" height="2536">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="2247" height="2336" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="1123.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="24" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="274" y="110" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="508" y="110" width="182" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="767" y="110" width="165" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="1009" y="110" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="1263" y="110" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1509" y="110" width="181" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1599.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1740" y="110" width="229" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1854.500000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="2019" y="110" width="204" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2121.000000" y="176.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 99.000000 238.000000 L 99.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 349.000000 238.000000 L 349.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 599.000000 238.000000 L 599.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 849.500000 238.000000 L 849.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 1099.000000 238.000000 L 1099.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 1349.500000 238.000000 L 1349.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1599.500000 238.000000 L 1599.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1854.500000 238.000000 L 1854.500000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 2121.000000 238.000000 L 2121.000000 2311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#646484321)"/></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="843" y="1126" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="1093" y="1906" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="805" y="1362" width="1365" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="902.500000" y="1383.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 366.000000 L 345.000000 366.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="224.500000" y="372.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 347.000000 496.000000 L 103.000000 496.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="224.000000" y="502.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 101.000000 626.000000 L 595.000000 626.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="349.000000" y="632.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 597.000000 1012.000000 L 103.000000 1012.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="349.500000" y="1018.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 101.000000 1142.000000 L 839.500000 1142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="471.000000" y="1148.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 857.500000 1272.000000 L 1850.500000 1272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1355.500000" y="1278.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 857.500000 1402.000000 L 2117.000000 1402.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1488.500000" y="1408.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 859.500000 1532.000000 L 1852.500000 1532.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#646484321)"/><text class="text-italic" x="1355.000000" y="1538.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 847.500000 1662.000000 L 103.000000 1662.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="474.500000" y="1668.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 101.000000 1792.000000 L 1095.000000 1792.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="599.000000" y="1798.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 1107.000000 1922.000000 L 1345.500000 1922.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1227.000000" y="1928.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 1107.000000 2052.000000 L 1595.500000 2052.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="1352.000000" y="2058.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 1091.000000 2182.000000 L 103.000000 2182.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#646484321)"/><text class="text-italic" x="596.000000" y="2188.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 445.5 756 H 731.1836 C 732.3544 756 733.479 756.4563 734.3189 757.272 L 750.6353 773.12 C 751.5077 773.9674 752 775.1318 752 776.348 V 881.5 C 752 881.7761 751.7761 882 751.5 882 H 445.5 C 445.2239 882 445 881.7761 445 881.5 V 756.5 C 445 756.2239 445.2239 756 445.5 756 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 750.918 882 H 446.082 C 445.4328 882 445 881.5671 445 880.9178 V 757.0822 C 445 756.4329 445.4328 756 446.082 756 H 730.3607 C 731.0099 756 731.4427 756.4329 731.4427 757.0822 V 774.1808 C 731.4427 775.4794 732.3083 776.5616 733.823 776.5616 H 750.918 C 751.5672 776.5616 752 776.9945 752 777.6436 V 880.9178 C 751 881.5671 751.5672 882 750.918 882 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="598.500000" y="822.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">measurements also take place</text></g><mask id="646484321" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2447" height="2536">
 <rect x="-100" y="-100" width="2447" height="2536" fill="white"></rect>
 <rect x="810.000000" y="1367.000000" width="185" height="21" fill="black"></rect>
 <rect x="141.000000" y="356.000000" width="167" height="21" fill="black"></rect>
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 5f4dd359a..d35f83ea3 100644
--- a/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2447" height="2536" viewBox="-88 -88 2447 2536"><style type="text/css">
@@ -18,7 +19,27 @@ width="2447" height="2536" viewBox="-88 -88 2447 2536"><style type="text/css">
 }
 
 ]]>
-</style><g id="How this is rendered"><g class="shape" ><rect x="12" y="12" width="2247" height="2336" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="1135.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="520" y="122" width="182" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="611.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="779" y="122" width="165" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="861.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="1021" y="122" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="1275" y="122" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1361.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1521" y="122" width="181" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1611.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1752" y="122" width="229" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1866.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="2031" y="122" width="204" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2133.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 611.000000 250.000000 L 611.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 861.500000 250.000000 L 861.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 1111.000000 250.000000 L 1111.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 1361.500000 250.000000 L 1361.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1611.500000 250.000000 L 1611.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1866.500000 250.000000 L 1866.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 2133.000000 250.000000 L 2133.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="855" y="1138" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="1105" y="1918" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="817" y="1374" width="1365" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="914.500000" y="1395.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="236.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 359.000000 508.000000 L 115.000000 508.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="236.000000" y="514.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 113.000000 638.000000 L 607.000000 638.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="361.000000" y="644.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 609.000000 1024.000000 L 115.000000 1024.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="361.500000" y="1030.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 113.000000 1154.000000 L 851.500000 1154.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="483.000000" y="1160.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 869.500000 1284.000000 L 1862.500000 1284.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1367.500000" y="1290.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 869.500000 1414.000000 L 2129.000000 1414.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1500.500000" y="1420.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 871.500000 1544.000000 L 1864.500000 1544.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2177574803)"/><text class="text-italic" x="1367.000000" y="1550.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 859.500000 1674.000000 L 115.000000 1674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="486.500000" y="1680.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 113.000000 1804.000000 L 1107.000000 1804.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="611.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 1119.000000 1934.000000 L 1357.500000 1934.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1239.000000" y="1940.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 1119.000000 2064.000000 L 1607.500000 2064.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1364.000000" y="2070.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 1103.000000 2194.000000 L 115.000000 2194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="608.000000" y="2200.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 457.5 768 H 743.1836 C 744.3544 768 745.479 768.4563 746.3189 769.272 L 762.6353 785.12 C 763.5077 785.9674 764 787.1318 764 788.348 V 893.5 C 764 893.7761 763.7761 894 763.5 894 H 457.5 C 457.2239 894 457 893.7761 457 893.5 V 768.5 C 457 768.2239 457.2239 768 457.5 768 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 762.918 894 H 458.082 C 457.4328 894 457 893.5671 457 892.9178 V 769.0822 C 457 768.4329 457.4328 768 458.082 768 H 742.3607 C 743.0099 768 743.4427 768.4329 743.4427 769.0822 V 786.1808 C 743.4427 787.4794 744.3083 788.5616 745.823 788.5616 H 762.918 C 763.5672 788.5616 764 788.9945 764 789.6436 V 892.9178 C 763 893.5671 763.5672 894 762.918 894 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="610.500000" y="834.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">measurements also take place</text></g><mask id="2177574803" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2447" height="2536">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="2247" height="2336" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="1135.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">How this is rendered</text></g><g id="How this is rendered.CLI"><g class="shape" ><rect x="36" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CLI</text></g><g id="How this is rendered.d2ast"><g class="shape" ><rect x="286" y="122" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2ast</text></g><g id="How this is rendered.d2compiler"><g class="shape" ><rect x="520" y="122" width="182" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="611.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2compiler</text></g><g id="How this is rendered.d2layout"><g class="shape" ><rect x="779" y="122" width="165" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="861.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2layout</text></g><g id="How this is rendered.d2exporter"><g class="shape" ><rect x="1021" y="122" width="180" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1111.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2exporter</text></g><g id="How this is rendered.d2themes"><g class="shape" ><rect x="1275" y="122" width="173" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1361.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2themes</text></g><g id="How this is rendered.d2renderer"><g class="shape" ><rect x="1521" y="122" width="181" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1611.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2renderer</text></g><g id="How this is rendered.d2sequencelayout"><g class="shape" ><rect x="1752" y="122" width="229" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1866.500000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2sequencelayout</text></g><g id="How this is rendered.d2dagrelayout"><g class="shape" ><rect x="2031" y="122" width="204" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2133.000000" y="188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d2dagrelayout</text></g><g id="(How this is rendered.CLI -- )[0]"><path d="M 111.000000 250.000000 L 111.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2ast -- )[0]"><path d="M 361.000000 250.000000 L 361.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2compiler -- )[0]"><path d="M 611.000000 250.000000 L 611.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2layout -- )[0]"><path d="M 861.500000 250.000000 L 861.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2exporter -- )[0]"><path d="M 1111.000000 250.000000 L 1111.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2themes -- )[0]"><path d="M 1361.500000 250.000000 L 1361.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2renderer -- )[0]"><path d="M 1611.500000 250.000000 L 1611.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2sequencelayout -- )[0]"><path d="M 1866.500000 250.000000 L 1866.500000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="(How this is rendered.d2dagrelayout -- )[0]"><path d="M 2133.000000 250.000000 L 2133.000000 2323.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2177574803)"/></g><g id="How this is rendered.d2layout.layout"><g class="shape" ><rect x="855" y="1138" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.d2exporter.export"><g class="shape" ><rect x="1105" y="1918" width="12" height="292" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="How this is rendered.only if root is not sequence"><g class="shape blend" ><rect x="817" y="1374" width="1365" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="914.500000" y="1395.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">only if root is not sequence</text></g><g id="How this is rendered.(CLI -&gt; d2ast)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 113.000000 378.000000 L 357.000000 378.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="236.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">&#39;How this is rendered: {...}&#39;</text></g><g id="How this is rendered.(d2ast -&gt; CLI)[0]"><path d="M 359.000000 508.000000 L 115.000000 508.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="236.000000" y="514.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">tokenized AST</text></g><g id="How this is rendered.(CLI -&gt; d2compiler)[0]"><path d="M 113.000000 638.000000 L 607.000000 638.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="361.000000" y="644.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">compile AST</text></g><g id="How this is rendered.(d2compiler -&gt; CLI)[0]"><path d="M 609.000000 1024.000000 L 115.000000 1024.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="361.500000" y="1030.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">objects and edges</text></g><g id="How this is rendered.(CLI -&gt; d2layout.layout)[0]"><path d="M 113.000000 1154.000000 L 851.500000 1154.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="483.000000" y="1160.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run layout engines</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2sequencelayout)[0]"><path d="M 869.500000 1284.000000 L 1862.500000 1284.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1367.500000" y="1290.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run engine on shape: sequence_diagram, temporarily remove</text></g><g id="How this is rendered.(d2layout.layout -&gt; d2dagrelayout)[0]"><path d="M 869.500000 1414.000000 L 2129.000000 1414.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1500.500000" y="1420.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">run core engine on rest</text></g><g id="How this is rendered.(d2layout.layout &lt;- d2sequencelayout)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 871.500000 1544.000000 L 1864.500000 1544.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2177574803)"/><text class="text-italic" x="1367.000000" y="1550.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">add back in sequence diagrams</text></g><g id="How this is rendered.(d2layout -&gt; CLI)[0]"><path d="M 859.500000 1674.000000 L 115.000000 1674.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="486.500000" y="1680.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">diagram with correct positions and dimensions</text></g><g id="How this is rendered.(CLI -&gt; d2exporter)[0]"><path d="M 113.000000 1804.000000 L 1107.000000 1804.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="611.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">export diagram with chosen theme and renderer</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2themes)[0]"><path d="M 1119.000000 1934.000000 L 1357.500000 1934.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1239.000000" y="1940.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">get theme styles</text></g><g id="How this is rendered.(d2exporter.export -&gt; d2renderer)[0]"><path d="M 1119.000000 2064.000000 L 1607.500000 2064.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="1364.000000" y="2070.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">render to SVG</text></g><g id="How this is rendered.(d2exporter.export -&gt; CLI)[0]"><path d="M 1103.000000 2194.000000 L 115.000000 2194.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2177574803)"/><text class="text-italic" x="608.000000" y="2200.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">resulting SVG</text></g><g id="How this is rendered.d2compiler.measurements also take place"><g class="shape" ><path d="M 457.5 768 H 743.1836 C 744.3544 768 745.479 768.4563 746.3189 769.272 L 762.6353 785.12 C 763.5077 785.9674 764 787.1318 764 788.348 V 893.5 C 764 893.7761 763.7761 894 763.5 894 H 457.5 C 457.2239 894 457 893.7761 457 893.5 V 768.5 C 457 768.2239 457.2239 768 457.5 768 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 762.918 894 H 458.082 C 457.4328 894 457 893.5671 457 892.9178 V 769.0822 C 457 768.4329 457.4328 768 458.082 768 H 742.3607 C 743.0099 768 743.4427 768.4329 743.4427 769.0822 V 786.1808 C 743.4427 787.4794 744.3083 788.5616 745.823 788.5616 H 762.918 C 763.5672 788.5616 764 788.9945 764 789.6436 V 892.9178 C 763 893.5671 763.5672 894 762.918 894 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="610.500000" y="834.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">measurements also take place</text></g><mask id="2177574803" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2447" height="2536">
 <rect x="-100" y="-100" width="2447" height="2536" fill="white"></rect>
 <rect x="822.000000" y="1379.000000" width="185" height="21" fill="black"></rect>
 <rect x="153.000000" y="368.000000" width="167" height="21" fill="black"></rect>
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 05991a5af..b9ac8aeed 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="698" height="1368" viewBox="-78 -28 698 1368"><style type="text/css">
@@ -18,7 +19,27 @@ width="698" height="1368" viewBox="-78 -28 698 1368"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="b.1"><g class="shape" ><rect x="343" y="654" width="12" height="228" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="93" y="948" width="12" height="178" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="343" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="339" y="784" width="20" height="82" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="89" y="964" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 103.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="199.500000" y="376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 351.000000 590.000000 L 439.000000 590.000000 S 449.000000 590.000000 449.000000 600.000000 L 449.000000 660.000000 S 449.000000 670.000000 439.000000 670.000000 L 359.000000 670.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="633.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 357.000000 720.000000 L 439.000000 720.000000 S 449.000000 720.000000 449.000000 730.000000 L 449.000000 790.000000 S 449.000000 800.000000 439.000000 800.000000 L 363.000000 800.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.500000" y="764.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 361.000000 850.000000 L 439.000000 850.000000 S 449.000000 850.000000 449.000000 860.000000 L 449.000000 920.000000 S 449.000000 930.000000 439.000000 930.000000 L 353.000000 930.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="901.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 347.000000 980.000000 L 113.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="229.000000" y="986.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 107.000000 1110.000000 L 339.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/></g><mask id="1909736420" maskUnits="userSpaceOnUse" x="-100" y="-100" width="698" height="1368">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="b.1"><g class="shape" ><rect x="343" y="654" width="12" height="228" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="93" y="948" width="12" height="178" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="343" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="339" y="784" width="20" height="82" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="89" y="964" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 103.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="199.500000" y="376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 351.000000 590.000000 L 439.000000 590.000000 S 449.000000 590.000000 449.000000 600.000000 L 449.000000 660.000000 S 449.000000 670.000000 439.000000 670.000000 L 359.000000 670.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="633.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 357.000000 720.000000 L 439.000000 720.000000 S 449.000000 720.000000 449.000000 730.000000 L 449.000000 790.000000 S 449.000000 800.000000 439.000000 800.000000 L 363.000000 800.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.500000" y="764.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 361.000000 850.000000 L 439.000000 850.000000 S 449.000000 850.000000 449.000000 860.000000 L 449.000000 920.000000 S 449.000000 930.000000 439.000000 930.000000 L 353.000000 930.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="901.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 347.000000 980.000000 L 113.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="229.000000" y="986.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 107.000000 1110.000000 L 339.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/></g><mask id="1909736420" maskUnits="userSpaceOnUse" x="-100" y="-100" width="698" height="1368">
 <rect x="-100" y="-100" width="698" height="1368" fill="white"></rect>
 <rect x="148.000000" y="360.000000" width="103" height="21" fill="black"></rect>
 <rect x="173.000000" y="450.000000" width="102" height="21" fill="black"></rect>
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 05991a5af..b9ac8aeed 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="698" height="1368" viewBox="-78 -28 698 1368"><style type="text/css">
@@ -18,7 +19,27 @@ width="698" height="1368" viewBox="-78 -28 698 1368"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="b.1"><g class="shape" ><rect x="343" y="654" width="12" height="228" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="93" y="948" width="12" height="178" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="343" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="339" y="784" width="20" height="82" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="89" y="964" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 103.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="199.500000" y="376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 351.000000 590.000000 L 439.000000 590.000000 S 449.000000 590.000000 449.000000 600.000000 L 449.000000 660.000000 S 449.000000 670.000000 439.000000 670.000000 L 359.000000 670.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="633.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 357.000000 720.000000 L 439.000000 720.000000 S 449.000000 720.000000 449.000000 730.000000 L 449.000000 790.000000 S 449.000000 800.000000 439.000000 800.000000 L 363.000000 800.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.500000" y="764.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 361.000000 850.000000 L 439.000000 850.000000 S 449.000000 850.000000 449.000000 860.000000 L 449.000000 920.000000 S 449.000000 930.000000 439.000000 930.000000 L 353.000000 930.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="901.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 347.000000 980.000000 L 113.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="229.000000" y="986.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 107.000000 1110.000000 L 339.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/></g><mask id="1909736420" maskUnits="userSpaceOnUse" x="-100" y="-100" width="698" height="1368">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1239.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1909736420)"/></g><g id="b.1"><g class="shape" ><rect x="343" y="654" width="12" height="228" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="93" y="948" width="12" height="178" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="343" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="339" y="784" width="20" height="82" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="89" y="964" width="20" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 103.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="199.500000" y="376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 101.000000 460.000000 L 345.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="224.000000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 351.000000 590.000000 L 439.000000 590.000000 S 449.000000 590.000000 449.000000 600.000000 L 449.000000 660.000000 S 449.000000 670.000000 439.000000 670.000000 L 359.000000 670.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="633.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 357.000000 720.000000 L 439.000000 720.000000 S 449.000000 720.000000 449.000000 730.000000 L 449.000000 790.000000 S 449.000000 800.000000 439.000000 800.000000 L 363.000000 800.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.500000" y="764.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 361.000000 850.000000 L 439.000000 850.000000 S 449.000000 850.000000 449.000000 860.000000 L 449.000000 920.000000 S 449.000000 930.000000 439.000000 930.000000 L 353.000000 930.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="449.000000" y="901.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 347.000000 980.000000 L 113.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/><text class="text-italic" x="229.000000" y="986.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 107.000000 1110.000000 L 339.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1909736420)"/></g><mask id="1909736420" maskUnits="userSpaceOnUse" x="-100" y="-100" width="698" height="1368">
 <rect x="-100" y="-100" width="698" height="1368" fill="white"></rect>
 <rect x="148.000000" y="360.000000" width="103" height="21" fill="black"></rect>
 <rect x="173.000000" y="450.000000" width="102" height="21" fill="black"></rect>
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 721c2e0cc..5b7083c7b 100644
--- a/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1602" height="1870" viewBox="-78 -28 1602 1870"><style type="text/css">
@@ -18,7 +19,27 @@ width="1602" height="1870" viewBox="-78 -28 1602 1870"><style type="text/css">
 }
 
 ]]>
-</style><g id="alice"><g class="shape" ><path d="M 182 259 H 24 V 256.7545 C 24 229.8088 41.3499 205.5168 68.6471 193.8811 C 53.6105 184.491 44.5886 169.1809 44.5886 152.4419 C 44.5886 124.0672 70.7291 101 102.8843 101 C 135.0395 101 161.1801 124.0672 161.1801 152.4419 C 161.1801 169.1809 152.3895 184.2869 137.1215 194.0853 C 164.4187 205.721 181.7686 230.0129 181.7686 256.9587 V 259 H 182 Z" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="103.000000" y="280.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="103.000000" dy="0.000000">Alice</tspan><tspan x="103.000000" dy="19.333333">line</tspan><tspan x="103.000000" dy="19.333333">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 447 291 H 297 V 289.2093 C 297 267.7209 313.4714 248.3488 339.3865 239.0698 C 325.1113 231.5814 316.5461 219.3721 316.5461 206.0233 C 316.5461 183.3953 341.3631 165 371.8902 165 C 402.4173 165 427.2343 183.3953 427.2343 206.0233 C 427.2343 219.3721 418.8888 231.4186 404.3939 239.2326 C 430.309 248.5117 446.7804 267.8838 446.7804 289.3721 V 291 H 447 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:5;"/></g><text class="text" x="372.000000" y="312.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Bob</text></g><g id="db"><g class="shape" ><path d="M 614 210 C 614 186 681.5 186 689 186 C 696.5 186 764 186 764 210 V 288 C 764 312 696.5 312 689 312 C 681.5 312 614 312 614 288 V 210 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 614 210 C 614 234 681.5 234 689 234 C 696.5 234 764 234 764 210" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="689.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">db</text></g><g id="queue"><g class="shape" ><path d="M 955 186 H 1057 C 1081 186 1081 242.7 1081 249 C 1081 255.3 1081 312 1057 312 H 955 C 931 312 931 255.3 931 249 C 931 242.7 931 186 955 186 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1057 186 C 1033 186 1033 242.7 1033 249 C 1033 255.3 1033 312 1057 312" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="994.000000" y="252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="service"><g class="shape" ><rect x="1225" y="74" width="197" height="238" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1323.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="1323.500000" dy="0.000000">an</tspan><tspan x="1323.500000" dy="17.250000">odd</tspan><tspan x="1323.500000" dy="17.250000">service</tspan><tspan x="1323.500000" dy="17.250000">with</tspan><tspan x="1323.500000" dy="17.250000">a</tspan><tspan x="1323.500000" dy="17.250000">name</tspan><tspan x="1323.500000" dy="17.250000">in</tspan><tspan x="1323.500000" dy="17.250000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 103.000000 319.000000 L 103.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(bob -- )[0]"><path d="M 372.000000 320.500000 L 372.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(db -- )[0]"><path d="M 689.000000 314.000000 L 689.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(queue -- )[0]"><path d="M 1006.000000 314.000000 L 1006.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(service -- )[0]"><path d="M 1323.500000 314.000000 L 1323.500000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 105.000000 442.000000 L 366.500000 442.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="448.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 375.500000 572.000000 L 1319.500000 572.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="847.500000" y="578.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1321.500000 702.000000 L 693.000000 702.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="1006.500000" y="708.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">validate credentials</text></g><g id="(db -&gt; service)[0]"><path d="M 691.000000 832.000000 L 1319.500000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(service -&gt; bob)[0]"><path d="M 1321.500000 962.000000 L 377.500000 962.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(bob -&gt; alice)[0]"><path d="M 368.500000 1092.000000 L 107.000000 1092.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1098.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 105.000000 1222.000000 L 366.500000 1222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1228.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 375.500000 1352.000000 L 1002.000000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="689.500000" y="1358.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 class="connection" fill="green" stroke-width="5" points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" /> </marker><path d="M 1002.500000 1482.000000 L 382.000000 1482.000000" class="connection" style="fill:none;stroke:green;opacity:1.000000;stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#1146312030)"/><text class="text-italic" x="689.000000" y="1488.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 368.500000 1612.000000 L 107.000000 1612.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="1618.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Response</text></g><mask id="1146312030" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1602" height="1870">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 182 259 H 24 V 256.7545 C 24 229.8088 41.3499 205.5168 68.6471 193.8811 C 53.6105 184.491 44.5886 169.1809 44.5886 152.4419 C 44.5886 124.0672 70.7291 101 102.8843 101 C 135.0395 101 161.1801 124.0672 161.1801 152.4419 C 161.1801 169.1809 152.3895 184.2869 137.1215 194.0853 C 164.4187 205.721 181.7686 230.0129 181.7686 256.9587 V 259 H 182 Z" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="103.000000" y="280.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="103.000000" dy="0.000000">Alice</tspan><tspan x="103.000000" dy="19.333333">line</tspan><tspan x="103.000000" dy="19.333333">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 447 291 H 297 V 289.2093 C 297 267.7209 313.4714 248.3488 339.3865 239.0698 C 325.1113 231.5814 316.5461 219.3721 316.5461 206.0233 C 316.5461 183.3953 341.3631 165 371.8902 165 C 402.4173 165 427.2343 183.3953 427.2343 206.0233 C 427.2343 219.3721 418.8888 231.4186 404.3939 239.2326 C 430.309 248.5117 446.7804 267.8838 446.7804 289.3721 V 291 H 447 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:5;"/></g><text class="text" x="372.000000" y="312.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Bob</text></g><g id="db"><g class="shape" ><path d="M 614 210 C 614 186 681.5 186 689 186 C 696.5 186 764 186 764 210 V 288 C 764 312 696.5 312 689 312 C 681.5 312 614 312 614 288 V 210 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 614 210 C 614 234 681.5 234 689 234 C 696.5 234 764 234 764 210" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="689.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">db</text></g><g id="queue"><g class="shape" ><path d="M 955 186 H 1057 C 1081 186 1081 242.7 1081 249 C 1081 255.3 1081 312 1057 312 H 955 C 931 312 931 255.3 931 249 C 931 242.7 931 186 955 186 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1057 186 C 1033 186 1033 242.7 1033 249 C 1033 255.3 1033 312 1057 312" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="994.000000" y="252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="service"><g class="shape" ><rect x="1225" y="74" width="197" height="238" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1323.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="1323.500000" dy="0.000000">an</tspan><tspan x="1323.500000" dy="17.250000">odd</tspan><tspan x="1323.500000" dy="17.250000">service</tspan><tspan x="1323.500000" dy="17.250000">with</tspan><tspan x="1323.500000" dy="17.250000">a</tspan><tspan x="1323.500000" dy="17.250000">name</tspan><tspan x="1323.500000" dy="17.250000">in</tspan><tspan x="1323.500000" dy="17.250000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 103.000000 319.000000 L 103.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(bob -- )[0]"><path d="M 372.000000 320.500000 L 372.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(db -- )[0]"><path d="M 689.000000 314.000000 L 689.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(queue -- )[0]"><path d="M 1006.000000 314.000000 L 1006.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(service -- )[0]"><path d="M 1323.500000 314.000000 L 1323.500000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 105.000000 442.000000 L 366.500000 442.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="448.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 375.500000 572.000000 L 1319.500000 572.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="847.500000" y="578.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1321.500000 702.000000 L 693.000000 702.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="1006.500000" y="708.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">validate credentials</text></g><g id="(db -&gt; service)[0]"><path d="M 691.000000 832.000000 L 1319.500000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(service -&gt; bob)[0]"><path d="M 1321.500000 962.000000 L 377.500000 962.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(bob -&gt; alice)[0]"><path d="M 368.500000 1092.000000 L 107.000000 1092.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1098.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 105.000000 1222.000000 L 366.500000 1222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1228.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 375.500000 1352.000000 L 1002.000000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="689.500000" y="1358.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 class="connection" fill="green" stroke-width="5" points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" /> </marker><path d="M 1002.500000 1482.000000 L 382.000000 1482.000000" class="connection" style="fill:none;stroke:green;opacity:1.000000;stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#1146312030)"/><text class="text-italic" x="689.000000" y="1488.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 368.500000 1612.000000 L 107.000000 1612.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="1618.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Response</text></g><mask id="1146312030" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1602" height="1870">
 <rect x="-100" y="-100" width="1602" height="1870" fill="white"></rect>
 <rect x="160.000000" y="432.000000" width="155" height="21" fill="black"></rect>
 <rect x="447.000000" y="562.000000" width="801" height="21" fill="black"></rect>
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 721c2e0cc..5b7083c7b 100644
--- a/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1602" height="1870" viewBox="-78 -28 1602 1870"><style type="text/css">
@@ -18,7 +19,27 @@ width="1602" height="1870" viewBox="-78 -28 1602 1870"><style type="text/css">
 }
 
 ]]>
-</style><g id="alice"><g class="shape" ><path d="M 182 259 H 24 V 256.7545 C 24 229.8088 41.3499 205.5168 68.6471 193.8811 C 53.6105 184.491 44.5886 169.1809 44.5886 152.4419 C 44.5886 124.0672 70.7291 101 102.8843 101 C 135.0395 101 161.1801 124.0672 161.1801 152.4419 C 161.1801 169.1809 152.3895 184.2869 137.1215 194.0853 C 164.4187 205.721 181.7686 230.0129 181.7686 256.9587 V 259 H 182 Z" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="103.000000" y="280.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="103.000000" dy="0.000000">Alice</tspan><tspan x="103.000000" dy="19.333333">line</tspan><tspan x="103.000000" dy="19.333333">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 447 291 H 297 V 289.2093 C 297 267.7209 313.4714 248.3488 339.3865 239.0698 C 325.1113 231.5814 316.5461 219.3721 316.5461 206.0233 C 316.5461 183.3953 341.3631 165 371.8902 165 C 402.4173 165 427.2343 183.3953 427.2343 206.0233 C 427.2343 219.3721 418.8888 231.4186 404.3939 239.2326 C 430.309 248.5117 446.7804 267.8838 446.7804 289.3721 V 291 H 447 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:5;"/></g><text class="text" x="372.000000" y="312.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Bob</text></g><g id="db"><g class="shape" ><path d="M 614 210 C 614 186 681.5 186 689 186 C 696.5 186 764 186 764 210 V 288 C 764 312 696.5 312 689 312 C 681.5 312 614 312 614 288 V 210 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 614 210 C 614 234 681.5 234 689 234 C 696.5 234 764 234 764 210" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="689.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">db</text></g><g id="queue"><g class="shape" ><path d="M 955 186 H 1057 C 1081 186 1081 242.7 1081 249 C 1081 255.3 1081 312 1057 312 H 955 C 931 312 931 255.3 931 249 C 931 242.7 931 186 955 186 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1057 186 C 1033 186 1033 242.7 1033 249 C 1033 255.3 1033 312 1057 312" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="994.000000" y="252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="service"><g class="shape" ><rect x="1225" y="74" width="197" height="238" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1323.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="1323.500000" dy="0.000000">an</tspan><tspan x="1323.500000" dy="17.250000">odd</tspan><tspan x="1323.500000" dy="17.250000">service</tspan><tspan x="1323.500000" dy="17.250000">with</tspan><tspan x="1323.500000" dy="17.250000">a</tspan><tspan x="1323.500000" dy="17.250000">name</tspan><tspan x="1323.500000" dy="17.250000">in</tspan><tspan x="1323.500000" dy="17.250000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 103.000000 319.000000 L 103.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(bob -- )[0]"><path d="M 372.000000 320.500000 L 372.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(db -- )[0]"><path d="M 689.000000 314.000000 L 689.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(queue -- )[0]"><path d="M 1006.000000 314.000000 L 1006.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(service -- )[0]"><path d="M 1323.500000 314.000000 L 1323.500000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 105.000000 442.000000 L 366.500000 442.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="448.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 375.500000 572.000000 L 1319.500000 572.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="847.500000" y="578.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1321.500000 702.000000 L 693.000000 702.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="1006.500000" y="708.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">validate credentials</text></g><g id="(db -&gt; service)[0]"><path d="M 691.000000 832.000000 L 1319.500000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(service -&gt; bob)[0]"><path d="M 1321.500000 962.000000 L 377.500000 962.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(bob -&gt; alice)[0]"><path d="M 368.500000 1092.000000 L 107.000000 1092.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1098.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 105.000000 1222.000000 L 366.500000 1222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1228.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 375.500000 1352.000000 L 1002.000000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="689.500000" y="1358.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 class="connection" fill="green" stroke-width="5" points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" /> </marker><path d="M 1002.500000 1482.000000 L 382.000000 1482.000000" class="connection" style="fill:none;stroke:green;opacity:1.000000;stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#1146312030)"/><text class="text-italic" x="689.000000" y="1488.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 368.500000 1612.000000 L 107.000000 1612.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="1618.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Response</text></g><mask id="1146312030" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1602" height="1870">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 182 259 H 24 V 256.7545 C 24 229.8088 41.3499 205.5168 68.6471 193.8811 C 53.6105 184.491 44.5886 169.1809 44.5886 152.4419 C 44.5886 124.0672 70.7291 101 102.8843 101 C 135.0395 101 161.1801 124.0672 161.1801 152.4419 C 161.1801 169.1809 152.3895 184.2869 137.1215 194.0853 C 164.4187 205.721 181.7686 230.0129 181.7686 256.9587 V 259 H 182 Z" style="fill:#EDF0FD;stroke:red;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="103.000000" y="280.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="103.000000" dy="0.000000">Alice</tspan><tspan x="103.000000" dy="19.333333">line</tspan><tspan x="103.000000" dy="19.333333">breaker</tspan></text></g><g id="bob"><g class="shape" ><path d="M 447 291 H 297 V 289.2093 C 297 267.7209 313.4714 248.3488 339.3865 239.0698 C 325.1113 231.5814 316.5461 219.3721 316.5461 206.0233 C 316.5461 183.3953 341.3631 165 371.8902 165 C 402.4173 165 427.2343 183.3953 427.2343 206.0233 C 427.2343 219.3721 418.8888 231.4186 404.3939 239.2326 C 430.309 248.5117 446.7804 267.8838 446.7804 289.3721 V 291 H 447 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:5;"/></g><text class="text" x="372.000000" y="312.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">Bob</text></g><g id="db"><g class="shape" ><path d="M 614 210 C 614 186 681.5 186 689 186 C 696.5 186 764 186 764 210 V 288 C 764 312 696.5 312 689 312 C 681.5 312 614 312 614 288 V 210 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 614 210 C 614 234 681.5 234 689 234 C 696.5 234 764 234 764 210" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="689.000000" y="264.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">db</text></g><g id="queue"><g class="shape" ><path d="M 955 186 H 1057 C 1081 186 1081 242.7 1081 249 C 1081 255.3 1081 312 1057 312 H 955 C 931 312 931 255.3 931 249 C 931 242.7 931 186 955 186 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1057 186 C 1033 186 1033 242.7 1033 249 C 1033 255.3 1033 312 1057 312" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="994.000000" y="252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">queue</text></g><g id="service"><g class="shape" ><rect x="1225" y="74" width="197" height="238" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1323.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="1323.500000" dy="0.000000">an</tspan><tspan x="1323.500000" dy="17.250000">odd</tspan><tspan x="1323.500000" dy="17.250000">service</tspan><tspan x="1323.500000" dy="17.250000">with</tspan><tspan x="1323.500000" dy="17.250000">a</tspan><tspan x="1323.500000" dy="17.250000">name</tspan><tspan x="1323.500000" dy="17.250000">in</tspan><tspan x="1323.500000" dy="17.250000">multiple lines</tspan></text></g><g id="(alice -- )[0]"><path d="M 103.000000 319.000000 L 103.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(bob -- )[0]"><path d="M 372.000000 320.500000 L 372.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(db -- )[0]"><path d="M 689.000000 314.000000 L 689.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(queue -- )[0]"><path d="M 1006.000000 314.000000 L 1006.000000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(service -- )[0]"><path d="M 1323.500000 314.000000 L 1323.500000 1741.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1146312030)"/></g><g id="(alice -&gt; bob)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 105.000000 442.000000 L 366.500000 442.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="448.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Request</text></g><g id="(bob -&gt; service)[0]"><path d="M 375.500000 572.000000 L 1319.500000 572.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="847.500000" y="578.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 1321.500000 702.000000 L 693.000000 702.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="1006.500000" y="708.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">validate credentials</text></g><g id="(db -&gt; service)[0]"><path d="M 691.000000 832.000000 L 1319.500000 832.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(service -&gt; bob)[0]"><path d="M 1321.500000 962.000000 L 377.500000 962.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:8.000000,7.892511;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/></g><g id="(bob -&gt; alice)[0]"><path d="M 368.500000 1092.000000 L 107.000000 1092.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1098.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Authentication Response</text></g><g id="(alice -&gt; bob)[1]"><path d="M 105.000000 1222.000000 L 366.500000 1222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="238.000000" y="1228.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Request</text></g><g id="(bob -&gt; queue)[0]"><path d="M 375.500000 1352.000000 L 1002.000000 1352.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="689.500000" y="1358.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">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 class="connection" fill="green" stroke-width="5" points="0.000000,0.000000 25.000000,15.000000 0.000000,30.000000" /> </marker><path d="M 1002.500000 1482.000000 L 382.000000 1482.000000" class="connection" style="fill:none;stroke:green;opacity:1.000000;stroke-width:5;stroke-dasharray:15.000000,14.106102;" marker-end="url(#mk-1225746125)" mask="url(#1146312030)"/><text class="text-italic" x="689.000000" y="1488.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">stored</text></g><g id="(bob -&gt; alice)[1]"><path d="M 368.500000 1612.000000 L 107.000000 1612.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1146312030)"/><text class="text-italic" x="237.500000" y="1618.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">Another authentication Response</text></g><mask id="1146312030" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1602" height="1870">
 <rect x="-100" y="-100" width="1602" height="1870" fill="white"></rect>
 <rect x="160.000000" y="432.000000" width="155" height="21" fill="black"></rect>
 <rect x="447.000000" y="562.000000" width="801" height="21" fill="black"></rect>
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 5051557e6..39b8a5c94 100644
--- a/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1628" height="2148" viewBox="-78 -28 1628 2148"><style type="text/css">
@@ -18,7 +19,27 @@ width="1628" height="2148" viewBox="-78 -28 1628 2148"><style type="text/css">
 }
 
 ]]>
-</style><g id="scorer"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="scorer.t"><g class="shape" ><rect x="93" y="314" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="593" y="574" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="843" y="834" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="1093" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="1343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="593" y="1484" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="593" y="1614" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="1343" y="1744" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="1343" y="1874" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="839" y="964" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 339.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="224.000000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 109.000000 460.000000 L 341.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="224.500000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 107.000000 590.000000 L 589.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="596.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 109.000000 720.000000 L 591.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 107.000000 850.000000 L 839.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="474.000000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 351.000000 980.000000 L 835.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 861.000000 1110.000000 L 1089.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="976.000000" y="1116.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 103.000000 1240.000000 L 841.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="471.500000" y="1246.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 107.000000 1370.000000 L 1339.500000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 107.000000 1500.000000 L 589.000000 1500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="1506.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 107.000000 1630.000000 L 589.000000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.000000" y="1636.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 107.000000 1760.000000 L 1339.500000 1760.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1766.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 107.000000 1890.000000 L 1339.500000 1890.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1896.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><mask id="1062743445" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1628" height="2148">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="scorer.t"><g class="shape" ><rect x="93" y="314" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="593" y="574" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="843" y="834" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="1093" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="1343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="593" y="1484" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="593" y="1614" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="1343" y="1744" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="1343" y="1874" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="839" y="964" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 339.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="224.000000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 109.000000 460.000000 L 341.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="224.500000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 107.000000 590.000000 L 589.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="596.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 109.000000 720.000000 L 591.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 107.000000 850.000000 L 839.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="474.000000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 351.000000 980.000000 L 835.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 861.000000 1110.000000 L 1089.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="976.000000" y="1116.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 103.000000 1240.000000 L 841.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="471.500000" y="1246.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 107.000000 1370.000000 L 1339.500000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 107.000000 1500.000000 L 589.000000 1500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="1506.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 107.000000 1630.000000 L 589.000000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.000000" y="1636.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 107.000000 1760.000000 L 1339.500000 1760.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1766.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 107.000000 1890.000000 L 1339.500000 1890.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1896.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><mask id="1062743445" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1628" height="2148">
 <rect x="-100" y="-100" width="1628" height="2148" fill="white"></rect>
 <rect x="194.000000" y="320.000000" width="60" height="21" fill="black"></rect>
 <rect x="210.000000" y="450.000000" width="29" height="21" fill="black"></rect>
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 5051557e6..39b8a5c94 100644
--- a/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1628" height="2148" viewBox="-78 -28 1628 2148"><style type="text/css">
@@ -18,7 +19,27 @@ width="1628" height="2148" viewBox="-78 -28 1628 2148"><style type="text/css">
 }
 
 ]]>
-</style><g id="scorer"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="scorer.t"><g class="shape" ><rect x="93" y="314" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="593" y="574" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="843" y="834" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="1093" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="1343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="593" y="1484" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="593" y="1614" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="1343" y="1744" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="1343" y="1874" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="839" y="964" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 339.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="224.000000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 109.000000 460.000000 L 341.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="224.500000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 107.000000 590.000000 L 589.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="596.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 109.000000 720.000000 L 591.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 107.000000 850.000000 L 839.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="474.000000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 351.000000 980.000000 L 835.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 861.000000 1110.000000 L 1089.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="976.000000" y="1116.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 103.000000 1240.000000 L 841.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="471.500000" y="1246.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 107.000000 1370.000000 L 1339.500000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 107.000000 1500.000000 L 589.000000 1500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="1506.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 107.000000 1630.000000 L 589.000000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.000000" y="1636.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 107.000000 1760.000000 L 1339.500000 1760.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1766.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 107.000000 1890.000000 L 1339.500000 1890.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1896.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><mask id="1062743445" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1628" height="2148">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="itemResponse"><g class="shape" ><rect x="249" y="74" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="item"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="essayRubric"><g class="shape" ><rect x="756" y="74" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="849.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="concept"><g class="shape" ><rect x="1019" y="74" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1099.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="itemOutcome"><g class="shape" ><rect x="1251" y="74" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1349.500000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(scorer -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemResponse -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(item -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(essayRubric -- )[0]"><path d="M 849.000000 202.000000 L 849.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(concept -- )[0]"><path d="M 1099.000000 202.000000 L 1099.000000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="(itemOutcome -- )[0]"><path d="M 1349.500000 202.000000 L 1349.500000 2019.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1062743445)"/></g><g id="scorer.t"><g class="shape" ><rect x="93" y="314" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemResponse.t"><g class="shape" ><rect x="343" y="314" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t1"><g class="shape" ><rect x="593" y="574" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t"><g class="shape" ><rect x="843" y="834" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="concept.t"><g class="shape" ><rect x="1093" y="1094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t1"><g class="shape" ><rect x="1343" y="1354" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t2"><g class="shape" ><rect x="593" y="1484" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="item.t3"><g class="shape" ><rect x="593" y="1614" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t2"><g class="shape" ><rect x="1343" y="1744" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="itemOutcome.t3"><g class="shape" ><rect x="1343" y="1874" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="essayRubric.t.c"><g class="shape" ><rect x="839" y="964" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(scorer.t -&gt; itemResponse.t)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 339.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="224.000000" y="336.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="(scorer.t &lt;- itemResponse.t)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 109.000000 460.000000 L 341.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="224.500000" y="466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="(scorer.t -&gt; item.t1)[0]"><path d="M 107.000000 590.000000 L 589.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="596.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="(scorer.t &lt;- item.t1)[0]"><path d="M 109.000000 720.000000 L 591.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="(scorer.t -&gt; essayRubric.t)[0]"><path d="M 107.000000 850.000000 L 839.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="474.000000" y="856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 351.000000 980.000000 L 835.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/></g><g id="(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 861.000000 1110.000000 L 1089.000000 1110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="976.000000" y="1116.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="(scorer &lt;- essayRubric.t)[0]"><path d="M 103.000000 1240.000000 L 841.000000 1240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1062743445)"/><text class="text-italic" x="471.500000" y="1246.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 107.000000 1370.000000 L 1339.500000 1370.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1376.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="(scorer.t -&gt; item.t2)[0]"><path d="M 107.000000 1500.000000 L 589.000000 1500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.500000" y="1506.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="(scorer.t -&gt; item.t3)[0]"><path d="M 107.000000 1630.000000 L 589.000000 1630.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="349.000000" y="1636.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 107.000000 1760.000000 L 1339.500000 1760.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1766.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 107.000000 1890.000000 L 1339.500000 1890.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1062743445)"/><text class="text-italic" x="724.500000" y="1896.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><mask id="1062743445" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1628" height="2148">
 <rect x="-100" y="-100" width="1628" height="2148" fill="white"></rect>
 <rect x="194.000000" y="320.000000" width="60" height="21" fill="black"></rect>
 <rect x="210.000000" y="450.000000" width="29" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
index 9a99476af..6d0144b14 100644
--- a/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="3404" height="4273" viewBox="-102 -102 3404 4273"><style type="text/css">
@@ -18,7 +19,27 @@ width="3404" height="4273" viewBox="-102 -102 3404 4273"><style type="text/css">
 }
 
 ]]>
-</style><g id="a_shape"><g class="shape" ><ellipse class="shape" cx="1612.000000" cy="82.000000" rx="82.000000" ry="82.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1612.000000" y="85.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="1730" y="314" width="1472" height="2080" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="2466.000000" y="347.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a_sequence</text></g><g id="another"><g class="shape" ><rect x="0" y="264" width="1572" height="2180" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="786.000000" y="297.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">another</text></g><g id="finally"><g class="shape" ><path d="M 377 2544 H 2001 C 2025 2544 2025 3230.25 2025 3306.5 C 2025 3382.75 2025 4069 2001 4069 H 377 C 353 4069 353 3382.75 353 3306.5 C 353 3230.25 353 2544 377 2544 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 2001 2544 C 1977 2544 1977 3230.25 1977 3306.5 C 1977 3382.75 1977 4069 2001 4069" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="1177.000000" y="2577.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="sequence"><g class="shape" ><rect x="2380" y="3244" width="172" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2466.000000" y="3310.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sequence</text></g><g id="another.sequence"><g class="shape" ><rect x="50" y="317" width="1472" height="2075" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="786.000000" y="346.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="463" y="2594" width="1473" height="1425" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="1199.500000" y="2623.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="1754" y="424" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1829.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="1979" y="424" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2079.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="2254" y="424" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2329.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="2486" y="424" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2579.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="2749" y="424" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2829.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="2981" y="424" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="3079.500000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="487" y="2699" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="562.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="732" y="2699" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="812.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="969" y="2699" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1062.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="1237" y="2699" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1312.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="1464" y="2699" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1562.500000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="1712" y="2699" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1812.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="74" y="422" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="149.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="299" y="422" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="574" y="422" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="649.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="806" y="422" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="899.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="1069" y="422" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1149.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="1301" y="422" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1399.500000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1694.976729 95.304210 C 2311.600000 190.200000 2466.250000 274.000000 2466.250000 311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 1529.025036 95.315464 C 935.000000 190.200000 786.000000 274.500000 786.000000 313.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 2466.250000 2395.000000 C 2466.250000 2434.000000 2466.250000 2454.000000 2466.250000 2469.000000 C 2466.250000 2484.000000 2466.250000 2683.900000 2466.250000 3239.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 786.000000 2395.500000 C 786.000000 2433.700000 786.000000 2454.000000 786.000000 2469.000000 C 786.000000 2484.000000 791.400000 2554.000000 811.574553 2591.360284" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(a_shape -- finally)[0]"><path d="M 1612.000000 166.000000 C 1612.000000 204.000000 1612.000000 224.000000 1612.000000 239.000000 C 1612.000000 254.000000 1612.000000 482.000000 1612.000000 809.000000 C 1612.000000 1136.000000 1612.000000 1572.000000 1612.000000 1899.000000 C 1612.000000 2226.000000 1612.000000 2504.000000 1612.000000 2542.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2184987679)"/></g><g id="(a_sequence.scorer -- )[0]"><path d="M 1829.000000 552.000000 L 1829.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 2079.000000 552.000000 L 2079.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.item -- )[0]"><path d="M 2329.000000 552.000000 L 2329.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 2579.000000 552.000000 L 2579.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.concept -- )[0]"><path d="M 2829.000000 552.000000 L 2829.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 3079.500000 552.000000 L 3079.500000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.scorer -- )[0]"><path d="M 149.000000 550.000000 L 149.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 399.000000 550.000000 L 399.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.item -- )[0]"><path d="M 649.000000 550.000000 L 649.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 899.000000 550.000000 L 899.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.concept -- )[0]"><path d="M 1149.000000 550.000000 L 1149.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 1399.500000 550.000000 L 1399.500000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 562.000000 2827.000000 L 562.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.concept -- )[0]"><path d="M 812.000000 2827.000000 L 812.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 1062.000000 2827.000000 L 1062.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.item -- )[0]"><path d="M 1312.000000 2827.000000 L 1312.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 1562.500000 2827.000000 L 1562.500000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 1812.000000 2827.000000 L 1812.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="1823" y="664" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="2073" y="664" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="2323" y="924" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="2573" y="1184" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="2823" y="1444" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="3073" y="1704" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="2323" y="1834" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="2323" y="1964" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="3073" y="2094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="3073" y="2224" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="2569" y="1314" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="143" y="662" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="393" y="662" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="643" y="922" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="893" y="1182" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="1143" y="1442" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="1393" y="1702" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="643" y="1832" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="643" y="1962" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="1393" y="2092" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="1393" y="2222" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="1806" y="2939" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="1306" y="2923" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="1056" y="3037" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="806" y="3151" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="1556" y="3395" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="556" y="3589" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="1806" y="3849" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="889" y="1312" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="1302" y="2939" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="1052" y="3053" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="802" y="3167" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="1552" y="3411" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="1048" y="3069" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="798" y="3183" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="1548" y="3427" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="794" y="3199" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="1544" y="3443" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1540" y="3459" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1837.000000 680.000000 L 2069.000000 680.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="1954.000000" y="686.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1839.000000 810.000000 L 2071.000000 810.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="1954.500000" y="816.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1837.000000 940.000000 L 2319.000000 940.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2079.500000" y="946.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1839.000000 1070.000000 L 2321.000000 1070.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="2079.500000" y="1076.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1837.000000 1200.000000 L 2569.000000 1200.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2204.000000" y="1206.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 2081.000000 1330.000000 L 2565.000000 1330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 2591.000000 1460.000000 L 2819.000000 1460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2706.000000" y="1466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1833.000000 1590.000000 L 2571.000000 1590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="2201.500000" y="1596.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 1839.000000 1720.000000 L 3069.500000 1720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2454.500000" y="1726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1839.000000 1850.000000 L 2319.000000 1850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2079.500000" y="1856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1837.000000 1980.000000 L 2319.000000 1980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2079.000000" y="1986.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 1837.000000 2110.000000 L 3071.500000 2110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2184987679)"/><text class="text-italic" x="2454.500000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 1837.000000 2240.000000 L 3071.500000 2240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2184987679)"/><text class="text-italic" x="2454.500000" y="2246.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 157.000000 678.000000 L 389.000000 678.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="274.000000" y="684.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 159.000000 808.000000 L 391.000000 808.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="274.500000" y="814.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 157.000000 938.000000 L 639.000000 938.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="399.500000" y="944.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 159.000000 1068.000000 L 641.000000 1068.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="399.500000" y="1074.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 157.000000 1198.000000 L 889.000000 1198.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="524.000000" y="1204.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 401.000000 1328.000000 L 885.000000 1328.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 911.000000 1458.000000 L 1139.000000 1458.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="1026.000000" y="1464.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 153.000000 1588.000000 L 891.000000 1588.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="521.500000" y="1594.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 157.000000 1718.000000 L 1389.500000 1718.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="774.500000" y="1724.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 159.000000 1848.000000 L 639.000000 1848.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="399.500000" y="1854.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 157.000000 1978.000000 L 639.000000 1978.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="399.000000" y="1984.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 157.000000 2108.000000 L 1389.500000 2108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="774.500000" y="2114.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 157.000000 2238.000000 L 1389.500000 2238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="774.500000" y="2244.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 1804.000000 2955.000000 L 1326.000000 2955.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 1300.000000 3085.000000 L 1080.000000 3085.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 1046.000000 3215.000000 L 834.000000 3215.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 1304.000000 3345.000000 L 1076.000000 3345.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 832.000000 3475.000000 L 1536.500000 3475.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 570.000000 3605.000000 L 1302.000000 3605.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1538.500000 3735.000000 L 566.000000 3735.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 564.000000 3865.000000 L 1802.000000 3865.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><mask id="2184987679" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3404" height="4273">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" cx="1612.000000" cy="82.000000" rx="82.000000" ry="82.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1612.000000" y="85.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="1730" y="314" width="1472" height="2080" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="2466.000000" y="347.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a_sequence</text></g><g id="another"><g class="shape" ><rect x="0" y="264" width="1572" height="2180" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="786.000000" y="297.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">another</text></g><g id="finally"><g class="shape" ><path d="M 377 2544 H 2001 C 2025 2544 2025 3230.25 2025 3306.5 C 2025 3382.75 2025 4069 2001 4069 H 377 C 353 4069 353 3382.75 353 3306.5 C 353 3230.25 353 2544 377 2544 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 2001 2544 C 1977 2544 1977 3230.25 1977 3306.5 C 1977 3382.75 1977 4069 2001 4069" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="1177.000000" y="2577.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="sequence"><g class="shape" ><rect x="2380" y="3244" width="172" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2466.000000" y="3310.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sequence</text></g><g id="another.sequence"><g class="shape" ><rect x="50" y="317" width="1472" height="2075" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="786.000000" y="346.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="463" y="2594" width="1473" height="1425" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="1199.500000" y="2623.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="1754" y="424" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1829.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="1979" y="424" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2079.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="2254" y="424" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2329.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="2486" y="424" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2579.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="2749" y="424" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2829.000000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="2981" y="424" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="3079.500000" y="490.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="487" y="2699" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="562.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="732" y="2699" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="812.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="969" y="2699" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1062.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="1237" y="2699" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1312.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="1464" y="2699" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1562.500000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="1712" y="2699" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1812.000000" y="2765.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="74" y="422" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="149.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="299" y="422" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="574" y="422" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="649.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="806" y="422" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="899.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="1069" y="422" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1149.000000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="1301" y="422" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1399.500000" y="488.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1694.976729 95.304210 C 2311.600000 190.200000 2466.250000 274.000000 2466.250000 311.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 1529.025036 95.315464 C 935.000000 190.200000 786.000000 274.500000 786.000000 313.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 2466.250000 2395.000000 C 2466.250000 2434.000000 2466.250000 2454.000000 2466.250000 2469.000000 C 2466.250000 2484.000000 2466.250000 2683.900000 2466.250000 3239.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 786.000000 2395.500000 C 786.000000 2433.700000 786.000000 2454.000000 786.000000 2469.000000 C 786.000000 2484.000000 791.400000 2554.000000 811.574553 2591.360284" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="(a_shape -- finally)[0]"><path d="M 1612.000000 166.000000 C 1612.000000 204.000000 1612.000000 224.000000 1612.000000 239.000000 C 1612.000000 254.000000 1612.000000 482.000000 1612.000000 809.000000 C 1612.000000 1136.000000 1612.000000 1572.000000 1612.000000 1899.000000 C 1612.000000 2226.000000 1612.000000 2504.000000 1612.000000 2542.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2184987679)"/></g><g id="(a_sequence.scorer -- )[0]"><path d="M 1829.000000 552.000000 L 1829.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 2079.000000 552.000000 L 2079.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.item -- )[0]"><path d="M 2329.000000 552.000000 L 2329.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 2579.000000 552.000000 L 2579.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.concept -- )[0]"><path d="M 2829.000000 552.000000 L 2829.000000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 3079.500000 552.000000 L 3079.500000 2369.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.scorer -- )[0]"><path d="M 149.000000 550.000000 L 149.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 399.000000 550.000000 L 399.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.item -- )[0]"><path d="M 649.000000 550.000000 L 649.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 899.000000 550.000000 L 899.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.concept -- )[0]"><path d="M 1149.000000 550.000000 L 1149.000000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 1399.500000 550.000000 L 1399.500000 2367.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 562.000000 2827.000000 L 562.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.concept -- )[0]"><path d="M 812.000000 2827.000000 L 812.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 1062.000000 2827.000000 L 1062.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.item -- )[0]"><path d="M 1312.000000 2827.000000 L 1312.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 1562.500000 2827.000000 L 1562.500000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 1812.000000 2827.000000 L 1812.000000 3994.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2184987679)"/></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="1823" y="664" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="2073" y="664" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="2323" y="924" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="2573" y="1184" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="2823" y="1444" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="3073" y="1704" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="2323" y="1834" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="2323" y="1964" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="3073" y="2094" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="3073" y="2224" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="2569" y="1314" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="143" y="662" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="393" y="662" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="643" y="922" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="893" y="1182" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="1143" y="1442" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="1393" y="1702" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="643" y="1832" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="643" y="1962" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="1393" y="2092" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="1393" y="2222" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="1806" y="2939" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="1306" y="2923" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="1056" y="3037" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="806" y="3151" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="1556" y="3395" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="556" y="3589" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="1806" y="3849" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="889" y="1312" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="1302" y="2939" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="1052" y="3053" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="802" y="3167" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="1552" y="3411" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="1048" y="3069" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="798" y="3183" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="1548" y="3427" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="794" y="3199" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="1544" y="3443" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="1540" y="3459" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1837.000000 680.000000 L 2069.000000 680.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="1954.000000" y="686.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1839.000000 810.000000 L 2071.000000 810.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="1954.500000" y="816.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1837.000000 940.000000 L 2319.000000 940.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2079.500000" y="946.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1839.000000 1070.000000 L 2321.000000 1070.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="2079.500000" y="1076.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1837.000000 1200.000000 L 2569.000000 1200.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2204.000000" y="1206.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 2081.000000 1330.000000 L 2565.000000 1330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 2591.000000 1460.000000 L 2819.000000 1460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2706.000000" y="1466.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1833.000000 1590.000000 L 2571.000000 1590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="2201.500000" y="1596.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 1839.000000 1720.000000 L 3069.500000 1720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2454.500000" y="1726.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1839.000000 1850.000000 L 2319.000000 1850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2079.500000" y="1856.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1837.000000 1980.000000 L 2319.000000 1980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="2079.000000" y="1986.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 1837.000000 2110.000000 L 3071.500000 2110.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2184987679)"/><text class="text-italic" x="2454.500000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 1837.000000 2240.000000 L 3071.500000 2240.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2184987679)"/><text class="text-italic" x="2454.500000" y="2246.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 157.000000 678.000000 L 389.000000 678.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="274.000000" y="684.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 159.000000 808.000000 L 391.000000 808.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="274.500000" y="814.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 157.000000 938.000000 L 639.000000 938.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="399.500000" y="944.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 159.000000 1068.000000 L 641.000000 1068.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="399.500000" y="1074.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 157.000000 1198.000000 L 889.000000 1198.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="524.000000" y="1204.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 401.000000 1328.000000 L 885.000000 1328.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 911.000000 1458.000000 L 1139.000000 1458.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="1026.000000" y="1464.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 153.000000 1588.000000 L 891.000000 1588.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#2184987679)"/><text class="text-italic" x="521.500000" y="1594.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 157.000000 1718.000000 L 1389.500000 1718.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="774.500000" y="1724.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 159.000000 1848.000000 L 639.000000 1848.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="399.500000" y="1854.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 157.000000 1978.000000 L 639.000000 1978.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="399.000000" y="1984.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 157.000000 2108.000000 L 1389.500000 2108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="774.500000" y="2114.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 157.000000 2238.000000 L 1389.500000 2238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/><text class="text-italic" x="774.500000" y="2244.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 1804.000000 2955.000000 L 1326.000000 2955.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 1300.000000 3085.000000 L 1080.000000 3085.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 1046.000000 3215.000000 L 834.000000 3215.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 1304.000000 3345.000000 L 1076.000000 3345.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 832.000000 3475.000000 L 1536.500000 3475.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 570.000000 3605.000000 L 1302.000000 3605.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 1538.500000 3735.000000 L 566.000000 3735.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 564.000000 3865.000000 L 1802.000000 3865.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2184987679)"/></g><mask id="2184987679" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3404" height="4273">
 <rect x="-100" y="-100" width="3404" height="4273" fill="white"></rect>
 <rect x="1924.000000" y="670.000000" width="60" height="21" fill="black"></rect>
 <rect x="1940.000000" y="800.000000" width="29" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
index 88ed06650..6e41bc036 100644
--- a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="3324" height="4393" viewBox="-88 -90 3324 4393"><style type="text/css">
@@ -18,7 +19,27 @@ width="3324" height="4393" viewBox="-88 -90 3324 4393"><style type="text/css">
 }
 
 ]]>
-</style><g id="a_shape"><g class="shape" ><ellipse class="shape" cx="789.000000" cy="94.000000" rx="82.000000" ry="82.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="789.000000" y="97.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="12" y="363" width="1472" height="2080" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="748.000000" y="396.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a_sequence</text></g><g id="another"><g class="shape" ><rect x="1504" y="291" width="1622" height="2225" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2315.000000" y="324.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">another</text></g><g id="finally"><g class="shape" ><path d="M 1527 2626 H 3102 C 3126 2626 3126 3334.75 3126 3413.5 C 3126 3492.25 3126 4201 3102 4201 H 1527 C 1503 4201 1503 3492.25 1503 3413.5 C 1503 3334.75 1503 2626 1527 2626 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 3102 2626 C 3078 2626 3078 3334.75 3078 3413.5 C 3078 3492.25 3078 4201 3102 4201" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="2302.500000" y="2659.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="sequence"><g class="shape" ><rect x="662" y="2626" width="172" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="748.000000" y="2692.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sequence</text></g><g id="another.sequence"><g class="shape" ><rect x="1579" y="366" width="1472" height="2075" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="2315.000000" y="395.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="1578" y="2701" width="1473" height="1425" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="2314.500000" y="2730.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="36" y="473" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="261" y="473" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="536" y="473" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="611.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="768" y="473" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="861.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="1031" y="473" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1111.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="1263" y="473" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1361.500000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="1602" y="2806" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1677.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="1847" y="2806" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1927.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="2084" y="2806" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2177.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="2352" y="2806" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2427.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="2579" y="2806" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2677.500000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="2827" y="2806" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2927.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="1603" y="471" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1678.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="1828" y="471" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1928.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="2103" y="471" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2178.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="2335" y="471" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2428.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="2598" y="471" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2678.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="2830" y="471" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2928.500000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 748.000000 167.000000 L 748.000000 360.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 789.000000 178.000000 L 789.000000 226.000000 S 789.000000 236.000000 799.000000 236.000000 L 2305.000000 236.000000 S 2315.000000 236.000000 2315.000000 246.000000 L 2315.000000 363.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 748.000000 2444.500000 L 748.000000 2622.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 2315.000000 2444.000000 L 2315.000000 2698.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(a_shape -- finally)[0]"><path d="M 830.000000 167.000000 L 830.000000 216.000000 S 830.000000 226.000000 840.000000 226.000000 L 3126.000000 226.000000 S 3136.000000 226.000000 3136.000000 236.000000 L 3136.000000 2561.000000 S 3136.000000 2571.000000 3126.000000 2571.000000 L 2335.000000 2571.000000 S 2325.000000 2571.000000 2325.181788 2580.998348 L 2325.963642 2624.000330" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1849029565)"/></g><g id="(a_sequence.scorer -- )[0]"><path d="M 111.000000 601.500000 L 111.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 361.000000 601.500000 L 361.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.item -- )[0]"><path d="M 611.000000 601.500000 L 611.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 861.000000 601.500000 L 861.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.concept -- )[0]"><path d="M 1111.000000 601.500000 L 1111.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 1361.500000 601.500000 L 1361.500000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.scorer -- )[0]"><path d="M 1678.000000 599.000000 L 1678.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 1928.000000 599.000000 L 1928.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.item -- )[0]"><path d="M 2178.000000 599.000000 L 2178.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 2428.000000 599.000000 L 2428.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.concept -- )[0]"><path d="M 2678.000000 599.000000 L 2678.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 2928.500000 599.000000 L 2928.500000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 1677.500000 2934.000000 L 1677.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.concept -- )[0]"><path d="M 1927.500000 2934.000000 L 1927.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 2177.500000 2934.000000 L 2177.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.item -- )[0]"><path d="M 2427.500000 2934.000000 L 2427.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 2678.000000 2934.000000 L 2678.000000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 2927.500000 2934.000000 L 2927.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="105" y="713" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="355" y="713" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="605" y="973" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="855" y="1233" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="1105" y="1493" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="1355" y="1753" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="605" y="1883" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="605" y="2013" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="1355" y="2143" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="1355" y="2273" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="851" y="1363" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="1672" y="711" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="1922" y="711" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="2172" y="971" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="2422" y="1231" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="2672" y="1491" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="2922" y="1751" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="2172" y="1881" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="2172" y="2011" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="2922" y="2141" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="2922" y="2271" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="2921" y="3046" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="2421" y="3030" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="2171" y="3144" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="1921" y="3258" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="2672" y="3502" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="1671" y="3696" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="2921" y="3956" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="2418" y="1361" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="2417" y="3046" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="2167" y="3160" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="1917" y="3274" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="2668" y="3518" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="2163" y="3176" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="1913" y="3290" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="2664" y="3534" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="1909" y="3306" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="2660" y="3550" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="2656" y="3566" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 119.000000 729.500000 L 351.000000 729.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="236.000000" y="735.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 121.000000 859.500000 L 353.000000 859.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="236.500000" y="865.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 119.000000 989.500000 L 601.000000 989.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="361.500000" y="995.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 121.000000 1119.500000 L 603.000000 1119.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="361.500000" y="1125.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 119.000000 1249.500000 L 851.000000 1249.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="486.000000" y="1255.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 363.000000 1379.500000 L 847.000000 1379.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 873.000000 1509.500000 L 1101.000000 1509.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="988.000000" y="1515.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 115.000000 1639.500000 L 853.000000 1639.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="483.500000" y="1645.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 121.000000 1769.500000 L 1351.500000 1769.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="736.500000" y="1775.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 121.000000 1899.500000 L 601.000000 1899.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="361.500000" y="1905.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 119.000000 2029.500000 L 601.000000 2029.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="361.000000" y="2035.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 119.000000 2159.500000 L 1353.500000 2159.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1849029565)"/><text class="text-italic" x="736.500000" y="2165.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 119.000000 2289.500000 L 1353.500000 2289.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1849029565)"/><text class="text-italic" x="736.500000" y="2295.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1686.000000 727.000000 L 1918.000000 727.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1803.000000" y="733.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1688.000000 857.000000 L 1920.000000 857.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="1803.500000" y="863.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1686.000000 987.000000 L 2168.000000 987.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1928.500000" y="993.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1688.000000 1117.000000 L 2170.000000 1117.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="1928.500000" y="1123.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1686.000000 1247.000000 L 2418.000000 1247.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2053.000000" y="1253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 1930.000000 1377.000000 L 2414.000000 1377.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 2440.000000 1507.000000 L 2668.000000 1507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2555.000000" y="1513.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1682.000000 1637.000000 L 2420.000000 1637.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="2050.500000" y="1643.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 1686.000000 1767.000000 L 2918.500000 1767.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2303.500000" y="1773.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1688.000000 1897.000000 L 2168.000000 1897.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1928.500000" y="1903.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1686.000000 2027.000000 L 2168.000000 2027.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1928.000000" y="2033.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 1686.000000 2157.000000 L 2918.500000 2157.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2303.500000" y="2163.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 1686.000000 2287.000000 L 2918.500000 2287.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2303.500000" y="2293.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 2919.500000 3062.000000 L 2441.500000 3062.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 2415.500000 3192.000000 L 2195.500000 3192.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 2161.500000 3322.000000 L 1949.500000 3322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 2419.500000 3452.000000 L 2191.500000 3452.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1947.500000 3582.000000 L 2652.000000 3582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 1685.500000 3712.000000 L 2417.500000 3712.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 2654.000000 3842.000000 L 1681.500000 3842.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 1679.500000 3972.000000 L 2917.500000 3972.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><mask id="1849029565" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3324" height="4393">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" cx="789.000000" cy="94.000000" rx="82.000000" ry="82.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="789.000000" y="97.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a_shape</text></g><g id="a_sequence"><g class="shape" ><rect x="12" y="363" width="1472" height="2080" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="748.000000" y="396.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a_sequence</text></g><g id="another"><g class="shape" ><rect x="1504" y="291" width="1622" height="2225" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2315.000000" y="324.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">another</text></g><g id="finally"><g class="shape" ><path d="M 1527 2626 H 3102 C 3126 2626 3126 3334.75 3126 3413.5 C 3126 3492.25 3126 4201 3102 4201 H 1527 C 1503 4201 1503 3492.25 1503 3413.5 C 1503 3334.75 1503 2626 1527 2626 Z" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 3102 2626 C 3078 2626 3078 3334.75 3078 3413.5 C 3078 3492.25 3078 4201 3102 4201" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="2302.500000" y="2659.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">finally</text></g><g id="sequence"><g class="shape" ><rect x="662" y="2626" width="172" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="748.000000" y="2692.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sequence</text></g><g id="another.sequence"><g class="shape" ><rect x="1579" y="366" width="1472" height="2075" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="2315.000000" y="395.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="finally.sequence"><g class="shape" ><rect x="1578" y="2701" width="1473" height="1425" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="2314.500000" y="2730.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">sequence</text></g><g id="a_sequence.scorer"><g class="shape" ><rect x="36" y="473" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="111.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="a_sequence.itemResponse"><g class="shape" ><rect x="261" y="473" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="361.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="a_sequence.item"><g class="shape" ><rect x="536" y="473" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="611.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="a_sequence.essayRubric"><g class="shape" ><rect x="768" y="473" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="861.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="a_sequence.concept"><g class="shape" ><rect x="1031" y="473" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1111.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="a_sequence.itemOutcome"><g class="shape" ><rect x="1263" y="473" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1361.500000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.scorer"><g class="shape" ><rect x="1602" y="2806" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1677.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="finally.sequence.concept"><g class="shape" ><rect x="1847" y="2806" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1927.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="finally.sequence.essayRubric"><g class="shape" ><rect x="2084" y="2806" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2177.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="finally.sequence.item"><g class="shape" ><rect x="2352" y="2806" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2427.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="finally.sequence.itemOutcome"><g class="shape" ><rect x="2579" y="2806" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2677.500000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="finally.sequence.itemResponse"><g class="shape" ><rect x="2827" y="2806" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2927.000000" y="2872.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.scorer"><g class="shape" ><rect x="1603" y="471" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1678.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">scorer</text></g><g id="another.sequence.itemResponse"><g class="shape" ><rect x="1828" y="471" width="200" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="1928.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemResponse</text></g><g id="another.sequence.item"><g class="shape" ><rect x="2103" y="471" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2178.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">item</text></g><g id="another.sequence.essayRubric"><g class="shape" ><rect x="2335" y="471" width="186" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2428.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">essayRubric</text></g><g id="another.sequence.concept"><g class="shape" ><rect x="2598" y="471" width="160" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2678.000000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">concept</text></g><g id="another.sequence.itemOutcome"><g class="shape" ><rect x="2830" y="471" width="197" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="2928.500000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">itemOutcome</text></g><g id="(a_shape -&gt; a_sequence)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 748.000000 167.000000 L 748.000000 360.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(a_shape -&gt; another.sequence)[0]"><path d="M 789.000000 178.000000 L 789.000000 226.000000 S 789.000000 236.000000 799.000000 236.000000 L 2305.000000 236.000000 S 2315.000000 236.000000 2315.000000 246.000000 L 2315.000000 363.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(a_sequence -&gt; sequence)[0]"><path d="M 748.000000 2444.500000 L 748.000000 2622.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(another.sequence &lt;-&gt; finally.sequence)[0]"><marker id="mk-2510427236" 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 class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 2315.000000 2444.000000 L 2315.000000 2698.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="(a_shape -- finally)[0]"><path d="M 830.000000 167.000000 L 830.000000 216.000000 S 830.000000 226.000000 840.000000 226.000000 L 3126.000000 226.000000 S 3136.000000 226.000000 3136.000000 236.000000 L 3136.000000 2561.000000 S 3136.000000 2571.000000 3126.000000 2571.000000 L 2335.000000 2571.000000 S 2325.000000 2571.000000 2325.181788 2580.998348 L 2325.963642 2624.000330" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1849029565)"/></g><g id="(a_sequence.scorer -- )[0]"><path d="M 111.000000 601.500000 L 111.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.itemResponse -- )[0]"><path d="M 361.000000 601.500000 L 361.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.item -- )[0]"><path d="M 611.000000 601.500000 L 611.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.essayRubric -- )[0]"><path d="M 861.000000 601.500000 L 861.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.concept -- )[0]"><path d="M 1111.000000 601.500000 L 1111.000000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(a_sequence.itemOutcome -- )[0]"><path d="M 1361.500000 601.500000 L 1361.500000 2418.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.scorer -- )[0]"><path d="M 1678.000000 599.000000 L 1678.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.itemResponse -- )[0]"><path d="M 1928.000000 599.000000 L 1928.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.item -- )[0]"><path d="M 2178.000000 599.000000 L 2178.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.essayRubric -- )[0]"><path d="M 2428.000000 599.000000 L 2428.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.concept -- )[0]"><path d="M 2678.000000 599.000000 L 2678.000000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(another.sequence.itemOutcome -- )[0]"><path d="M 2928.500000 599.000000 L 2928.500000 2416.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.scorer -- )[0]"><path d="M 1677.500000 2934.000000 L 1677.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.concept -- )[0]"><path d="M 1927.500000 2934.000000 L 1927.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.essayRubric -- )[0]"><path d="M 2177.500000 2934.000000 L 2177.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.item -- )[0]"><path d="M 2427.500000 2934.000000 L 2427.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.itemOutcome -- )[0]"><path d="M 2678.000000 2934.000000 L 2678.000000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="(finally.sequence.itemResponse -- )[0]"><path d="M 2927.500000 2934.000000 L 2927.500000 4101.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1849029565)"/></g><g id="a_sequence.scorer.t"><g class="shape" ><rect x="105" y="713" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemResponse.t"><g class="shape" ><rect x="355" y="713" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t1"><g class="shape" ><rect x="605" y="973" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t"><g class="shape" ><rect x="855" y="1233" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.concept.t"><g class="shape" ><rect x="1105" y="1493" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t1"><g class="shape" ><rect x="1355" y="1753" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t2"><g class="shape" ><rect x="605" y="1883" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.item.t3"><g class="shape" ><rect x="605" y="2013" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t2"><g class="shape" ><rect x="1355" y="2143" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.itemOutcome.t3"><g class="shape" ><rect x="1355" y="2273" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.essayRubric.t.c"><g class="shape" ><rect x="851" y="1363" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.scorer.t"><g class="shape" ><rect x="1672" y="711" width="12" height="1592" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemResponse.t"><g class="shape" ><rect x="1922" y="711" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t1"><g class="shape" ><rect x="2172" y="971" width="12" height="162" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t"><g class="shape" ><rect x="2422" y="1231" width="12" height="422" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.concept.t"><g class="shape" ><rect x="2672" y="1491" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t1"><g class="shape" ><rect x="2922" y="1751" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t2"><g class="shape" ><rect x="2172" y="1881" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.item.t3"><g class="shape" ><rect x="2172" y="2011" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t2"><g class="shape" ><rect x="2922" y="2141" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.itemOutcome.t3"><g class="shape" ><rect x="2922" y="2271" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.a"><g class="shape" ><rect x="2921" y="3046" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a"><g class="shape" ><rect x="2421" y="3030" width="12" height="698" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a"><g class="shape" ><rect x="2171" y="3144" width="12" height="340" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a"><g class="shape" ><rect x="1921" y="3258" width="12" height="388" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a"><g class="shape" ><rect x="2672" y="3502" width="12" height="420" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.scorer.abc"><g class="shape" ><rect x="1671" y="3696" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemResponse.c"><g class="shape" ><rect x="2921" y="3956" width="12" height="80" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="another.sequence.essayRubric.t.c"><g class="shape" ><rect x="2418" y="1361" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.item.a.b"><g class="shape" ><rect x="2417" y="3046" width="20" height="162" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b"><g class="shape" ><rect x="2167" y="3160" width="20" height="308" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b"><g class="shape" ><rect x="1917" y="3274" width="20" height="356" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b"><g class="shape" ><rect x="2668" y="3518" width="20" height="388" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.essayRubric.a.b.c"><g class="shape" ><rect x="2163" y="3176" width="28" height="162" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c"><g class="shape" ><rect x="1913" y="3290" width="28" height="324" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c"><g class="shape" ><rect x="2664" y="3534" width="28" height="356" style="fill:#EEF1F8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.concept.a.b.c.d"><g class="shape" ><rect x="1909" y="3306" width="36" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d"><g class="shape" ><rect x="2660" y="3550" width="36" height="324" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="finally.sequence.itemOutcome.a.b.c.d.e"><g class="shape" ><rect x="2656" y="3566" width="44" height="292" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a_sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 119.000000 729.500000 L 351.000000 729.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="236.000000" y="735.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="a_sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 121.000000 859.500000 L 353.000000 859.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="236.500000" y="865.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="a_sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 119.000000 989.500000 L 601.000000 989.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="361.500000" y="995.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="a_sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 121.000000 1119.500000 L 603.000000 1119.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="361.500000" y="1125.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="a_sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 119.000000 1249.500000 L 851.000000 1249.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="486.000000" y="1255.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="a_sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 363.000000 1379.500000 L 847.000000 1379.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="a_sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 873.000000 1509.500000 L 1101.000000 1509.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="988.000000" y="1515.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="a_sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 115.000000 1639.500000 L 853.000000 1639.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="483.500000" y="1645.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="a_sequence.(scorer.t &lt;-&gt; itemOutcome.t1)[0]"><path d="M 121.000000 1769.500000 L 1351.500000 1769.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="736.500000" y="1775.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="a_sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 121.000000 1899.500000 L 601.000000 1899.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="361.500000" y="1905.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="a_sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 119.000000 2029.500000 L 601.000000 2029.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="361.000000" y="2035.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t2)[0]"><path d="M 119.000000 2159.500000 L 1353.500000 2159.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1849029565)"/><text class="text-italic" x="736.500000" y="2165.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="a_sequence.(scorer.t -- itemOutcome.t3)[0]"><path d="M 119.000000 2289.500000 L 1353.500000 2289.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1849029565)"/><text class="text-italic" x="736.500000" y="2295.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="another.sequence.(scorer.t -&gt; itemResponse.t)[0]"><path d="M 1686.000000 727.000000 L 1918.000000 727.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1803.000000" y="733.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getItem()</text></g><g id="another.sequence.(scorer.t &lt;- itemResponse.t)[0]"><path d="M 1688.000000 857.000000 L 1920.000000 857.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="1803.500000" y="863.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">item</text></g><g id="another.sequence.(scorer.t -&gt; item.t1)[0]"><path d="M 1686.000000 987.000000 L 2168.000000 987.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1928.500000" y="993.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getRubric()</text></g><g id="another.sequence.(scorer.t &lt;- item.t1)[0]"><path d="M 1688.000000 1117.000000 L 2170.000000 1117.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="1928.500000" y="1123.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">rubric</text></g><g id="another.sequence.(scorer.t -&gt; essayRubric.t)[0]"><path d="M 1686.000000 1247.000000 L 2418.000000 1247.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2053.000000" y="1253.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">applyTo(essayResp)</text></g><g id="another.sequence.(itemResponse -&gt; essayRubric.t.c)[0]"><path d="M 1930.000000 1377.000000 L 2414.000000 1377.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="another.sequence.(essayRubric.t.c -&gt; concept.t)[0]"><path d="M 2440.000000 1507.000000 L 2668.000000 1507.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2555.000000" y="1513.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">match(essayResponse)</text></g><g id="another.sequence.(scorer &lt;- essayRubric.t)[0]"><path d="M 1682.000000 1637.000000 L 2420.000000 1637.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#1849029565)"/><text class="text-italic" x="2050.500000" y="1643.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">score</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t1)[0]"><path d="M 1686.000000 1767.000000 L 2918.500000 1767.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2303.500000" y="1773.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">new</text></g><g id="another.sequence.(scorer.t &lt;-&gt; item.t2)[0]"><path d="M 1688.000000 1897.000000 L 2168.000000 1897.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1928.500000" y="1903.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMinimum()</text></g><g id="another.sequence.(scorer.t -&gt; item.t3)[0]"><path d="M 1686.000000 2027.000000 L 2168.000000 2027.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="1928.000000" y="2033.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">getNormalMaximum()</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t2)[0]"><path d="M 1686.000000 2157.000000 L 2918.500000 2157.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2303.500000" y="2163.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setScore(score)</text></g><g id="another.sequence.(scorer.t -&gt; itemOutcome.t3)[0]"><path d="M 1686.000000 2287.000000 L 2918.500000 2287.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/><text class="text-italic" x="2303.500000" y="2293.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">setFeedback(missingConcepts)</text></g><g id="finally.sequence.(itemResponse.a -&gt; item.a.b)[0]"><path d="M 2919.500000 3062.000000 L 2441.500000 3062.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(item.a.b -&gt; essayRubric.a.b.c)[0]"><path d="M 2415.500000 3192.000000 L 2195.500000 3192.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(essayRubric.a.b.c -&gt; concept.a.b.c.d)[0]"><path d="M 2161.500000 3322.000000 L 1949.500000 3322.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(item.a -&gt; essayRubric.a.b)[0]"><path d="M 2419.500000 3452.000000 L 2191.500000 3452.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(concept.a.b.c.d -&gt; itemOutcome.a.b.c.d.e)[0]"><path d="M 1947.500000 3582.000000 L 2652.000000 3582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(scorer.abc -&gt; item.a)[0]"><path d="M 1685.500000 3712.000000 L 2417.500000 3712.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(itemOutcome.a.b.c.d.e -&gt; scorer)[0]"><path d="M 2654.000000 3842.000000 L 1681.500000 3842.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><g id="finally.sequence.(scorer -&gt; itemResponse.c)[0]"><path d="M 1679.500000 3972.000000 L 2917.500000 3972.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1849029565)"/></g><mask id="1849029565" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3324" height="4393">
 <rect x="-100" y="-100" width="3324" height="4393" fill="white"></rect>
 <rect x="206.000000" y="719.000000" width="60" height="21" fill="black"></rect>
 <rect x="222.000000" y="849.000000" width="29" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg b/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
index 07e5d089c..025bd88a8 100644
--- a/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1000" height="664" viewBox="-102 -102 1000 664"><style type="text/css">
@@ -18,7 +19,27 @@ width="1000" height="664" viewBox="-102 -102 1000 664"><style type="text/css">
 }
 
 ]]>
-</style><g id="users"><g class="shape" ><rect class="shape" x="0" y="0" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="0" y="0" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="111.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="248.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="268.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="111.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
diff --git a/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg b/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
index 69568c9e3..cc119f17b 100644
--- a/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="920" height="664" viewBox="-90 -90 920 664"><style type="text/css">
@@ -18,7 +19,27 @@ width="920" height="664" viewBox="-90 -90 920 664"><style type="text/css">
 }
 
 ]]>
-</style><g id="users"><g class="shape" ><rect class="shape" x="12" y="12" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="12" y="12" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="123.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="260.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="280.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="123.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
diff --git a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
index 761cffe08..1c26e6ccd 100644
--- a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="375" height="584" viewBox="-102 -102 375 584"><style type="text/css">
@@ -18,7 +19,27 @@ width="375" height="584" viewBox="-102 -102 375 584"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="0" y="-15" width="186" height="141">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="186" height="141">
 <rect x="0" y="-15" width="186" height="141" fill="white"></rect>
 <path d="M0,0L15,-15L186,-15L186,111L171,126L0,126L0,0L171,0L171,126M171,0L186,-15" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><polygon points="0,0 15,-15 186,-15 186,111 171,126 171,0" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><path d="M0,0 L15,-15 L186,-15 L186,111 L171,126 L0,126 L0,0 L171,0 L171,126 M171,0 L186,-15" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="9" y="211" width="169" height="169">
 <rect x="9" y="211" width="169" height="169" fill="white"></rect>
diff --git a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
index 425ed7a2c..ddb86b450 100644
--- a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="375" height="584" viewBox="-90 -90 375 584"><style type="text/css">
@@ -18,7 +19,27 @@ width="375" height="584" viewBox="-90 -90 375 584"><style type="text/css">
 }
 
 ]]>
-</style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="12" y="-3" width="186" height="141">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="186" height="141">
 <rect x="12" y="-3" width="186" height="141" fill="white"></rect>
 <path d="M12,12L27,-3L198,-3L198,123L183,138L12,138L12,12L183,12L183,138M183,12L198,-3" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><polygon points="12,12 27,-3 198,-3 198,123 183,138 183,12" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><path d="M12,12 L27,-3 L198,-3 L198,123 L183,138 L12,138 L12,12 L183,12 L183,138 M183,12 L198,-3" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="20" y="223" width="169" height="169">
 <rect x="20" y="223" width="169" height="169" fill="white"></rect>
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 056013b46..aae5df239 100644
--- a/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1003" height="1734" viewBox="-102 -102 1003 1734"><style type="text/css">
@@ -18,7 +19,27 @@ width="1003" height="1734" viewBox="-102 -102 1003 1734"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="90" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="596" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="343" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1"><g class="shape" ><rect x="40" y="226" width="719" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l1</text></g><g id="l2c1"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="546" y="552" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="652.500000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="293" y="552" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="40" y="878" width="466" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="273.000000" y="911.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="546" y="878" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="652.500000" y="911.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c2</text></g><g id="l4"><g class="shape" ><rect x="0" y="1204" width="799" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="1237.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l4</text></g><g id="l1.b"><g class="shape" ><rect x="343" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1.a"><g class="shape" ><rect x="90" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l1.c"><g class="shape" ><rect x="596" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="596" y="602" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="343" y="602" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="90" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="343" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="596" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l4.c1"><g class="shape" ><rect x="40" y="1254" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="1283.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="293" y="1254" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="1283.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="546" y="1254" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="652.500000" y="1283.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="90" y="1304" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="1370.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="343" y="1304" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="1370.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="596" y="1304" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="1370.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 399.500000 128.000000 C 399.500000 166.000000 399.500000 236.000000 399.500000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(a -&gt; l1.a)[0]"><path d="M 146.500000 128.000000 C 146.500000 166.000000 146.500000 236.000000 146.500000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(c -&gt; l1.c)[0]"><path d="M 652.500000 128.000000 C 652.500000 166.000000 652.500000 236.000000 652.500000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 146.500000 404.000000 C 146.500000 442.000000 146.500000 462.000000 146.500000 477.000000 C 146.500000 492.000000 146.500000 562.000000 146.500000 598.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 652.500000 404.000000 C 652.500000 442.000000 652.500000 462.000000 652.500000 477.000000 C 652.500000 492.000000 652.500000 562.000000 652.500000 598.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 399.500000 404.000000 C 399.500000 442.000000 399.500000 462.000000 399.500000 477.000000 C 399.500000 492.000000 399.500000 562.000000 399.500000 598.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 146.500000 730.000000 C 146.500000 768.000000 146.500000 788.000000 146.500000 803.000000 C 146.500000 818.000000 146.500000 888.000000 146.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 399.500000 730.000000 C 399.500000 768.000000 399.500000 788.000000 399.500000 803.000000 C 399.500000 818.000000 399.500000 888.000000 399.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 652.500000 730.000000 C 652.500000 768.000000 652.500000 788.000000 652.500000 803.000000 C 652.500000 818.000000 652.500000 888.000000 652.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 146.500000 1056.000000 C 146.500000 1094.000000 146.500000 1114.000000 146.500000 1129.000000 C 146.500000 1144.000000 146.500000 1164.000000 146.500000 1179.000000 C 146.500000 1194.000000 146.500000 1264.000000 146.500000 1300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 399.500000 1056.000000 C 399.500000 1094.000000 399.500000 1114.000000 399.500000 1129.000000 C 399.500000 1144.000000 399.500000 1164.000000 399.500000 1179.000000 C 399.500000 1194.000000 399.500000 1264.000000 399.500000 1300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 652.500000 1056.000000 C 652.500000 1094.000000 652.500000 1114.000000 652.500000 1129.000000 C 652.500000 1144.000000 652.500000 1164.000000 652.500000 1179.000000 C 652.500000 1194.000000 652.500000 1264.000000 652.500000 1300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><mask id="1148371754" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1003" height="1734">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="90" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="596" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="343" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1"><g class="shape" ><rect x="40" y="226" width="719" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l1</text></g><g id="l2c1"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="546" y="552" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="652.500000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="293" y="552" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="585.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="40" y="878" width="466" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="273.000000" y="911.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="546" y="878" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="652.500000" y="911.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c2</text></g><g id="l4"><g class="shape" ><rect x="0" y="1204" width="799" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="1237.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l4</text></g><g id="l1.b"><g class="shape" ><rect x="343" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1.a"><g class="shape" ><rect x="90" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l1.c"><g class="shape" ><rect x="596" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="596" y="602" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="343" y="602" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="90" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="343" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="596" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l4.c1"><g class="shape" ><rect x="40" y="1254" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="1283.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="293" y="1254" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="399.500000" y="1283.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="546" y="1254" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="652.500000" y="1283.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="90" y="1304" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="1370.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="343" y="1304" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="399.500000" y="1370.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="596" y="1304" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="652.500000" y="1370.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 399.500000 128.000000 C 399.500000 166.000000 399.500000 236.000000 399.500000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(a -&gt; l1.a)[0]"><path d="M 146.500000 128.000000 C 146.500000 166.000000 146.500000 236.000000 146.500000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(c -&gt; l1.c)[0]"><path d="M 652.500000 128.000000 C 652.500000 166.000000 652.500000 236.000000 652.500000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 146.500000 404.000000 C 146.500000 442.000000 146.500000 462.000000 146.500000 477.000000 C 146.500000 492.000000 146.500000 562.000000 146.500000 598.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 652.500000 404.000000 C 652.500000 442.000000 652.500000 462.000000 652.500000 477.000000 C 652.500000 492.000000 652.500000 562.000000 652.500000 598.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 399.500000 404.000000 C 399.500000 442.000000 399.500000 462.000000 399.500000 477.000000 C 399.500000 492.000000 399.500000 562.000000 399.500000 598.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 146.500000 730.000000 C 146.500000 768.000000 146.500000 788.000000 146.500000 803.000000 C 146.500000 818.000000 146.500000 888.000000 146.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 399.500000 730.000000 C 399.500000 768.000000 399.500000 788.000000 399.500000 803.000000 C 399.500000 818.000000 399.500000 888.000000 399.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 652.500000 730.000000 C 652.500000 768.000000 652.500000 788.000000 652.500000 803.000000 C 652.500000 818.000000 652.500000 888.000000 652.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 146.500000 1056.000000 C 146.500000 1094.000000 146.500000 1114.000000 146.500000 1129.000000 C 146.500000 1144.000000 146.500000 1164.000000 146.500000 1179.000000 C 146.500000 1194.000000 146.500000 1264.000000 146.500000 1300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 399.500000 1056.000000 C 399.500000 1094.000000 399.500000 1114.000000 399.500000 1129.000000 C 399.500000 1144.000000 399.500000 1164.000000 399.500000 1179.000000 C 399.500000 1194.000000 399.500000 1264.000000 399.500000 1300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 652.500000 1056.000000 C 652.500000 1094.000000 652.500000 1114.000000 652.500000 1129.000000 C 652.500000 1144.000000 652.500000 1164.000000 652.500000 1179.000000 C 652.500000 1194.000000 652.500000 1264.000000 652.500000 1300.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1148371754)"/></g><mask id="1148371754" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1003" height="1734">
 <rect x="-100" y="-100" width="1003" height="1734" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
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 5e430c6fc..1915e79bc 100644
--- a/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1241" height="2054" viewBox="-90 -90 1241 2054"><style type="text/css">
@@ -18,7 +19,27 @@ width="1241" height="2054" viewBox="-90 -90 1241 2054"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="220" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="353" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="87" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1"><g class="shape" ><rect x="12" y="243" width="529" height="296" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="276.500000" y="276.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l1</text></g><g id="l2c1"><g class="shape" ><rect x="145" y="659" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="276.500000" y="692.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="711" y="659" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="842.500000" y="692.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="428" y="659" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="559.500000" y="692.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="145" y="1045" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="343.000000" y="1078.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="711" y="1045" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="842.500000" y="1078.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c2</text></g><g id="l4"><g class="shape" ><rect x="70" y="1431" width="979" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="559.500000" y="1464.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l4</text></g><g id="l1.b"><g class="shape" ><rect x="87" y="318" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1.a"><g class="shape" ><rect x="220" y="318" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l1.c"><g class="shape" ><rect x="353" y="318" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="220" y="734" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="800.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="786" y="734" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="842.500000" y="800.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="503" y="734" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="559.500000" y="800.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="220" y="1120" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="1186.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="353" y="1120" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="1186.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="786" y="1120" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="842.500000" y="1186.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l4.c1"><g class="shape" ><rect x="145" y="1511" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="276.500000" y="1540.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="428" y="1511" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="559.500000" y="1540.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="711" y="1511" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="842.500000" y="1540.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="220" y="1586" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="1652.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="503" y="1586" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="559.500000" y="1652.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="786" y="1586" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="842.500000" y="1652.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 143.500000 140.000000 L 143.500000 314.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(a -&gt; l1.a)[0]"><path d="M 276.500000 140.000000 L 276.500000 314.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(c -&gt; l1.c)[0]"><path d="M 409.500000 140.000000 L 409.500000 314.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 276.500000 446.000000 L 276.500000 730.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 409.500000 446.000000 L 409.500000 584.000000 S 409.500000 594.000000 419.500000 594.000000 L 832.500000 594.000000 S 842.500000 594.000000 842.500000 604.000000 L 842.500000 730.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 143.500000 446.000000 L 143.500000 444.000000 S 143.500000 454.000000 153.500000 454.000000 L 276.500000 454.000000 S 286.500000 454.000000 286.500000 464.000000 L 286.500000 594.000000 S 286.500000 604.000000 296.500000 604.000000 L 549.500000 604.000000 S 559.500000 604.000000 559.500000 614.000000 L 559.500000 730.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 276.500000 862.000000 L 276.500000 1116.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 559.500000 862.000000 L 559.500000 980.000000 S 559.500000 990.000000 549.500000 990.000000 L 419.500000 990.000000 S 409.500000 990.000000 409.500000 1000.000000 L 409.500000 1116.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 842.500000 862.000000 L 842.500000 1116.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 276.500000 1248.000000 L 276.500000 1582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 409.500000 1248.000000 L 409.500000 1366.000000 S 409.500000 1376.000000 419.500000 1376.000000 L 549.500000 1376.000000 S 559.500000 1376.000000 559.500000 1386.000000 L 559.500000 1582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 842.500000 1248.000000 L 842.500000 1582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><mask id="2086258112" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1241" height="2054">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="220" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="353" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="b"><g class="shape" ><rect x="87" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1"><g class="shape" ><rect x="12" y="243" width="529" height="296" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="276.500000" y="276.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l1</text></g><g id="l2c1"><g class="shape" ><rect x="145" y="659" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="276.500000" y="692.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c1</text></g><g id="l2c3"><g class="shape" ><rect x="711" y="659" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="842.500000" y="692.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c3</text></g><g id="l2c2"><g class="shape" ><rect x="428" y="659" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="559.500000" y="692.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l2c2</text></g><g id="l3c1"><g class="shape" ><rect x="145" y="1045" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="343.000000" y="1078.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c1</text></g><g id="l3c2"><g class="shape" ><rect x="711" y="1045" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="842.500000" y="1078.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l3c2</text></g><g id="l4"><g class="shape" ><rect x="70" y="1431" width="979" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="559.500000" y="1464.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">l4</text></g><g id="l1.b"><g class="shape" ><rect x="87" y="318" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l1.a"><g class="shape" ><rect x="220" y="318" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l1.c"><g class="shape" ><rect x="353" y="318" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="384.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c1.a"><g class="shape" ><rect x="220" y="734" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="800.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l2c3.c"><g class="shape" ><rect x="786" y="734" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="842.500000" y="800.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l2c2.b"><g class="shape" ><rect x="503" y="734" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="559.500000" y="800.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c1.a"><g class="shape" ><rect x="220" y="1120" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="1186.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l3c1.b"><g class="shape" ><rect x="353" y="1120" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="409.500000" y="1186.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l3c2.c"><g class="shape" ><rect x="786" y="1120" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="842.500000" y="1186.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="l4.c1"><g class="shape" ><rect x="145" y="1511" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="276.500000" y="1540.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c1</text></g><g id="l4.c2"><g class="shape" ><rect x="428" y="1511" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="559.500000" y="1540.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c2</text></g><g id="l4.c3"><g class="shape" ><rect x="711" y="1511" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="842.500000" y="1540.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">c3</text></g><g id="l4.c1.a"><g class="shape" ><rect x="220" y="1586" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="276.500000" y="1652.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="l4.c2.b"><g class="shape" ><rect x="503" y="1586" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="559.500000" y="1652.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="l4.c3.c"><g class="shape" ><rect x="786" y="1586" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="842.500000" y="1652.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -&gt; l1.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 143.500000 140.000000 L 143.500000 314.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(a -&gt; l1.a)[0]"><path d="M 276.500000 140.000000 L 276.500000 314.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(c -&gt; l1.c)[0]"><path d="M 409.500000 140.000000 L 409.500000 314.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l1.a -&gt; l2c1.a)[0]"><path d="M 276.500000 446.000000 L 276.500000 730.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l1.c -&gt; l2c3.c)[0]"><path d="M 409.500000 446.000000 L 409.500000 584.000000 S 409.500000 594.000000 419.500000 594.000000 L 832.500000 594.000000 S 842.500000 594.000000 842.500000 604.000000 L 842.500000 730.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l1.b -&gt; l2c2.b)[0]"><path d="M 143.500000 446.000000 L 143.500000 444.000000 S 143.500000 454.000000 153.500000 454.000000 L 276.500000 454.000000 S 286.500000 454.000000 286.500000 464.000000 L 286.500000 594.000000 S 286.500000 604.000000 296.500000 604.000000 L 549.500000 604.000000 S 559.500000 604.000000 559.500000 614.000000 L 559.500000 730.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l2c1.a -&gt; l3c1.a)[0]"><path d="M 276.500000 862.000000 L 276.500000 1116.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l2c2.b -&gt; l3c1.b)[0]"><path d="M 559.500000 862.000000 L 559.500000 980.000000 S 559.500000 990.000000 549.500000 990.000000 L 419.500000 990.000000 S 409.500000 990.000000 409.500000 1000.000000 L 409.500000 1116.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l2c3.c -&gt; l3c2.c)[0]"><path d="M 842.500000 862.000000 L 842.500000 1116.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l3c1.a -&gt; l4.c1.a)[0]"><path d="M 276.500000 1248.000000 L 276.500000 1582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l3c1.b -&gt; l4.c2.b)[0]"><path d="M 409.500000 1248.000000 L 409.500000 1366.000000 S 409.500000 1376.000000 419.500000 1376.000000 L 549.500000 1376.000000 S 559.500000 1376.000000 559.500000 1386.000000 L 559.500000 1582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><g id="(l3c2.c -&gt; l4.c3.c)[0]"><path d="M 842.500000 1248.000000 L 842.500000 1582.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2086258112)"/></g><mask id="2086258112" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1241" height="2054">
 <rect x="-100" y="-100" width="1241" height="2054" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
index 52a58a221..a33dda60b 100644
--- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="323" height="559" viewBox="-104 -105 323 559"><style type="text/css">
@@ -18,7 +19,27 @@ width="323" height="559" viewBox="-104 -105 323 559"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
 	<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>
diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
index 3a3454090..f07375a21 100644
--- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="323" height="680" viewBox="-93 -93 323 680"><style type="text/css">
@@ -18,7 +19,27 @@ width="323" height="680" viewBox="-93 -93 323 680"><style type="text/css">
 }
 
 ]]>
-</style><defs>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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>
 	<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>
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 f754ec990..909e5c738 100644
--- a/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="533" height="373" viewBox="-102 -102 533 373"><style type="text/css">
@@ -18,7 +19,27 @@ width="533" height="373" viewBox="-102 -102 533 373"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
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 ccba66f96..f3026eb54 100644
--- a/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="493" height="373" viewBox="-90 -90 493 373"><style type="text/css">
@@ -18,7 +19,27 @@ width="493" height="373" viewBox="-90 -90 493 373"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css">.md em,
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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,
 .md dfn {
   font-family: "font-italic";
 }
diff --git a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
index 88ae9ff51..77331e870 100644
--- a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="334" height="572" viewBox="-102 -118 334 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="334" height="572" viewBox="-102 -118 334 572"><style type="text/css">
 }
 
 ]]>
-</style><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -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"/>
diff --git a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
index 1056594dd..3e8acafdf 100644
--- a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="334" height="572" viewBox="-90 -106 334 572"><style type="text/css">
@@ -18,7 +19,27 @@ width="334" height="572" viewBox="-90 -106 334 572"><style type="text/css">
 }
 
 ]]>
-</style><g id="x"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(109 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(109 -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"/>
diff --git a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
index 374ddcb98..2dea1bd6d 100644
--- a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="353" height="340" viewBox="-107 -107 353 340"><style type="text/css">
@@ -18,7 +19,27 @@ width="353" height="340" viewBox="-107 -107 353 340"><style type="text/css">
 }
 
 ]]>
-</style><g id="cube"><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="0" y="-15" width="154" height="141">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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"><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="0" y="-15" width="154" height="141">
 <rect x="0" y="-15" width="154" height="141" fill="white"></rect>
 <path d="M0,0L15,-15L154,-15L154,111L139,126L0,126L0,0L139,0L139,126M139,0L154,-15" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="139" height="126" style="fill:orange;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="0,0 15,-15 154,-15 154,111 139,126 139,0" style="fill:#cc8400;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M0,0 L15,-15 L154,-15 L154,111 L139,126 L0,126 L0,0 L139,0 L139,126 M139,0 L154,-15" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;"/></g><text class="text-bold" x="69.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1691738582" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
 <rect x="-100" y="-100" width="353" height="340" fill="white"></rect>
diff --git a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
index 5fb37a8e0..39f3bd0dd 100644
--- a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="353" height="340" viewBox="-95 -95 353 340"><style type="text/css">
@@ -18,7 +19,27 @@ width="353" height="340" viewBox="-95 -95 353 340"><style type="text/css">
 }
 
 ]]>
-</style><g id="cube"><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="12" y="-3" width="154" height="141">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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"><g class="shape" ><defs><mask id="border-mask-cube" maskUnits="userSpaceOnUse" x="12" y="-3" width="154" height="141">
 <rect x="12" y="-3" width="154" height="141" fill="white"></rect>
 <path d="M12,12L27,-3L166,-3L166,123L151,138L12,138L12,12L151,12L151,138M151,12L166,-3" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="139" height="126" style="fill:orange;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><polygon points="12,12 27,-3 166,-3 166,123 151,138 151,12" style="fill:#cc8400;stroke:none;opacity:0.500000;stroke-width:7;" mask="url(#border-mask-cube)"/><path d="M12,12 L27,-3 L166,-3 L166,123 L151,138 L12,138 L12,12 L151,12 L151,138 M151,12 L166,-3" style="fill:none;stroke:#53C0D8;opacity:0.500000;stroke-width:7;"/></g><text class="text-bold" x="81.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cube</text></g><mask id="1030761998" maskUnits="userSpaceOnUse" x="-100" y="-100" width="353" height="340">
 <rect x="-100" y="-100" width="353" height="340" fill="white"></rect>
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 6d8102b8d..0c91b0941 100644
--- a/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="626" height="2752" viewBox="-102 -102 626 2752"><style type="text/css">
@@ -18,7 +19,27 @@ width="626" height="2752" viewBox="-102 -102 626 2752"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="422" height="512" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="128.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="165.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="0" y="0" width="422" height="512" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="422.000000" height="128.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="165.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="165.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="402.000000" y="165.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="10.000000" y="229.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="229.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
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 b89abcb62..02fe7aa75 100644
--- a/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="626" height="2752" viewBox="-90 -90 626 2752"><style type="text/css">
@@ -18,7 +19,27 @@ width="626" height="2752" viewBox="-90 -90 626 2752"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="422" height="512" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="128.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="177.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="12" y="12" width="422" height="512" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="422.000000" height="128.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="177.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="177.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="414.000000" y="177.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="22.000000" y="241.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="241.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
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 d84c3fef6..a3de62380 100644
--- a/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="716" height="1428" viewBox="-102 -102 716 1428"><style type="text/css">
@@ -18,7 +19,27 @@ width="716" height="1428" viewBox="-102 -102 716 1428"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="0" y="0" width="512" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="512.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="0" y="0" width="512" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="512.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="10.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="120.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="492.000000" y="120.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="10.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="30.000000" y="166.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
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 d7167c749..ee38259d3 100644
--- a/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="716" height="1428" viewBox="-90 -90 716 1428"><style type="text/css">
@@ -18,7 +19,27 @@ width="716" height="1428" viewBox="-90 -90 716 1428"><style type="text/css">
 }
 
 ]]>
-</style><g id="class"><g class="shape" ><rect class="shape" x="12" y="12" width="512" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="512.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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 class="shape" x="12" y="12" width="512" height="368" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="512.000000" height="92.000000" fill="#0A0F25" /><text class="text-mono" x="22.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="132.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">num</text>
 <text class="text-mono" x="504.000000" y="132.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3">int</text><text class="text-mono" x="22.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">-</text>
 <text class="text-mono" x="42.000000" y="178.000000" style="text-anchor:start;font-size:20px;fill:#0A0F25">timeout</text>
diff --git a/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg b/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
index 18bc42648..169acc010 100644
--- a/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="3324" height="2816" viewBox="-102 -102 3324 2816"><style type="text/css">
@@ -18,7 +19,27 @@ width="3324" height="2816" viewBox="-102 -102 3324 2816"><style type="text/css">
 }
 
 ]]>
-</style><g id="AK"><g class="shape" ><rect x="2525" y="0" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2588.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AK</text></g><g id="HI"><g class="shape" ><rect x="2711" y="0" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2770.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">HI</text></g><g id="AL"><g class="shape" ><rect x="1" y="226" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="63.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AL</text></g><g id="FL"><g class="shape" ><rect x="3" y="452" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="63.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">FL</text></g><g id="GA"><g class="shape" ><rect x="0" y="678" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="63.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">GA</text></g><g id="MS"><g class="shape" ><rect x="1561" y="904" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1624.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MS</text></g><g id="TN"><g class="shape" ><rect x="1462" y="2034" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1524.000000" y="2100.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TN</text></g><g id="AZ"><g class="shape" ><rect x="398" y="904" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AZ</text></g><g id="CA"><g class="shape" ><rect x="398" y="1130" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CA</text></g><g id="NV"><g class="shape" ><rect x="583" y="1356" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="645.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NV</text></g><g id="NM"><g class="shape" ><rect x="1312" y="1582" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1375.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NM</text></g><g id="UT"><g class="shape" ><rect x="713" y="2034" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="775.000000" y="2100.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">UT</text></g><g id="AR"><g class="shape" ><rect x="1581" y="452" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1644.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AR</text></g><g id="LA"><g class="shape" ><rect x="1583" y="678" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1644.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">LA</text></g><g id="MO"><g class="shape" ><rect x="2285" y="1130" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2349.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MO</text></g><g id="OK"><g class="shape" ><rect x="2032" y="1808" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2095.000000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OK</text></g><g id="TX"><g class="shape" ><rect x="1788" y="2260" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1849.500000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TX</text></g><g id="OR"><g class="shape" ><rect x="354" y="1808" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="417.000000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OR</text></g><g id="CO"><g class="shape" ><rect x="1992" y="678" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2055.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CO</text></g><g id="KS"><g class="shape" ><rect x="1993" y="904" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2054.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KS</text></g><g id="NE"><g class="shape" ><rect x="2166" y="1356" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2227.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NE</text></g><g id="WY"><g class="shape" ><rect x="893" y="2486" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="957.000000" y="2552.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WY</text></g><g id="CT"><g class="shape" ><rect x="587" y="1130" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="649.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CT</text></g><g id="MA"><g class="shape" ><rect x="317" y="1356" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="380.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MA</text></g><g id="NY"><g class="shape" ><rect x="540" y="1808" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="602.000000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NY</text></g><g id="RI"><g class="shape" ><rect x="716" y="2260" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="775.000000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">RI</text></g><g id="DE"><g class="shape" ><rect x="1148" y="1130" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1209.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">DE</text></g><g id="MD"><g class="shape" ><rect x="1146" y="1356" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1209.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MD</text></g><g id="NJ"><g class="shape" ><rect x="1050" y="1582" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1111.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NJ</text></g><g id="PA"><g class="shape" ><rect x="1105" y="2034" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1167.000000" y="2100.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">PA</text></g><g id="NC"><g class="shape" ><rect x="21" y="1582" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="83.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NC</text></g><g id="SC"><g class="shape" ><rect x="22" y="1808" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="83.500000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SC</text></g><g id="ID"><g class="shape" ><rect x="1748" y="904" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1807.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ID</text></g><g id="MT"><g class="shape" ><rect x="1745" y="1130" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1808.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MT</text></g><g id="WA"><g class="shape" ><rect x="425" y="2260" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="489.500000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WA</text></g><g id="IL"><g class="shape" ><rect x="2890" y="0" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2948.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IL</text></g><g id="IN"><g class="shape" ><rect x="2889" y="226" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2948.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IN</text></g><g id="IA"><g class="shape" ><rect x="2834" y="452" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2893.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IA</text></g><g id="MI"><g class="shape" ><rect x="2706" y="678" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2766.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MI</text></g><g id="KY"><g class="shape" ><rect x="2801" y="904" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2862.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KY</text></g><g id="WI"><g class="shape" ><rect x="2230" y="1808" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2291.500000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WI</text></g><g id="OH"><g class="shape" ><rect x="2815" y="1582" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2878.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OH</text></g><g id="MN"><g class="shape" ><rect x="2984" y="904" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="3047.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MN</text></g><g id="SD"><g class="shape" ><rect x="2413" y="1582" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2475.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SD</text></g><g id="VA"><g class="shape" ><rect x="1370" y="2260" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1432.500000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VA</text></g><g id="WV"><g class="shape" ><rect x="1381" y="2486" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1445.500000" y="2552.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WV</text></g><g id="ME"><g class="shape" ><rect x="1349" y="1356" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1411.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ME</text></g><g id="NH"><g class="shape" ><rect x="792" y="1582" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="854.500000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NH</text></g><g id="VT"><g class="shape" ><rect x="591" y="2486" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="653.000000" y="2552.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VT</text></g><g id="ND"><g class="shape" ><rect x="2419" y="1356" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2481.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ND</text></g><g id="(AL -- FL)[0]"><path d="M 63.000000 354.000000 C 63.000000 392.000000 63.000000 412.000000 63.000000 450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(FL -- GA)[0]"><path d="M 51.500993 579.969391 C 44.769912 618.000000 44.800000 638.000000 51.645694 676.031633" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(GA -- MS)[0]"><path d="M 51.500993 805.969391 C 44.769912 844.000000 346.600000 875.600000 1559.005043 961.858066" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- TN)[0]"><path d="M 1566.922354 1031.497740 C 1532.849558 1070.000000 1524.000000 1102.600000 1524.000000 1136.500000 C 1524.000000 1170.400000 1524.000000 1215.600000 1524.000000 1249.500000 C 1524.000000 1283.400000 1524.000000 1328.600000 1524.000000 1362.500000 C 1524.000000 1396.400000 1524.000000 1441.600000 1524.000000 1475.500000 C 1524.000000 1509.400000 1524.000000 1554.600000 1524.000000 1588.500000 C 1524.000000 1622.400000 1524.000000 1667.600000 1524.000000 1701.500000 C 1524.000000 1735.400000 1524.000000 1780.600000 1524.000000 1814.500000 C 1524.000000 1848.400000 1524.000000 1994.000000 1524.000000 2032.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(AZ -- CA)[0]"><path d="M 460.500000 1032.000000 C 460.500000 1070.000000 460.500000 1090.000000 460.500000 1128.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CA -- NV)[0]"><path d="M 396.127406 1217.146401 C 207.000000 1288.088797 244.050000 1325.600000 581.301373 1403.549610" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- NM)[0]"><path d="M 581.642140 1466.425127 C 511.050000 1518.647136 656.750000 1552.985257 1309.766224 1636.672054" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NM -- UT)[0]"><path d="M 1342.355573 1709.788854 C 1323.250000 1748.000000 1318.250000 1780.600000 1318.250000 1814.500000 C 1318.250000 1848.400000 1222.050000 2004.000000 839.208130 2083.592904" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(AR -- LA)[0]"><path d="M 1644.000000 580.000000 C 1644.000000 618.000000 1644.000000 638.000000 1644.000000 676.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(LA -- MS)[0]"><path d="M 1595.125094 805.594905 C 1566.066372 844.000000 1564.300000 864.000000 1586.496564 902.269938" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- MO)[0]"><path d="M 1601.031730 1031.885364 C 1587.539823 1070.000000 1724.150000 1100.708663 2282.771482 1183.250968" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- OK)[0]"><path d="M 2282.844715 1214.037563 C 2052.750000 1287.485876 1994.750000 1328.600000 1994.750000 1362.500000 C 1994.750000 1396.400000 1994.750000 1441.600000 1994.750000 1475.500000 C 1994.750000 1509.400000 1994.750000 1554.600000 1994.750000 1588.500000 C 1994.750000 1622.400000 2003.550000 1768.000000 2037.428744 1806.498573" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TN)[0]"><path d="M 2029.907378 1898.365887 C 1867.950000 1966.717647 1778.800000 2002.000000 1587.873615 2073.300310" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- TX)[0]"><path d="M 1460.494306 2152.521420 C 1408.200000 2198.241006 1473.350000 2229.600000 1785.809425 2307.516091" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CA -- NV)[1]"><path d="M 524.451745 1253.599977 C 568.400000 1295.244864 585.550000 1316.000000 607.746564 1354.269938" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- OR)[0]"><path d="M 581.837353 1483.054360 C 543.050000 1521.927716 533.000000 1554.600000 533.000000 1588.500000 C 533.000000 1622.400000 522.400000 1768.400000 481.427618 1808.599319" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CO -- KS)[0]"><path d="M 2054.750000 806.000000 C 2054.750000 844.000000 2054.750000 864.000000 2054.750000 902.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KS -- NE)[0]"><path d="M 1997.672354 1031.497740 C 1963.599558 1070.000000 1954.750000 1102.600000 1954.750000 1136.500000 C 1954.750000 1170.400000 1996.900000 1323.494766 2163.652794 1392.707128" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- NM)[0]"><path d="M 2181.242596 1483.632333 C 2154.079646 1522.000000 2005.200000 1552.800000 1439.978824 1635.709735" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NM -- OK)[0]"><path d="M 1374.750000 1710.000000 C 1374.750000 1748.000000 1506.150000 1778.622500 2029.774186 1860.802407" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- UT)[0]"><path d="M 2029.958401 1903.146875 C 1899.950000 1967.651592 1661.000000 2005.400000 838.989295 2090.793345" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(UT -- WY)[0]"><path d="M 712.591582 2161.439461 C 675.396018 2200.000000 665.750000 2232.600000 665.750000 2266.500000 C 665.750000 2300.400000 711.100000 2453.625279 890.635840 2523.401891" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CT -- MA)[0]"><path d="M 649.000000 1258.000000 C 649.000000 1296.000000 608.000000 1323.200000 445.844285 1391.226300" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MA -- NY)[0]"><path d="M 327.162355 1483.547609 C 295.685841 1522.000000 287.500000 1554.600000 287.500000 1588.500000 C 287.500000 1622.400000 337.950000 1776.141130 537.867977 1848.028899" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- RI)[0]"><path d="M 560.249637 1935.683324 C 535.665929 1974.000000 529.250000 2006.600000 529.250000 2040.500000 C 529.250000 2074.400000 566.550000 2227.168635 713.933216 2295.006938" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(DE -- MD)[0]"><path d="M 1209.500000 1258.000000 C 1209.500000 1296.000000 1209.500000 1316.000000 1209.500000 1354.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MD -- NJ)[0]"><path d="M 1153.269898 1483.507630 C 1119.716814 1522.000000 1111.000000 1542.000000 1111.000000 1580.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NJ -- PA)[0]"><path d="M 1090.608531 1709.908056 C 1078.641593 1748.000000 1075.500000 1780.600000 1075.500000 1814.500000 C 1075.500000 1848.400000 1083.500000 1994.000000 1114.250610 2032.438262" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(FL -- GA)[1]"><path d="M 126.475340 524.888033 C 646.500000 607.314986 646.800000 648.600000 127.975427 730.687452" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(GA -- NC)[0]"><path d="M 74.499007 805.969391 C 81.230088 844.000000 83.000000 876.600000 83.000000 910.500000 C 83.000000 944.400000 83.000000 989.600000 83.000000 1023.500000 C 83.000000 1057.400000 83.000000 1102.600000 83.000000 1136.500000 C 83.000000 1170.400000 83.000000 1215.600000 83.000000 1249.500000 C 83.000000 1283.400000 83.000000 1328.600000 83.000000 1362.500000 C 83.000000 1396.400000 83.000000 1542.000000 83.000000 1580.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NC -- SC)[0]"><path d="M 71.500993 1709.969391 C 64.769912 1748.000000 64.800000 1768.000000 71.645694 1806.031633" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SC -- TN)[0]"><path d="M 71.500993 1935.969391 C 64.769912 1974.000000 342.800000 2005.600000 1460.005933 2091.846062" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ID -- MT)[0]"><path d="M 1807.750000 1032.000000 C 1807.750000 1070.000000 1807.750000 1090.000000 1807.750000 1128.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MT -- NV)[0]"><path d="M 1778.350904 1257.821422 C 1761.035398 1296.000000 1546.850000 1327.328337 710.239730 1412.439262" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- OR)[1]"><path d="M 622.924821 1483.886673 C 609.517699 1522.000000 606.000000 1554.600000 606.000000 1588.500000 C 606.000000 1622.400000 580.800000 1773.000000 481.718586 1831.977032" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OR -- UT)[0]"><path d="M 351.938497 1901.325879 C 210.950000 1967.295652 282.750000 2004.262719 710.784609 2084.943137" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(UT -- WA)[0]"><path d="M 774.750000 2162.000000 C 774.750000 2200.000000 730.550000 2227.400000 555.610991 2296.267393" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(WA -- WY)[0]"><path d="M 489.250000 2388.000000 C 489.250000 2426.000000 569.900000 2455.504441 890.556040 2533.052076" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IL -- IN)[0]"><path d="M 2948.250000 128.000000 C 2948.250000 166.000000 2948.250000 186.000000 2948.250000 224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IN -- IA)[0]"><path d="M 2916.853605 353.799865 C 2898.345133 392.000000 2893.500000 412.000000 2893.500000 450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IA -- MI)[0]"><path d="M 2832.505831 569.270403 C 2780.000000 615.988189 2766.500000 638.000000 2766.500000 676.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MI -- KY)[0]"><path d="M 2704.112033 762.809251 C 2495.800000 835.629853 2514.750000 873.282816 2798.818991 949.893308" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KY -- MO)[0]"><path d="M 2818.904062 1031.661268 C 2793.203540 1070.000000 2711.700000 1099.200000 2414.437200 1175.502751" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- WI)[0]"><path d="M 2282.938161 1223.762101 C 2142.550000 1289.383040 2107.000000 1328.600000 2107.000000 1362.500000 C 2107.000000 1396.400000 2107.000000 1441.600000 2107.000000 1475.500000 C 2107.000000 1509.400000 2107.000000 1554.600000 2107.000000 1588.500000 C 2107.000000 1622.400000 2131.600000 1773.000000 2228.292408 1831.958785" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IN -- KY)[0]"><path d="M 3009.426612 328.786804 C 3099.150000 387.139281 3122.000000 424.600000 3122.000000 458.500000 C 3122.000000 492.400000 3122.000000 537.600000 3122.000000 571.500000 C 3122.000000 605.400000 3122.000000 650.600000 3122.000000 684.500000 C 3122.000000 718.400000 3082.400000 871.200000 2925.834435 939.203225" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KY -- MI)[0]"><path d="M 2903.750363 902.316676 C 2928.334071 864.000000 2913.150000 839.600000 2828.414101 783.109400" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MI -- OH)[0]"><path d="M 2734.533251 805.793591 C 2715.683628 844.000000 2710.750000 876.600000 2710.750000 910.500000 C 2710.750000 944.400000 2710.750000 989.600000 2710.750000 1023.500000 C 2710.750000 1057.400000 2710.750000 1102.600000 2710.750000 1136.500000 C 2710.750000 1170.400000 2710.750000 1215.600000 2710.750000 1249.500000 C 2710.750000 1283.400000 2710.750000 1328.600000 2710.750000 1362.500000 C 2710.750000 1396.400000 2731.550000 1546.074251 2813.093569 1601.250439" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IA -- MN)[0]"><path d="M 2954.611559 559.914512 C 3028.400000 614.146016 3047.250000 650.600000 3047.250000 684.500000 C 3047.250000 718.400000 3047.250000 864.000000 3047.250000 902.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MN -- MO)[0]"><path d="M 2991.443753 1031.512592 C 2958.150442 1070.000000 2842.100000 1100.200000 2414.465537 1180.630318" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- NE)[0]"><path d="M 2283.110465 1238.856367 C 2206.550000 1292.342195 2190.600000 1316.000000 2204.322561 1354.118225" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- SD)[0]"><path d="M 2204.031730 1483.885364 C 2190.539823 1522.000000 2232.200000 1549.800000 2411.139098 1620.267167" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WI)[0]"><path d="M 2411.340473 1687.818611 C 2328.200000 1743.740476 2305.600000 1768.000000 2300.277296 1806.019317" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KS -- MO)[0]"><path d="M 2117.922270 1008.442476 C 2204.850000 1065.469086 2238.550000 1090.719918 2283.284091 1132.239034" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- NE)[1]"><path d="M 2368.568520 1257.912835 C 2380.196903 1296.000000 2364.450000 1319.600000 2290.870449 1372.827760" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- OK)[0]"><path d="M 2227.000000 1484.000000 C 2227.000000 1522.000000 2227.000000 1554.600000 2227.000000 1588.500000 C 2227.000000 1622.400000 2213.200000 1769.800000 2159.520067 1815.700232" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KY -- MO)[1]"><path d="M 2889.364469 1031.845186 C 2905.318584 1070.000000 2810.100000 1100.000000 2414.460705 1179.605492" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- OH)[0]"><path d="M 2414.566136 1223.356014 C 2557.550000 1289.303673 2593.750000 1328.600000 2593.750000 1362.500000 C 2593.750000 1396.400000 2637.950000 1549.586620 2812.891696 1619.193703" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OH -- TN)[0]"><path d="M 2812.908686 1672.493690 C 2651.950000 1740.742589 2611.250000 1780.600000 2611.250000 1814.500000 C 2611.250000 1848.400000 2406.250000 2005.400000 1588.239191 2090.792348" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- VA)[0]"><path d="M 1473.001524 2161.569499 C 1442.648230 2200.000000 1434.550000 2220.000000 1433.789992 2258.000400" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(VA -- WV)[0]"><path d="M 1367.905465 2371.527186 C 1300.100000 2422.863987 1302.350000 2449.629538 1379.107984 2503.005859" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(LA -- MS)[1]"><path d="M 1708.061718 790.847317 C 1770.900000 841.119580 1767.000000 867.800000 1688.646160 921.864149" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- TX)[0]"><path d="M 1633.200743 1031.980248 C 1638.584071 1070.000000 1640.000000 1102.600000 1640.000000 1136.500000 C 1640.000000 1170.400000 1640.000000 1215.600000 1640.000000 1249.500000 C 1640.000000 1283.400000 1640.000000 1328.600000 1640.000000 1362.500000 C 1640.000000 1396.400000 1640.000000 1441.600000 1640.000000 1475.500000 C 1640.000000 1509.400000 1640.000000 1554.600000 1640.000000 1588.500000 C 1640.000000 1622.400000 1640.000000 1667.600000 1640.000000 1701.500000 C 1640.000000 1735.400000 1640.000000 1780.600000 1640.000000 1814.500000 C 1640.000000 1848.400000 1640.000000 1893.600000 1640.000000 1927.500000 C 1640.000000 1961.400000 1640.000000 2006.600000 1640.000000 2040.500000 C 1640.000000 2074.400000 1669.600000 2226.000000 1786.240587 2289.048966" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ME -- NH)[0]"><path d="M 1411.500000 1484.000000 C 1411.500000 1522.000000 1312.500000 1552.000000 918.460396 1631.603960" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MD -- PA)[0]"><path d="M 1239.469921 1483.815331 C 1257.126106 1522.000000 1261.750000 1554.600000 1261.750000 1588.500000 C 1261.750000 1622.400000 1261.750000 1667.600000 1261.750000 1701.500000 C 1261.750000 1735.400000 1261.750000 1780.600000 1261.750000 1814.500000 C 1261.750000 1848.400000 1253.350000 1994.000000 1221.036384 2032.468590" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- VA)[0]"><path d="M 1102.842791 2140.009056 C 1020.300000 2195.777877 1073.300000 2229.335991 1367.564884 2306.174655" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(VA -- WV)[1]"><path d="M 1432.000000 2388.000000 C 1432.000000 2426.000000 1433.200000 2446.000000 1437.761710 2484.014246" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MA -- NH)[0]"><path d="M 421.784384 1483.679938 C 446.539823 1522.000000 520.800000 1551.000000 790.074190 1626.460319" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NH -- NY)[0]"><path d="M 806.758321 1709.608500 C 778.389381 1748.000000 749.600000 1772.200000 665.666493 1827.894196" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- RI)[1]"><path d="M 583.077720 1935.922082 C 572.126106 1974.000000 569.250000 2006.600000 569.250000 2040.500000 C 569.250000 2074.400000 598.550000 2226.111436 713.997478 2289.593504" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(RI -- VT)[0]"><path d="M 754.931480 2387.912835 C 743.303097 2426.000000 732.450000 2446.000000 702.480064 2484.422995" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MI -- MN)[0]"><path d="M 2828.411074 803.186235 C 2868.600000 843.553778 2899.950000 868.070431 2982.089705 923.237068" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MN -- OH)[0]"><path d="M 3044.230189 1031.997845 C 3042.464602 1070.000000 3042.000000 1102.600000 3042.000000 1136.500000 C 3042.000000 1170.400000 3042.000000 1215.600000 3042.000000 1249.500000 C 3042.000000 1283.400000 3042.000000 1328.600000 3042.000000 1362.500000 C 3042.000000 1396.400000 3021.800000 1545.800000 2942.651416 1599.871805" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OH -- WI)[0]"><path d="M 2863.236420 1709.951865 C 2854.734513 1748.000000 2752.650000 1778.121355 2355.210588 1858.211687" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MN -- ND)[0]"><path d="M 3067.211768 1031.911649 C 3078.924779 1070.000000 3082.000000 1102.600000 3082.000000 1136.500000 C 3082.000000 1170.400000 2974.400000 1326.200000 2545.965662 1406.630982" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ND -- SD)[0]"><path d="M 2446.860743 1483.766434 C 2426.559735 1522.000000 2426.050000 1542.000000 2444.384538 1580.196954" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WI)[1]"><path d="M 2431.654062 1709.661268 C 2405.953540 1748.000000 2389.650000 1768.000000 2352.635064 1806.557225" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- TN)[1]"><path d="M 1656.109317 1031.792015 C 1675.044248 1070.000000 1680.000000 1102.600000 1680.000000 1136.500000 C 1680.000000 1170.400000 1680.000000 1215.600000 1680.000000 1249.500000 C 1680.000000 1283.400000 1680.000000 1328.600000 1680.000000 1362.500000 C 1680.000000 1396.400000 1680.000000 1441.600000 1680.000000 1475.500000 C 1680.000000 1509.400000 1680.000000 1554.600000 1680.000000 1588.500000 C 1680.000000 1622.400000 1680.000000 1667.600000 1680.000000 1701.500000 C 1680.000000 1735.400000 1680.000000 1780.600000 1680.000000 1814.500000 C 1680.000000 1848.400000 1661.200000 1997.600000 1587.620449 2050.827760" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- NE)[2]"><path d="M 2414.609194 1219.112593 C 2589.550000 1288.475088 2564.750000 1325.200000 2290.676796 1401.463848" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- OK)[1]"><path d="M 2249.968270 1483.885364 C 2263.460177 1522.000000 2267.000000 1554.600000 2267.000000 1588.500000 C 2267.000000 1622.400000 2245.200000 1772.400000 2159.668796 1828.897676" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TN)[1]"><path d="M 2094.750000 1936.000000 C 2094.750000 1974.000000 1992.950000 2004.200000 1587.711752 2084.610733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MT -- ND)[0]"><path d="M 1848.113958 1257.696840 C 1872.011062 1296.000000 1986.350000 1326.257546 2416.784219 1406.919348" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ND -- SD)[1]"><path d="M 2469.750993 1483.969391 C 2463.019912 1522.000000 2462.450000 1542.000000 2467.011710 1580.014246" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WY)[0]"><path d="M 2475.000000 1710.000000 C 2475.000000 1748.000000 2475.000000 1780.600000 2475.000000 1814.500000 C 2475.000000 1848.400000 2475.000000 1893.600000 2475.000000 1927.500000 C 2475.000000 1961.400000 2475.000000 2006.600000 2475.000000 2040.500000 C 2475.000000 2074.400000 2475.000000 2119.600000 2475.000000 2153.500000 C 2475.000000 2187.400000 2475.000000 2232.600000 2475.000000 2266.500000 C 2475.000000 2300.400000 2184.200000 2457.600000 1022.994506 2543.851852" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- SD)[1]"><path d="M 2290.944186 1478.296093 C 2335.500000 1520.982500 2360.200000 1543.600000 2411.497670 1588.679771" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WY)[1]"><path d="M 2507.251876 1709.790436 C 2526.272124 1748.000000 2531.250000 1780.600000 2531.250000 1814.500000 C 2531.250000 1848.400000 2531.250000 1893.600000 2531.250000 1927.500000 C 2531.250000 1961.400000 2531.250000 2006.600000 2531.250000 2040.500000 C 2531.250000 2074.400000 2531.250000 2119.600000 2531.250000 2153.500000 C 2531.250000 2187.400000 2531.250000 2232.600000 2531.250000 2266.500000 C 2531.250000 2300.400000 2229.250000 2457.600000 1023.244904 2543.857318" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- OR)[2]"><path d="M 710.155410 1439.544280 C 941.650000 1513.387297 1000.000000 1554.600000 1000.000000 1588.500000 C 1000.000000 1622.400000 896.000000 1778.200000 481.963309 1858.618665" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OR -- UT)[1]"><path d="M 416.750000 1936.000000 C 416.750000 1974.000000 475.950000 2002.686034 710.842754 2076.828160" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NH -- VT)[0]"><path d="M 894.153443 1709.705257 C 917.621681 1748.000000 923.750000 1780.600000 923.750000 1814.500000 C 923.750000 1848.400000 923.750000 1893.600000 923.750000 1927.500000 C 923.750000 1961.400000 923.750000 2006.600000 923.750000 2040.500000 C 923.750000 2074.400000 923.750000 2119.600000 923.750000 2153.500000 C 923.750000 2187.400000 923.750000 2232.600000 923.750000 2266.500000 C 923.750000 2300.400000 881.950000 2453.400000 716.596415 2522.231397" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NJ -- NY)[0]"><path d="M 1154.062090 1709.664667 C 1179.590708 1748.000000 1081.850000 1778.200000 666.213582 1858.620073" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- PA)[0]"><path d="M 665.401715 1914.460084 C 746.550000 1969.866465 834.700000 2003.090420 1102.575594 2078.907432" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NM -- OK)[1]"><path d="M 1407.144427 1709.788854 C 1426.250000 1748.000000 1551.350000 1778.454107 2029.778389 1859.934752" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TX)[0]"><path d="M 2159.515396 1905.480517 C 2277.150000 1968.108127 2307.000000 2006.600000 2307.000000 2040.500000 C 2307.000000 2074.400000 2227.800000 2229.600000 1912.941433 2307.519544" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- PA)[1]"><path d="M 665.502522 1906.056131 C 778.550000 1968.218491 866.700000 2002.699652 1102.592154 2076.898158" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- RI)[0]"><path d="M 1103.004533 2153.384973 C 1052.300000 2198.411395 998.250000 2227.600000 836.087826 2297.211080" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(RI -- VT)[1]"><path d="M 794.568520 2387.912835 C 806.196903 2426.000000 790.450000 2449.600000 716.870449 2502.827760" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NC -- SC)[1]"><path d="M 146.501891 1700.842130 C 198.200000 1746.304280 198.100000 1769.600000 146.012123 1814.690998" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SC -- TN)[1]"><path d="M 112.969921 1935.815331 C 130.626106 1974.000000 400.650000 2005.600000 1460.256591 2091.837763" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- VA)[1]"><path d="M 1535.499007 2161.969391 C 1542.230088 2200.000000 1534.000000 2220.000000 1495.414214 2258.585786" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ND -- SD)[2]"><path d="M 2521.329776 1483.700210 C 2545.055310 1522.000000 2544.450000 1542.000000 2518.374620 1580.346147" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OH -- PA)[0]"><path d="M 2900.718270 1709.885364 C 2914.210177 1748.000000 2917.750000 1780.600000 2917.750000 1814.500000 C 2917.750000 1848.400000 2579.950000 2005.800000 1230.745848 2092.871197" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- WV)[0]"><path d="M 1177.999007 2161.969391 C 1184.730088 2200.000000 1186.500000 2232.600000 1186.500000 2266.500000 C 1186.500000 2300.400000 1225.350000 2452.966377 1378.917157 2520.031454" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TX)[1]"><path d="M 2159.575228 1900.039646 C 2309.150000 1967.044400 2347.000000 2006.600000 2347.000000 2040.500000 C 2347.000000 2074.400000 2259.800000 2229.800000 1912.950354 2308.557144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OR -- WA)[0]"><path d="M 458.250363 1935.683324 C 482.834071 1974.000000 489.250000 2006.600000 489.250000 2040.500000 C 489.250000 2074.400000 489.250000 2220.000000 489.250000 2258.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- WV)[1]"><path d="M 1200.889257 2161.766434 C 1221.190265 2200.000000 1226.500000 2232.600000 1226.500000 2266.500000 C 1226.500000 2300.400000 1257.350000 2451.936229 1378.973079 2514.763236" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WY)[2]"><path d="M 2529.958365 1709.522548 C 2562.732301 1748.000000 2571.250000 1780.600000 2571.250000 1814.500000 C 2571.250000 1848.400000 2571.250000 1893.600000 2571.250000 1927.500000 C 2571.250000 1961.400000 2571.250000 2006.600000 2571.250000 2040.500000 C 2571.250000 2074.400000 2571.250000 2119.600000 2571.250000 2153.500000 C 2571.250000 2187.400000 2571.250000 2232.600000 2571.250000 2266.500000 C 2571.250000 2300.400000 2261.250000 2457.600000 1023.245163 2543.860982" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- VA)[2]"><path d="M 1558.389257 2161.766434 C 1578.690265 2200.000000 1566.200000 2223.200000 1496.606475 2274.808682" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(UT -- WY)[1]"><path d="M 836.908418 2161.439461 C 874.103982 2200.000000 883.750000 2232.600000 883.750000 2266.500000 C 883.750000 2300.400000 890.150000 2446.000000 914.671893 2484.315457" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(VA -- WV)[2]"><path d="M 1497.464313 2335.321164 C 1917.700000 2415.789006 1920.650000 2456.000000 1512.213051 2535.617339" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><mask id="2384960190" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3324" height="2816">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="AK"><g class="shape" ><rect x="2525" y="0" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2588.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AK</text></g><g id="HI"><g class="shape" ><rect x="2711" y="0" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2770.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">HI</text></g><g id="AL"><g class="shape" ><rect x="1" y="226" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="63.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AL</text></g><g id="FL"><g class="shape" ><rect x="3" y="452" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="63.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">FL</text></g><g id="GA"><g class="shape" ><rect x="0" y="678" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="63.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">GA</text></g><g id="MS"><g class="shape" ><rect x="1561" y="904" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1624.000000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MS</text></g><g id="TN"><g class="shape" ><rect x="1462" y="2034" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1524.000000" y="2100.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TN</text></g><g id="AZ"><g class="shape" ><rect x="398" y="904" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AZ</text></g><g id="CA"><g class="shape" ><rect x="398" y="1130" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="460.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CA</text></g><g id="NV"><g class="shape" ><rect x="583" y="1356" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="645.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NV</text></g><g id="NM"><g class="shape" ><rect x="1312" y="1582" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1375.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NM</text></g><g id="UT"><g class="shape" ><rect x="713" y="2034" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="775.000000" y="2100.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">UT</text></g><g id="AR"><g class="shape" ><rect x="1581" y="452" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1644.000000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AR</text></g><g id="LA"><g class="shape" ><rect x="1583" y="678" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1644.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">LA</text></g><g id="MO"><g class="shape" ><rect x="2285" y="1130" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2349.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MO</text></g><g id="OK"><g class="shape" ><rect x="2032" y="1808" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2095.000000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OK</text></g><g id="TX"><g class="shape" ><rect x="1788" y="2260" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1849.500000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TX</text></g><g id="OR"><g class="shape" ><rect x="354" y="1808" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="417.000000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OR</text></g><g id="CO"><g class="shape" ><rect x="1992" y="678" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2055.000000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CO</text></g><g id="KS"><g class="shape" ><rect x="1993" y="904" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2054.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KS</text></g><g id="NE"><g class="shape" ><rect x="2166" y="1356" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2227.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NE</text></g><g id="WY"><g class="shape" ><rect x="893" y="2486" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="957.000000" y="2552.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WY</text></g><g id="CT"><g class="shape" ><rect x="587" y="1130" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="649.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CT</text></g><g id="MA"><g class="shape" ><rect x="317" y="1356" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="380.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MA</text></g><g id="NY"><g class="shape" ><rect x="540" y="1808" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="602.000000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NY</text></g><g id="RI"><g class="shape" ><rect x="716" y="2260" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="775.000000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">RI</text></g><g id="DE"><g class="shape" ><rect x="1148" y="1130" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1209.500000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">DE</text></g><g id="MD"><g class="shape" ><rect x="1146" y="1356" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1209.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MD</text></g><g id="NJ"><g class="shape" ><rect x="1050" y="1582" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1111.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NJ</text></g><g id="PA"><g class="shape" ><rect x="1105" y="2034" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1167.000000" y="2100.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">PA</text></g><g id="NC"><g class="shape" ><rect x="21" y="1582" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="83.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NC</text></g><g id="SC"><g class="shape" ><rect x="22" y="1808" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="83.500000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SC</text></g><g id="ID"><g class="shape" ><rect x="1748" y="904" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1807.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ID</text></g><g id="MT"><g class="shape" ><rect x="1745" y="1130" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1808.000000" y="1196.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MT</text></g><g id="WA"><g class="shape" ><rect x="425" y="2260" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="489.500000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WA</text></g><g id="IL"><g class="shape" ><rect x="2890" y="0" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2948.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IL</text></g><g id="IN"><g class="shape" ><rect x="2889" y="226" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2948.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IN</text></g><g id="IA"><g class="shape" ><rect x="2834" y="452" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2893.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IA</text></g><g id="MI"><g class="shape" ><rect x="2706" y="678" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2766.500000" y="744.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MI</text></g><g id="KY"><g class="shape" ><rect x="2801" y="904" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2862.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KY</text></g><g id="WI"><g class="shape" ><rect x="2230" y="1808" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2291.500000" y="1874.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WI</text></g><g id="OH"><g class="shape" ><rect x="2815" y="1582" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2878.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OH</text></g><g id="MN"><g class="shape" ><rect x="2984" y="904" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="3047.500000" y="970.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MN</text></g><g id="SD"><g class="shape" ><rect x="2413" y="1582" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2475.000000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SD</text></g><g id="VA"><g class="shape" ><rect x="1370" y="2260" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1432.500000" y="2326.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VA</text></g><g id="WV"><g class="shape" ><rect x="1381" y="2486" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1445.500000" y="2552.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WV</text></g><g id="ME"><g class="shape" ><rect x="1349" y="1356" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1411.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ME</text></g><g id="NH"><g class="shape" ><rect x="792" y="1582" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="854.500000" y="1648.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NH</text></g><g id="VT"><g class="shape" ><rect x="591" y="2486" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="653.000000" y="2552.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VT</text></g><g id="ND"><g class="shape" ><rect x="2419" y="1356" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="2481.500000" y="1422.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ND</text></g><g id="(AL -- FL)[0]"><path d="M 63.000000 354.000000 C 63.000000 392.000000 63.000000 412.000000 63.000000 450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(FL -- GA)[0]"><path d="M 51.500993 579.969391 C 44.769912 618.000000 44.800000 638.000000 51.645694 676.031633" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(GA -- MS)[0]"><path d="M 51.500993 805.969391 C 44.769912 844.000000 346.600000 875.600000 1559.005043 961.858066" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- TN)[0]"><path d="M 1566.922354 1031.497740 C 1532.849558 1070.000000 1524.000000 1102.600000 1524.000000 1136.500000 C 1524.000000 1170.400000 1524.000000 1215.600000 1524.000000 1249.500000 C 1524.000000 1283.400000 1524.000000 1328.600000 1524.000000 1362.500000 C 1524.000000 1396.400000 1524.000000 1441.600000 1524.000000 1475.500000 C 1524.000000 1509.400000 1524.000000 1554.600000 1524.000000 1588.500000 C 1524.000000 1622.400000 1524.000000 1667.600000 1524.000000 1701.500000 C 1524.000000 1735.400000 1524.000000 1780.600000 1524.000000 1814.500000 C 1524.000000 1848.400000 1524.000000 1994.000000 1524.000000 2032.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(AZ -- CA)[0]"><path d="M 460.500000 1032.000000 C 460.500000 1070.000000 460.500000 1090.000000 460.500000 1128.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CA -- NV)[0]"><path d="M 396.127406 1217.146401 C 207.000000 1288.088797 244.050000 1325.600000 581.301373 1403.549610" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- NM)[0]"><path d="M 581.642140 1466.425127 C 511.050000 1518.647136 656.750000 1552.985257 1309.766224 1636.672054" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NM -- UT)[0]"><path d="M 1342.355573 1709.788854 C 1323.250000 1748.000000 1318.250000 1780.600000 1318.250000 1814.500000 C 1318.250000 1848.400000 1222.050000 2004.000000 839.208130 2083.592904" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(AR -- LA)[0]"><path d="M 1644.000000 580.000000 C 1644.000000 618.000000 1644.000000 638.000000 1644.000000 676.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(LA -- MS)[0]"><path d="M 1595.125094 805.594905 C 1566.066372 844.000000 1564.300000 864.000000 1586.496564 902.269938" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- MO)[0]"><path d="M 1601.031730 1031.885364 C 1587.539823 1070.000000 1724.150000 1100.708663 2282.771482 1183.250968" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- OK)[0]"><path d="M 2282.844715 1214.037563 C 2052.750000 1287.485876 1994.750000 1328.600000 1994.750000 1362.500000 C 1994.750000 1396.400000 1994.750000 1441.600000 1994.750000 1475.500000 C 1994.750000 1509.400000 1994.750000 1554.600000 1994.750000 1588.500000 C 1994.750000 1622.400000 2003.550000 1768.000000 2037.428744 1806.498573" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TN)[0]"><path d="M 2029.907378 1898.365887 C 1867.950000 1966.717647 1778.800000 2002.000000 1587.873615 2073.300310" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- TX)[0]"><path d="M 1460.494306 2152.521420 C 1408.200000 2198.241006 1473.350000 2229.600000 1785.809425 2307.516091" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CA -- NV)[1]"><path d="M 524.451745 1253.599977 C 568.400000 1295.244864 585.550000 1316.000000 607.746564 1354.269938" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- OR)[0]"><path d="M 581.837353 1483.054360 C 543.050000 1521.927716 533.000000 1554.600000 533.000000 1588.500000 C 533.000000 1622.400000 522.400000 1768.400000 481.427618 1808.599319" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CO -- KS)[0]"><path d="M 2054.750000 806.000000 C 2054.750000 844.000000 2054.750000 864.000000 2054.750000 902.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KS -- NE)[0]"><path d="M 1997.672354 1031.497740 C 1963.599558 1070.000000 1954.750000 1102.600000 1954.750000 1136.500000 C 1954.750000 1170.400000 1996.900000 1323.494766 2163.652794 1392.707128" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- NM)[0]"><path d="M 2181.242596 1483.632333 C 2154.079646 1522.000000 2005.200000 1552.800000 1439.978824 1635.709735" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NM -- OK)[0]"><path d="M 1374.750000 1710.000000 C 1374.750000 1748.000000 1506.150000 1778.622500 2029.774186 1860.802407" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- UT)[0]"><path d="M 2029.958401 1903.146875 C 1899.950000 1967.651592 1661.000000 2005.400000 838.989295 2090.793345" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(UT -- WY)[0]"><path d="M 712.591582 2161.439461 C 675.396018 2200.000000 665.750000 2232.600000 665.750000 2266.500000 C 665.750000 2300.400000 711.100000 2453.625279 890.635840 2523.401891" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(CT -- MA)[0]"><path d="M 649.000000 1258.000000 C 649.000000 1296.000000 608.000000 1323.200000 445.844285 1391.226300" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MA -- NY)[0]"><path d="M 327.162355 1483.547609 C 295.685841 1522.000000 287.500000 1554.600000 287.500000 1588.500000 C 287.500000 1622.400000 337.950000 1776.141130 537.867977 1848.028899" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- RI)[0]"><path d="M 560.249637 1935.683324 C 535.665929 1974.000000 529.250000 2006.600000 529.250000 2040.500000 C 529.250000 2074.400000 566.550000 2227.168635 713.933216 2295.006938" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(DE -- MD)[0]"><path d="M 1209.500000 1258.000000 C 1209.500000 1296.000000 1209.500000 1316.000000 1209.500000 1354.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MD -- NJ)[0]"><path d="M 1153.269898 1483.507630 C 1119.716814 1522.000000 1111.000000 1542.000000 1111.000000 1580.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NJ -- PA)[0]"><path d="M 1090.608531 1709.908056 C 1078.641593 1748.000000 1075.500000 1780.600000 1075.500000 1814.500000 C 1075.500000 1848.400000 1083.500000 1994.000000 1114.250610 2032.438262" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(FL -- GA)[1]"><path d="M 126.475340 524.888033 C 646.500000 607.314986 646.800000 648.600000 127.975427 730.687452" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(GA -- NC)[0]"><path d="M 74.499007 805.969391 C 81.230088 844.000000 83.000000 876.600000 83.000000 910.500000 C 83.000000 944.400000 83.000000 989.600000 83.000000 1023.500000 C 83.000000 1057.400000 83.000000 1102.600000 83.000000 1136.500000 C 83.000000 1170.400000 83.000000 1215.600000 83.000000 1249.500000 C 83.000000 1283.400000 83.000000 1328.600000 83.000000 1362.500000 C 83.000000 1396.400000 83.000000 1542.000000 83.000000 1580.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NC -- SC)[0]"><path d="M 71.500993 1709.969391 C 64.769912 1748.000000 64.800000 1768.000000 71.645694 1806.031633" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SC -- TN)[0]"><path d="M 71.500993 1935.969391 C 64.769912 1974.000000 342.800000 2005.600000 1460.005933 2091.846062" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ID -- MT)[0]"><path d="M 1807.750000 1032.000000 C 1807.750000 1070.000000 1807.750000 1090.000000 1807.750000 1128.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MT -- NV)[0]"><path d="M 1778.350904 1257.821422 C 1761.035398 1296.000000 1546.850000 1327.328337 710.239730 1412.439262" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- OR)[1]"><path d="M 622.924821 1483.886673 C 609.517699 1522.000000 606.000000 1554.600000 606.000000 1588.500000 C 606.000000 1622.400000 580.800000 1773.000000 481.718586 1831.977032" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OR -- UT)[0]"><path d="M 351.938497 1901.325879 C 210.950000 1967.295652 282.750000 2004.262719 710.784609 2084.943137" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(UT -- WA)[0]"><path d="M 774.750000 2162.000000 C 774.750000 2200.000000 730.550000 2227.400000 555.610991 2296.267393" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(WA -- WY)[0]"><path d="M 489.250000 2388.000000 C 489.250000 2426.000000 569.900000 2455.504441 890.556040 2533.052076" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IL -- IN)[0]"><path d="M 2948.250000 128.000000 C 2948.250000 166.000000 2948.250000 186.000000 2948.250000 224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IN -- IA)[0]"><path d="M 2916.853605 353.799865 C 2898.345133 392.000000 2893.500000 412.000000 2893.500000 450.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IA -- MI)[0]"><path d="M 2832.505831 569.270403 C 2780.000000 615.988189 2766.500000 638.000000 2766.500000 676.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MI -- KY)[0]"><path d="M 2704.112033 762.809251 C 2495.800000 835.629853 2514.750000 873.282816 2798.818991 949.893308" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KY -- MO)[0]"><path d="M 2818.904062 1031.661268 C 2793.203540 1070.000000 2711.700000 1099.200000 2414.437200 1175.502751" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- WI)[0]"><path d="M 2282.938161 1223.762101 C 2142.550000 1289.383040 2107.000000 1328.600000 2107.000000 1362.500000 C 2107.000000 1396.400000 2107.000000 1441.600000 2107.000000 1475.500000 C 2107.000000 1509.400000 2107.000000 1554.600000 2107.000000 1588.500000 C 2107.000000 1622.400000 2131.600000 1773.000000 2228.292408 1831.958785" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IN -- KY)[0]"><path d="M 3009.426612 328.786804 C 3099.150000 387.139281 3122.000000 424.600000 3122.000000 458.500000 C 3122.000000 492.400000 3122.000000 537.600000 3122.000000 571.500000 C 3122.000000 605.400000 3122.000000 650.600000 3122.000000 684.500000 C 3122.000000 718.400000 3082.400000 871.200000 2925.834435 939.203225" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KY -- MI)[0]"><path d="M 2903.750363 902.316676 C 2928.334071 864.000000 2913.150000 839.600000 2828.414101 783.109400" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MI -- OH)[0]"><path d="M 2734.533251 805.793591 C 2715.683628 844.000000 2710.750000 876.600000 2710.750000 910.500000 C 2710.750000 944.400000 2710.750000 989.600000 2710.750000 1023.500000 C 2710.750000 1057.400000 2710.750000 1102.600000 2710.750000 1136.500000 C 2710.750000 1170.400000 2710.750000 1215.600000 2710.750000 1249.500000 C 2710.750000 1283.400000 2710.750000 1328.600000 2710.750000 1362.500000 C 2710.750000 1396.400000 2731.550000 1546.074251 2813.093569 1601.250439" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(IA -- MN)[0]"><path d="M 2954.611559 559.914512 C 3028.400000 614.146016 3047.250000 650.600000 3047.250000 684.500000 C 3047.250000 718.400000 3047.250000 864.000000 3047.250000 902.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MN -- MO)[0]"><path d="M 2991.443753 1031.512592 C 2958.150442 1070.000000 2842.100000 1100.200000 2414.465537 1180.630318" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- NE)[0]"><path d="M 2283.110465 1238.856367 C 2206.550000 1292.342195 2190.600000 1316.000000 2204.322561 1354.118225" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- SD)[0]"><path d="M 2204.031730 1483.885364 C 2190.539823 1522.000000 2232.200000 1549.800000 2411.139098 1620.267167" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WI)[0]"><path d="M 2411.340473 1687.818611 C 2328.200000 1743.740476 2305.600000 1768.000000 2300.277296 1806.019317" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KS -- MO)[0]"><path d="M 2117.922270 1008.442476 C 2204.850000 1065.469086 2238.550000 1090.719918 2283.284091 1132.239034" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- NE)[1]"><path d="M 2368.568520 1257.912835 C 2380.196903 1296.000000 2364.450000 1319.600000 2290.870449 1372.827760" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- OK)[0]"><path d="M 2227.000000 1484.000000 C 2227.000000 1522.000000 2227.000000 1554.600000 2227.000000 1588.500000 C 2227.000000 1622.400000 2213.200000 1769.800000 2159.520067 1815.700232" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(KY -- MO)[1]"><path d="M 2889.364469 1031.845186 C 2905.318584 1070.000000 2810.100000 1100.000000 2414.460705 1179.605492" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- OH)[0]"><path d="M 2414.566136 1223.356014 C 2557.550000 1289.303673 2593.750000 1328.600000 2593.750000 1362.500000 C 2593.750000 1396.400000 2637.950000 1549.586620 2812.891696 1619.193703" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OH -- TN)[0]"><path d="M 2812.908686 1672.493690 C 2651.950000 1740.742589 2611.250000 1780.600000 2611.250000 1814.500000 C 2611.250000 1848.400000 2406.250000 2005.400000 1588.239191 2090.792348" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- VA)[0]"><path d="M 1473.001524 2161.569499 C 1442.648230 2200.000000 1434.550000 2220.000000 1433.789992 2258.000400" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(VA -- WV)[0]"><path d="M 1367.905465 2371.527186 C 1300.100000 2422.863987 1302.350000 2449.629538 1379.107984 2503.005859" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(LA -- MS)[1]"><path d="M 1708.061718 790.847317 C 1770.900000 841.119580 1767.000000 867.800000 1688.646160 921.864149" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- TX)[0]"><path d="M 1633.200743 1031.980248 C 1638.584071 1070.000000 1640.000000 1102.600000 1640.000000 1136.500000 C 1640.000000 1170.400000 1640.000000 1215.600000 1640.000000 1249.500000 C 1640.000000 1283.400000 1640.000000 1328.600000 1640.000000 1362.500000 C 1640.000000 1396.400000 1640.000000 1441.600000 1640.000000 1475.500000 C 1640.000000 1509.400000 1640.000000 1554.600000 1640.000000 1588.500000 C 1640.000000 1622.400000 1640.000000 1667.600000 1640.000000 1701.500000 C 1640.000000 1735.400000 1640.000000 1780.600000 1640.000000 1814.500000 C 1640.000000 1848.400000 1640.000000 1893.600000 1640.000000 1927.500000 C 1640.000000 1961.400000 1640.000000 2006.600000 1640.000000 2040.500000 C 1640.000000 2074.400000 1669.600000 2226.000000 1786.240587 2289.048966" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ME -- NH)[0]"><path d="M 1411.500000 1484.000000 C 1411.500000 1522.000000 1312.500000 1552.000000 918.460396 1631.603960" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MD -- PA)[0]"><path d="M 1239.469921 1483.815331 C 1257.126106 1522.000000 1261.750000 1554.600000 1261.750000 1588.500000 C 1261.750000 1622.400000 1261.750000 1667.600000 1261.750000 1701.500000 C 1261.750000 1735.400000 1261.750000 1780.600000 1261.750000 1814.500000 C 1261.750000 1848.400000 1253.350000 1994.000000 1221.036384 2032.468590" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- VA)[0]"><path d="M 1102.842791 2140.009056 C 1020.300000 2195.777877 1073.300000 2229.335991 1367.564884 2306.174655" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(VA -- WV)[1]"><path d="M 1432.000000 2388.000000 C 1432.000000 2426.000000 1433.200000 2446.000000 1437.761710 2484.014246" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MA -- NH)[0]"><path d="M 421.784384 1483.679938 C 446.539823 1522.000000 520.800000 1551.000000 790.074190 1626.460319" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NH -- NY)[0]"><path d="M 806.758321 1709.608500 C 778.389381 1748.000000 749.600000 1772.200000 665.666493 1827.894196" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- RI)[1]"><path d="M 583.077720 1935.922082 C 572.126106 1974.000000 569.250000 2006.600000 569.250000 2040.500000 C 569.250000 2074.400000 598.550000 2226.111436 713.997478 2289.593504" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(RI -- VT)[0]"><path d="M 754.931480 2387.912835 C 743.303097 2426.000000 732.450000 2446.000000 702.480064 2484.422995" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MI -- MN)[0]"><path d="M 2828.411074 803.186235 C 2868.600000 843.553778 2899.950000 868.070431 2982.089705 923.237068" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MN -- OH)[0]"><path d="M 3044.230189 1031.997845 C 3042.464602 1070.000000 3042.000000 1102.600000 3042.000000 1136.500000 C 3042.000000 1170.400000 3042.000000 1215.600000 3042.000000 1249.500000 C 3042.000000 1283.400000 3042.000000 1328.600000 3042.000000 1362.500000 C 3042.000000 1396.400000 3021.800000 1545.800000 2942.651416 1599.871805" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OH -- WI)[0]"><path d="M 2863.236420 1709.951865 C 2854.734513 1748.000000 2752.650000 1778.121355 2355.210588 1858.211687" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MN -- ND)[0]"><path d="M 3067.211768 1031.911649 C 3078.924779 1070.000000 3082.000000 1102.600000 3082.000000 1136.500000 C 3082.000000 1170.400000 2974.400000 1326.200000 2545.965662 1406.630982" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ND -- SD)[0]"><path d="M 2446.860743 1483.766434 C 2426.559735 1522.000000 2426.050000 1542.000000 2444.384538 1580.196954" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WI)[1]"><path d="M 2431.654062 1709.661268 C 2405.953540 1748.000000 2389.650000 1768.000000 2352.635064 1806.557225" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MS -- TN)[1]"><path d="M 1656.109317 1031.792015 C 1675.044248 1070.000000 1680.000000 1102.600000 1680.000000 1136.500000 C 1680.000000 1170.400000 1680.000000 1215.600000 1680.000000 1249.500000 C 1680.000000 1283.400000 1680.000000 1328.600000 1680.000000 1362.500000 C 1680.000000 1396.400000 1680.000000 1441.600000 1680.000000 1475.500000 C 1680.000000 1509.400000 1680.000000 1554.600000 1680.000000 1588.500000 C 1680.000000 1622.400000 1680.000000 1667.600000 1680.000000 1701.500000 C 1680.000000 1735.400000 1680.000000 1780.600000 1680.000000 1814.500000 C 1680.000000 1848.400000 1661.200000 1997.600000 1587.620449 2050.827760" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MO -- NE)[2]"><path d="M 2414.609194 1219.112593 C 2589.550000 1288.475088 2564.750000 1325.200000 2290.676796 1401.463848" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- OK)[1]"><path d="M 2249.968270 1483.885364 C 2263.460177 1522.000000 2267.000000 1554.600000 2267.000000 1588.500000 C 2267.000000 1622.400000 2245.200000 1772.400000 2159.668796 1828.897676" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TN)[1]"><path d="M 2094.750000 1936.000000 C 2094.750000 1974.000000 1992.950000 2004.200000 1587.711752 2084.610733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(MT -- ND)[0]"><path d="M 1848.113958 1257.696840 C 1872.011062 1296.000000 1986.350000 1326.257546 2416.784219 1406.919348" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ND -- SD)[1]"><path d="M 2469.750993 1483.969391 C 2463.019912 1522.000000 2462.450000 1542.000000 2467.011710 1580.014246" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WY)[0]"><path d="M 2475.000000 1710.000000 C 2475.000000 1748.000000 2475.000000 1780.600000 2475.000000 1814.500000 C 2475.000000 1848.400000 2475.000000 1893.600000 2475.000000 1927.500000 C 2475.000000 1961.400000 2475.000000 2006.600000 2475.000000 2040.500000 C 2475.000000 2074.400000 2475.000000 2119.600000 2475.000000 2153.500000 C 2475.000000 2187.400000 2475.000000 2232.600000 2475.000000 2266.500000 C 2475.000000 2300.400000 2184.200000 2457.600000 1022.994506 2543.851852" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NE -- SD)[1]"><path d="M 2290.944186 1478.296093 C 2335.500000 1520.982500 2360.200000 1543.600000 2411.497670 1588.679771" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WY)[1]"><path d="M 2507.251876 1709.790436 C 2526.272124 1748.000000 2531.250000 1780.600000 2531.250000 1814.500000 C 2531.250000 1848.400000 2531.250000 1893.600000 2531.250000 1927.500000 C 2531.250000 1961.400000 2531.250000 2006.600000 2531.250000 2040.500000 C 2531.250000 2074.400000 2531.250000 2119.600000 2531.250000 2153.500000 C 2531.250000 2187.400000 2531.250000 2232.600000 2531.250000 2266.500000 C 2531.250000 2300.400000 2229.250000 2457.600000 1023.244904 2543.857318" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NV -- OR)[2]"><path d="M 710.155410 1439.544280 C 941.650000 1513.387297 1000.000000 1554.600000 1000.000000 1588.500000 C 1000.000000 1622.400000 896.000000 1778.200000 481.963309 1858.618665" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OR -- UT)[1]"><path d="M 416.750000 1936.000000 C 416.750000 1974.000000 475.950000 2002.686034 710.842754 2076.828160" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NH -- VT)[0]"><path d="M 894.153443 1709.705257 C 917.621681 1748.000000 923.750000 1780.600000 923.750000 1814.500000 C 923.750000 1848.400000 923.750000 1893.600000 923.750000 1927.500000 C 923.750000 1961.400000 923.750000 2006.600000 923.750000 2040.500000 C 923.750000 2074.400000 923.750000 2119.600000 923.750000 2153.500000 C 923.750000 2187.400000 923.750000 2232.600000 923.750000 2266.500000 C 923.750000 2300.400000 881.950000 2453.400000 716.596415 2522.231397" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NJ -- NY)[0]"><path d="M 1154.062090 1709.664667 C 1179.590708 1748.000000 1081.850000 1778.200000 666.213582 1858.620073" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- PA)[0]"><path d="M 665.401715 1914.460084 C 746.550000 1969.866465 834.700000 2003.090420 1102.575594 2078.907432" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NM -- OK)[1]"><path d="M 1407.144427 1709.788854 C 1426.250000 1748.000000 1551.350000 1778.454107 2029.778389 1859.934752" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TX)[0]"><path d="M 2159.515396 1905.480517 C 2277.150000 1968.108127 2307.000000 2006.600000 2307.000000 2040.500000 C 2307.000000 2074.400000 2227.800000 2229.600000 1912.941433 2307.519544" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NY -- PA)[1]"><path d="M 665.502522 1906.056131 C 778.550000 1968.218491 866.700000 2002.699652 1102.592154 2076.898158" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- RI)[0]"><path d="M 1103.004533 2153.384973 C 1052.300000 2198.411395 998.250000 2227.600000 836.087826 2297.211080" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(RI -- VT)[1]"><path d="M 794.568520 2387.912835 C 806.196903 2426.000000 790.450000 2449.600000 716.870449 2502.827760" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(NC -- SC)[1]"><path d="M 146.501891 1700.842130 C 198.200000 1746.304280 198.100000 1769.600000 146.012123 1814.690998" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SC -- TN)[1]"><path d="M 112.969921 1935.815331 C 130.626106 1974.000000 400.650000 2005.600000 1460.256591 2091.837763" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- VA)[1]"><path d="M 1535.499007 2161.969391 C 1542.230088 2200.000000 1534.000000 2220.000000 1495.414214 2258.585786" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(ND -- SD)[2]"><path d="M 2521.329776 1483.700210 C 2545.055310 1522.000000 2544.450000 1542.000000 2518.374620 1580.346147" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OH -- PA)[0]"><path d="M 2900.718270 1709.885364 C 2914.210177 1748.000000 2917.750000 1780.600000 2917.750000 1814.500000 C 2917.750000 1848.400000 2579.950000 2005.800000 1230.745848 2092.871197" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- WV)[0]"><path d="M 1177.999007 2161.969391 C 1184.730088 2200.000000 1186.500000 2232.600000 1186.500000 2266.500000 C 1186.500000 2300.400000 1225.350000 2452.966377 1378.917157 2520.031454" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OK -- TX)[1]"><path d="M 2159.575228 1900.039646 C 2309.150000 1967.044400 2347.000000 2006.600000 2347.000000 2040.500000 C 2347.000000 2074.400000 2259.800000 2229.800000 1912.950354 2308.557144" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(OR -- WA)[0]"><path d="M 458.250363 1935.683324 C 482.834071 1974.000000 489.250000 2006.600000 489.250000 2040.500000 C 489.250000 2074.400000 489.250000 2220.000000 489.250000 2258.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(PA -- WV)[1]"><path d="M 1200.889257 2161.766434 C 1221.190265 2200.000000 1226.500000 2232.600000 1226.500000 2266.500000 C 1226.500000 2300.400000 1257.350000 2451.936229 1378.973079 2514.763236" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(SD -- WY)[2]"><path d="M 2529.958365 1709.522548 C 2562.732301 1748.000000 2571.250000 1780.600000 2571.250000 1814.500000 C 2571.250000 1848.400000 2571.250000 1893.600000 2571.250000 1927.500000 C 2571.250000 1961.400000 2571.250000 2006.600000 2571.250000 2040.500000 C 2571.250000 2074.400000 2571.250000 2119.600000 2571.250000 2153.500000 C 2571.250000 2187.400000 2571.250000 2232.600000 2571.250000 2266.500000 C 2571.250000 2300.400000 2261.250000 2457.600000 1023.245163 2543.860982" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(TN -- VA)[2]"><path d="M 1558.389257 2161.766434 C 1578.690265 2200.000000 1566.200000 2223.200000 1496.606475 2274.808682" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(UT -- WY)[1]"><path d="M 836.908418 2161.439461 C 874.103982 2200.000000 883.750000 2232.600000 883.750000 2266.500000 C 883.750000 2300.400000 890.150000 2446.000000 914.671893 2484.315457" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><g id="(VA -- WV)[2]"><path d="M 1497.464313 2335.321164 C 1917.700000 2415.789006 1920.650000 2456.000000 1512.213051 2535.617339" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#2384960190)"/></g><mask id="2384960190" maskUnits="userSpaceOnUse" x="-100" y="-100" width="3324" height="2816">
 <rect x="-100" y="-100" width="3324" height="2816" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/stable/us_map/elk/sketch.exp.svg b/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
index 16b62c4bc..e30e5858f 100644
--- a/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1845" height="3136" viewBox="-90 -90 1845 3136"><style type="text/css">
@@ -18,7 +19,27 @@ width="1845" height="3136" viewBox="-90 -90 1845 3136"><style type="text/css">
 }
 
 ]]>
-</style><g id="AK"><g class="shape" ><rect x="1237" y="12" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1300.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AK</text></g><g id="HI"><g class="shape" ><rect x="1098" y="12" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1157.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">HI</text></g><g id="AL"><g class="shape" ><rect x="549" y="238" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="611.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AL</text></g><g id="FL"><g class="shape" ><rect x="550" y="464" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="610.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">FL</text></g><g id="GA"><g class="shape" ><rect x="549" y="730" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="612.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">GA</text></g><g id="MS"><g class="shape" ><rect x="415" y="956" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="478.000000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MS</text></g><g id="TN"><g class="shape" ><rect x="566" y="2336" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="628.000000" y="2402.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TN</text></g><g id="AZ"><g class="shape" ><rect x="1517" y="956" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1579.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AZ</text></g><g id="CA"><g class="shape" ><rect x="1517" y="1222" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1579.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CA</text></g><g id="NV"><g class="shape" ><rect x="1497" y="1488" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1559.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NV</text></g><g id="NM"><g class="shape" ><rect x="1005" y="1744" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1068.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NM</text></g><g id="UT"><g class="shape" ><rect x="1451" y="2336" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1513.000000" y="2402.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">UT</text></g><g id="AR"><g class="shape" ><rect x="404" y="464" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="467.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AR</text></g><g id="LA"><g class="shape" ><rect x="406" y="730" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="467.500000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">LA</text></g><g id="MO"><g class="shape" ><rect x="1032" y="1222" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1096.000000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MO</text></g><g id="OK"><g class="shape" ><rect x="714" y="2050" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="777.000000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OK</text></g><g id="TX"><g class="shape" ><rect x="422" y="2572" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="483.500000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TX</text></g><g id="OR"><g class="shape" ><rect x="1515" y="1744" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1578.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OR</text></g><g id="CO"><g class="shape" ><rect x="819" y="730" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CO</text></g><g id="KS"><g class="shape" ><rect x="820" y="956" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="881.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KS</text></g><g id="NE"><g class="shape" ><rect x="986" y="1488" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1047.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NE</text></g><g id="WY"><g class="shape" ><rect x="1408" y="2818" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1472.000000" y="2884.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WY</text></g><g id="CT"><g class="shape" ><rect x="158" y="1222" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="220.000000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CT</text></g><g id="MA"><g class="shape" ><rect x="157" y="1488" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="220.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MA</text></g><g id="NY"><g class="shape" ><rect x="179" y="2050" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="241.000000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NY</text></g><g id="RI"><g class="shape" ><rect x="170" y="2572" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.000000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">RI</text></g><g id="DE"><g class="shape" ><rect x="306" y="1222" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="367.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">DE</text></g><g id="MD"><g class="shape" ><rect x="304" y="1488" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="367.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MD</text></g><g id="NJ"><g class="shape" ><rect x="256" y="1744" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="317.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NJ</text></g><g id="PA"><g class="shape" ><rect x="276" y="2336" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="338.000000" y="2402.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">PA</text></g><g id="NC"><g class="shape" ><rect x="571" y="1744" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="633.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NC</text></g><g id="SC"><g class="shape" ><rect x="571" y="2050" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="632.500000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SC</text></g><g id="ID"><g class="shape" ><rect x="1378" y="956" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1437.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ID</text></g><g id="MT"><g class="shape" ><rect x="1180" y="1222" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1243.000000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MT</text></g><g id="WA"><g class="shape" ><rect x="1524" y="2572" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1588.500000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WA</text></g><g id="IL"><g class="shape" ><rect x="1383" y="12" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1441.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IL</text></g><g id="IN"><g class="shape" ><rect x="1382" y="238" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1441.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IN</text></g><g id="IA"><g class="shape" ><rect x="1402" y="464" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1461.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IA</text></g><g id="MI"><g class="shape" ><rect x="965" y="730" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1025.500000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MI</text></g><g id="KY"><g class="shape" ><rect x="1259" y="464" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1320.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KY</text></g><g id="WI"><g class="shape" ><rect x="956" y="2050" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1017.500000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WI</text></g><g id="OH"><g class="shape" ><rect x="787" y="1488" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="850.000000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OH</text></g><g id="MN"><g class="shape" ><rect x="1220" y="956" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1283.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MN</text></g><g id="SD"><g class="shape" ><rect x="1202" y="1744" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1264.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SD</text></g><g id="VA"><g class="shape" ><rect x="565" y="2572" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="627.500000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VA</text></g><g id="WV"><g class="shape" ><rect x="532" y="2818" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="596.500000" y="2884.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WV</text></g><g id="ME"><g class="shape" ><rect x="12" y="1488" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="74.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ME</text></g><g id="NH"><g class="shape" ><rect x="32" y="1744" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="94.500000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NH</text></g><g id="VT"><g class="shape" ><rect x="147" y="2818" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="209.000000" y="2884.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VT</text></g><g id="ND"><g class="shape" ><rect x="1232" y="1488" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ND</text></g><g id="(AL -- FL)[0]"><path d="M 611.466667 366.000000 L 611.466667 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(FL -- GA)[0]"><path d="M 591.300000 592.000000 L 591.300000 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(GA -- MS)[0]"><path d="M 591.300000 858.000000 L 591.300000 896.000000 S 591.300000 906.000000 581.300000 906.000000 L 520.300000 906.000000 S 510.300000 906.000000 510.300000 916.000000 L 510.300000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- TN)[0]"><path d="M 466.200000 1084.000000 L 466.200000 2246.000000 S 466.200000 2256.000000 476.200000 2256.000000 L 571.633333 2256.000000 S 581.633333 2256.000000 581.633333 2266.000000 L 581.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(AZ -- CA)[0]"><path d="M 1580.383333 1084.000000 L 1580.383333 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CA -- NV)[0]"><path d="M 1559.550000 1350.000000 L 1559.550000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- NM)[0]"><path d="M 1522.050000 1616.000000 L 1522.050000 1664.000000 S 1522.050000 1674.000000 1512.050000 1674.000000 L 1099.847619 1674.000000 S 1089.847619 1674.000000 1089.847619 1684.000000 L 1089.847619 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NM -- UT)[0]"><path d="M 1100.347619 1872.000000 L 1100.347619 2216.000000 S 1100.347619 2226.000000 1110.347619 2226.000000 L 1490.650000 2226.000000 S 1500.650000 2226.000000 1500.650000 2236.000000 L 1500.650000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(AR -- LA)[0]"><path d="M 467.800000 592.000000 L 467.800000 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(LA -- MS)[0]"><path d="M 447.300000 858.000000 L 447.300000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- MO)[0]"><path d="M 516.600000 1084.000000 L 516.600000 1142.000000 S 516.600000 1152.000000 526.600000 1152.000000 L 1043.466667 1152.000000 S 1053.466667 1152.000000 1053.466667 1162.000000 L 1053.466667 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- OK)[0]"><path d="M 1050.419048 1350.000000 L 1050.419048 1388.000000 S 1050.419048 1398.000000 1040.419048 1398.000000 L 765.633333 1398.000000 S 755.633333 1398.000000 755.633333 1408.000000 L 755.633333 1910.000000 S 755.633333 1920.000000 745.633333 1920.000000 L 745.633333 1920.000000 S 735.633333 1920.000000 735.633333 1930.000000 L 735.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TN)[0]"><path d="M 777.633333 2178.000000 L 777.633333 2246.000000 S 777.633333 2256.000000 767.633333 2256.000000 L 653.633333 2256.000000 S 643.633333 2256.000000 643.633333 2266.000000 L 643.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- TX)[0]"><path d="M 590.933333 2464.000000 L 590.933333 2502.000000 S 590.933333 2512.000000 580.933333 2512.000000 L 531.133333 2512.000000 S 521.133333 2512.000000 521.133333 2522.000000 L 521.133333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CA -- NV)[1]"><path d="M 1601.216667 1350.000000 L 1601.216667 1392.791667 C 1601.216667 1403.208333 1590.800000 1392.791667 1590.800000 1403.208333 L 1590.800000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- OR)[0]"><path d="M 1547.050000 1616.000000 L 1547.050000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CO -- KS)[0]"><path d="M 882.133333 858.000000 L 882.133333 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KS -- NE)[0]"><path d="M 861.633333 1084.000000 L 861.633333 1408.000000 S 861.633333 1418.000000 871.633333 1418.000000 L 1000.947619 1418.000000 S 1010.947619 1418.000000 1010.947619 1428.000000 L 1010.947619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- NM)[0]"><path d="M 1047.847619 1616.000000 L 1047.847619 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NM -- OK)[0]"><path d="M 1037.347619 1872.000000 L 1037.347619 1910.000000 S 1037.347619 1920.000000 1027.347619 1920.000000 L 808.633333 1920.000000 S 798.633333 1920.000000 798.633333 1930.000000 L 798.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- UT)[0]"><path d="M 819.633333 2178.000000 L 819.633333 2276.000000 S 819.633333 2286.000000 829.633333 2286.000000 L 1465.850000 2286.000000 S 1475.850000 2286.000000 1475.850000 2296.000000 L 1475.850000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(UT -- WY)[0]"><path d="M 1482.050000 2464.000000 L 1482.050000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CT -- MA)[0]"><path d="M 220.500000 1350.000000 L 220.500000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MA -- NY)[0]"><path d="M 241.666667 1616.000000 L 241.666667 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- RI)[0]"><path d="M 204.466667 2178.000000 L 204.466667 2509.650000 C 204.466667 2514.350000 199.766667 2509.650000 199.766667 2514.350000 L 199.766667 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(DE -- MD)[0]"><path d="M 367.500000 1350.000000 L 367.500000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MD -- NJ)[0]"><path d="M 346.333333 1616.000000 L 346.333333 1654.000000 S 346.333333 1664.000000 336.333333 1664.000000 L 327.666667 1664.000000 S 317.666667 1664.000000 317.666667 1674.000000 L 317.666667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NJ -- PA)[0]"><path d="M 338.000000 1872.000000 L 338.000000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(FL -- GA)[1]"><path d="M 631.633333 592.000000 L 631.633333 639.166667 C 631.633333 640.833333 633.300000 639.166667 633.300000 640.833333 L 633.300000 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(GA -- NC)[0]"><path d="M 633.300000 858.000000 L 633.300000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NC -- SC)[0]"><path d="M 612.633333 1872.000000 L 612.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SC -- TN)[0]"><path d="M 612.633333 2178.000000 L 612.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ID -- MT)[0]"><path d="M 1438.383333 1084.000000 L 1438.383333 1162.000000 S 1438.383333 1172.000000 1428.383333 1172.000000 L 1253.133333 1172.000000 S 1243.133333 1172.000000 1243.133333 1182.000000 L 1243.133333 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MT -- NV)[0]"><path d="M 1264.133333 1350.000000 L 1264.133333 1388.000000 S 1264.133333 1398.000000 1274.133333 1398.000000 L 1518.300000 1398.000000 S 1528.300000 1398.000000 1528.300000 1408.000000 L 1528.300000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- OR)[1]"><path d="M 1572.050000 1616.000000 L 1572.050000 1660.750000 C 1572.050000 1667.250000 1578.550000 1660.750000 1578.550000 1667.250000 L 1578.550000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OR -- UT)[0]"><path d="M 1547.050000 1872.000000 L 1547.050000 1910.000000 S 1547.050000 1920.000000 1537.050000 1920.000000 L 1535.450000 1920.000000 S 1525.450000 1920.000000 1525.450000 1930.000000 L 1525.450000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(UT -- WA)[0]"><path d="M 1544.050000 2464.000000 L 1544.050000 2502.000000 S 1544.050000 2512.000000 1554.050000 2512.000000 L 1557.050000 2512.000000 S 1567.050000 2512.000000 1567.050000 2522.000000 L 1567.050000 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(WA -- WY)[0]"><path d="M 1588.550000 2700.000000 L 1588.550000 2738.000000 S 1588.550000 2748.000000 1578.550000 2748.000000 L 1528.621429 2748.000000 S 1518.621429 2748.000000 1518.621429 2758.000000 L 1518.621429 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IL -- IN)[0]"><path d="M 1442.150000 140.000000 L 1442.150000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IN -- IA)[0]"><path d="M 1461.983333 366.000000 L 1461.983333 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IA -- MI)[0]"><path d="M 1442.150000 592.000000 L 1442.150000 650.000000 S 1442.150000 660.000000 1432.150000 660.000000 L 1065.883333 660.000000 S 1055.883333 660.000000 1055.883333 670.000000 L 1055.883333 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MI -- KY)[0]"><path d="M 1025.633333 728.000000 L 1025.633333 660.000000 S 1025.633333 650.000000 1035.633333 650.000000 L 1298.683333 650.000000 S 1308.683333 650.000000 1308.683333 640.000000 L 1308.683333 592.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KY -- MO)[0]"><path d="M 1333.283333 592.000000 L 1333.283333 660.000000 S 1333.283333 670.000000 1323.283333 670.000000 L 1106.133333 670.000000 S 1096.133333 670.000000 1096.133333 680.000000 L 1096.133333 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- WI)[0]"><path d="M 1141.847619 1350.000000 L 1141.847619 1950.000000 S 1141.847619 1960.000000 1131.847619 1960.000000 L 990.947619 1960.000000 S 980.947619 1960.000000 980.947619 1970.000000 L 980.947619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IN -- KY)[0]"><path d="M 1422.316667 366.000000 L 1422.316667 404.000000 S 1422.316667 414.000000 1412.316667 414.000000 L 1330.983333 414.000000 S 1320.983333 414.000000 1320.983333 424.000000 L 1320.983333 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KY -- MI)[0]"><path d="M 1284.083333 592.000000 L 1284.083333 630.000000 S 1284.083333 640.000000 1274.083333 640.000000 L 1005.383333 640.000000 S 995.383333 640.000000 995.383333 650.000000 L 995.383333 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MI -- OH)[0]"><path d="M 1005.466667 858.000000 L 1005.466667 896.000000 S 1005.466667 906.000000 995.466667 906.000000 L 819.633333 906.000000 S 809.633333 906.000000 809.633333 916.000000 L 809.633333 1403.250000 C 809.633333 1412.750000 819.133333 1403.250000 819.133333 1412.750000 L 819.133333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IA -- MN)[0]"><path d="M 1481.816667 592.000000 L 1481.816667 670.000000 S 1481.816667 680.000000 1471.816667 680.000000 L 1315.550000 680.000000 S 1305.550000 680.000000 1305.550000 690.000000 L 1305.550000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MN -- MO)[0]"><path d="M 1284.383333 1084.000000 L 1284.383333 1142.000000 S 1284.383333 1152.000000 1274.383333 1152.000000 L 1127.466667 1152.000000 S 1117.466667 1152.000000 1117.466667 1162.000000 L 1117.466667 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- NE)[0]"><path d="M 1086.990476 1350.000000 L 1086.990476 1408.000000 S 1086.990476 1418.000000 1076.990476 1418.000000 L 1045.547619 1418.000000 S 1035.547619 1418.000000 1035.547619 1428.000000 L 1035.547619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- SD)[0]"><path d="M 1068.347619 1616.000000 L 1068.347619 1674.000000 S 1068.347619 1684.000000 1078.347619 1684.000000 L 1212.716667 1684.000000 S 1222.716667 1684.000000 1222.716667 1694.000000 L 1222.716667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WI)[0]"><path d="M 1264.050000 1872.000000 L 1264.050000 1960.000000 S 1264.050000 1970.000000 1254.050000 1970.000000 L 1015.547619 1970.000000 S 1005.547619 1970.000000 1005.547619 1980.000000 L 1005.547619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KS -- MO)[0]"><path d="M 902.633333 1084.000000 L 902.633333 1122.000000 S 902.633333 1132.000000 912.633333 1132.000000 L 1064.800000 1132.000000 S 1074.800000 1132.000000 1074.800000 1142.000000 L 1074.800000 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- NE)[1]"><path d="M 1105.276190 1350.000000 L 1105.276190 1418.000000 S 1105.276190 1428.000000 1095.276190 1428.000000 L 1070.147619 1428.000000 S 1060.147619 1428.000000 1060.147619 1438.000000 L 1060.147619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- OK)[0]"><path d="M 1006.847619 1616.000000 L 1006.847619 1664.000000 S 1006.847619 1674.000000 996.847619 1674.000000 L 776.633333 1674.000000 S 766.633333 1674.000000 766.633333 1684.000000 L 766.633333 1925.000000 C 766.633333 1935.000000 756.633333 1925.000000 756.633333 1935.000000 L 756.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KY -- MO)[1]"><path d="M 1357.883333 592.000000 L 1357.883333 1152.000000 S 1357.883333 1162.000000 1347.883333 1162.000000 L 1148.800000 1162.000000 S 1138.800000 1162.000000 1138.800000 1172.000000 L 1138.800000 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- OH)[0]"><path d="M 1068.704762 1350.000000 L 1068.704762 1398.000000 S 1068.704762 1408.000000 1058.704762 1408.000000 L 892.133333 1408.000000 S 882.133333 1408.000000 882.133333 1418.000000 L 882.133333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OH -- TN)[0]"><path d="M 850.633333 1616.000000 L 850.633333 2266.000000 S 850.633333 2276.000000 840.633333 2276.000000 L 684.633333 2276.000000 S 674.633333 2276.000000 674.633333 2286.000000 L 674.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- VA)[0]"><path d="M 615.733333 2464.000000 L 615.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(VA -- WV)[0]"><path d="M 596.983333 2700.000000 L 596.983333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(LA -- MS)[1]"><path d="M 488.300000 858.000000 L 488.300000 901.250000 C 488.300000 910.750000 478.800000 901.250000 478.800000 910.750000 L 478.800000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- TX)[0]"><path d="M 441.000000 1084.000000 L 441.000000 2508.833333 C 441.000000 2515.166667 447.333333 2508.833333 447.333333 2515.166667 L 447.333333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ME -- NH)[0]"><path d="M 74.500000 1616.000000 L 74.500000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MD -- PA)[0]"><path d="M 388.666667 1616.000000 L 388.666667 2216.000000 S 388.666667 2226.000000 378.666667 2226.000000 L 368.666667 2226.000000 S 358.666667 2226.000000 358.666667 2236.000000 L 358.666667 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- VA)[0]"><path d="M 375.200000 2464.000000 L 375.200000 2512.000000 S 375.200000 2522.000000 385.200000 2522.000000 L 580.733333 2522.000000 S 590.733333 2522.000000 590.733333 2532.000000 L 590.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(VA -- WV)[1]"><path d="M 628.233333 2700.000000 L 628.233333 2743.125000 C 628.233333 2752.875000 618.483333 2743.125000 618.483333 2752.875000 L 618.483333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MA -- NH)[0]"><path d="M 199.333333 1616.000000 L 199.333333 1654.000000 S 199.333333 1664.000000 189.333333 1664.000000 L 126.166667 1664.000000 S 116.166667 1664.000000 116.166667 1674.000000 L 116.166667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NH -- NY)[0]"><path d="M 116.166667 1872.000000 L 116.166667 1910.000000 S 116.166667 1920.000000 126.166667 1920.000000 L 200.666667 1920.000000 S 210.666667 1920.000000 210.666667 1930.000000 L 210.666667 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- RI)[1]"><path d="M 229.266667 2178.000000 L 229.266667 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(RI -- VT)[0]"><path d="M 209.600000 2700.000000 L 209.600000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MI -- MN)[0]"><path d="M 1045.800000 858.000000 L 1045.800000 896.000000 S 1045.800000 906.000000 1055.800000 906.000000 L 1253.216667 906.000000 S 1263.216667 906.000000 1263.216667 916.000000 L 1263.216667 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MN -- OH)[0]"><path d="M 1252.633333 1084.000000 L 1252.633333 1132.000000 S 1252.633333 1142.000000 1242.633333 1142.000000 L 860.633333 1142.000000 S 850.633333 1142.000000 850.633333 1152.000000 L 850.633333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OH -- WI)[0]"><path d="M 882.133333 1616.000000 L 882.133333 1684.000000 S 882.133333 1694.000000 892.133333 1694.000000 L 1494.550000 1694.000000 S 1504.550000 1694.000000 1504.550000 1704.000000 L 1504.550000 1980.000000 S 1504.550000 1990.000000 1494.550000 1990.000000 L 1064.747619 1990.000000 S 1054.747619 1990.000000 1054.747619 2000.000000 L 1054.747619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MN -- ND)[0]"><path d="M 1316.133333 1084.000000 L 1316.133333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ND -- SD)[0]"><path d="M 1264.050000 1616.000000 L 1264.050000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WI)[1]"><path d="M 1284.716667 1872.000000 L 1284.716667 1970.000000 S 1284.716667 1980.000000 1274.716667 1980.000000 L 1040.147619 1980.000000 S 1030.147619 1980.000000 1030.147619 1990.000000 L 1030.147619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- TN)[1]"><path d="M 491.400000 1084.000000 L 491.400000 2216.000000 S 491.400000 2226.000000 501.400000 2226.000000 L 587.133333 2226.000000 S 597.133333 2226.000000 597.133333 2236.000000 L 597.133333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- NE)[2]"><path d="M 1123.561905 1350.000000 L 1123.561905 1428.000000 S 1123.561905 1438.000000 1113.561905 1438.000000 L 1094.747619 1438.000000 S 1084.747619 1438.000000 1084.747619 1448.000000 L 1084.747619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- OK)[1]"><path d="M 1027.347619 1616.000000 L 1027.347619 1674.000000 S 1027.347619 1684.000000 1017.347619 1684.000000 L 787.633333 1684.000000 S 777.633333 1684.000000 777.633333 1694.000000 L 777.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TN)[1]"><path d="M 798.633333 2178.000000 L 798.633333 2256.000000 S 798.633333 2266.000000 788.633333 2266.000000 L 669.133333 2266.000000 S 659.133333 2266.000000 659.133333 2276.000000 L 659.133333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MT -- ND)[0]"><path d="M 1222.133333 1350.000000 L 1222.133333 1398.000000 S 1222.133333 1408.000000 1232.133333 1408.000000 L 1264.466667 1408.000000 S 1274.466667 1408.000000 1274.466667 1418.000000 L 1274.466667 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ND -- SD)[1]"><path d="M 1295.300000 1616.000000 L 1295.300000 1678.708333 C 1295.300000 1689.291667 1284.716667 1678.708333 1284.716667 1689.291667 L 1284.716667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WY)[0]"><path d="M 1222.716667 1872.000000 L 1222.716667 1930.000000 S 1222.716667 1940.000000 1212.716667 1940.000000 L 944.347619 1940.000000 S 934.347619 1940.000000 934.347619 1950.000000 L 934.347619 2758.000000 S 934.347619 2768.000000 944.347619 2768.000000 L 1417.192857 2768.000000 S 1427.192857 2768.000000 1427.192857 2778.000000 L 1427.192857 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- SD)[1]"><path d="M 1088.847619 1616.000000 L 1088.847619 1654.000000 S 1088.847619 1664.000000 1098.847619 1664.000000 L 1233.383333 1664.000000 S 1243.383333 1664.000000 1243.383333 1674.000000 L 1243.383333 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WY)[1]"><path d="M 1243.383333 1872.000000 L 1243.383333 1940.000000 S 1243.383333 1950.000000 1233.383333 1950.000000 L 955.347619 1950.000000 S 945.347619 1950.000000 945.347619 1960.000000 L 945.347619 2748.000000 S 945.347619 2758.000000 955.347619 2758.000000 L 1435.478571 2758.000000 S 1445.478571 2758.000000 1445.478571 2768.000000 L 1445.478571 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- OR)[2]"><path d="M 1597.050000 1616.000000 L 1597.050000 1657.500000 C 1597.050000 1670.500000 1610.050000 1657.500000 1610.050000 1670.500000 L 1610.050000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OR -- UT)[1]"><path d="M 1578.550000 1872.000000 L 1578.550000 2216.000000 S 1578.550000 2226.000000 1568.550000 2226.000000 L 1560.250000 2226.000000 S 1550.250000 2226.000000 1550.250000 2236.000000 L 1550.250000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NH -- VT)[0]"><path d="M 74.500000 1872.000000 L 74.500000 2738.000000 S 74.500000 2748.000000 84.500000 2748.000000 L 168.600000 2748.000000 S 178.600000 2748.000000 178.600000 2758.000000 L 178.600000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NJ -- NY)[0]"><path d="M 297.333333 1872.000000 L 297.333333 1910.000000 S 297.333333 1920.000000 287.333333 1920.000000 L 282.666667 1920.000000 S 272.666667 1920.000000 272.666667 1930.000000 L 272.666667 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- PA)[0]"><path d="M 254.066667 2178.000000 L 254.066667 2226.000000 S 254.066667 2236.000000 264.066667 2236.000000 L 286.666667 2236.000000 S 296.666667 2236.000000 296.666667 2246.000000 L 296.666667 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NM -- OK)[1]"><path d="M 1068.847619 1872.000000 L 1068.847619 1920.000000 S 1068.847619 1930.000000 1058.847619 1930.000000 L 829.633333 1930.000000 S 819.633333 1930.000000 819.633333 1940.000000 L 819.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TX)[0]"><path d="M 735.633333 2178.000000 L 735.633333 2226.000000 S 735.633333 2236.000000 725.633333 2236.000000 L 495.533333 2236.000000 S 485.533333 2236.000000 485.533333 2246.000000 L 485.533333 2505.200000 C 485.533333 2518.800000 471.933333 2505.200000 471.933333 2518.800000 L 471.933333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- PA)[1]"><path d="M 278.866667 2178.000000 L 278.866667 2216.000000 S 278.866667 2226.000000 288.866667 2226.000000 L 307.333333 2226.000000 S 317.333333 2226.000000 317.333333 2236.000000 L 317.333333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- RI)[0]"><path d="M 300.800000 2464.000000 L 300.800000 2502.000000 S 300.800000 2512.000000 290.800000 2512.000000 L 268.766667 2512.000000 S 258.766667 2512.000000 258.766667 2522.000000 L 258.766667 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(RI -- VT)[1]"><path d="M 248.933333 2700.000000 L 248.933333 2743.833333 C 248.933333 2752.166667 240.600000 2743.833333 240.600000 2752.166667 L 240.600000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NC -- SC)[1]"><path d="M 653.966667 1872.000000 L 653.966667 1919.833333 C 653.966667 1920.166667 653.633333 1919.833333 653.633333 1920.166667 L 653.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SC -- TN)[1]"><path d="M 653.633333 2178.000000 L 653.633333 2216.000000 S 653.633333 2226.000000 643.633333 2226.000000 L 638.133333 2226.000000 S 628.133333 2226.000000 628.133333 2236.000000 L 628.133333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- VA)[1]"><path d="M 640.533333 2464.000000 L 640.533333 2511.900000 C 640.533333 2512.100000 640.733333 2511.900000 640.733333 2512.100000 L 640.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ND -- SD)[2]"><path d="M 1326.550000 1616.000000 L 1326.550000 1674.000000 S 1326.550000 1684.000000 1316.550000 1684.000000 L 1315.383333 1684.000000 S 1305.383333 1684.000000 1305.383333 1694.000000 L 1305.383333 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OH -- PA)[0]"><path d="M 819.133333 1616.000000 L 819.133333 1654.000000 S 819.133333 1664.000000 809.133333 1664.000000 L 440.000000 1664.000000 S 430.000000 1664.000000 430.000000 1674.000000 L 430.000000 2226.000000 S 430.000000 2236.000000 420.000000 2236.000000 L 389.333333 2236.000000 S 379.333333 2236.000000 379.333333 2246.000000 L 379.333333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- WV)[0]"><path d="M 325.600000 2464.000000 L 325.600000 2748.000000 S 325.600000 2758.000000 335.600000 2758.000000 L 543.983333 2758.000000 S 553.983333 2758.000000 553.983333 2768.000000 L 553.983333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TX)[1]"><path d="M 756.633333 2178.000000 L 756.633333 2236.000000 S 756.633333 2246.000000 746.633333 2246.000000 L 506.533333 2246.000000 S 496.533333 2246.000000 496.533333 2256.000000 L 496.533333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OR -- WA)[0]"><path d="M 1610.050000 1872.000000 L 1610.050000 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- WV)[1]"><path d="M 350.400000 2464.000000 L 350.400000 2738.000000 S 350.400000 2748.000000 360.400000 2748.000000 L 565.483333 2748.000000 S 575.483333 2748.000000 575.483333 2758.000000 L 575.483333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WY)[2]"><path d="M 1305.383333 1872.000000 L 1305.383333 1990.000000 S 1305.383333 2000.000000 1295.383333 2000.000000 L 1099.347619 2000.000000 S 1089.347619 2000.000000 1089.347619 2010.000000 L 1089.347619 2738.000000 S 1089.347619 2748.000000 1099.347619 2748.000000 L 1453.764286 2748.000000 S 1463.764286 2748.000000 1463.764286 2758.000000 L 1463.764286 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- VA)[2]"><path d="M 665.333333 2464.000000 L 665.333333 2511.800000 C 665.333333 2512.200000 665.733333 2511.800000 665.733333 2512.200000 L 665.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(UT -- WY)[1]"><path d="M 1513.050000 2464.000000 L 1513.050000 2741.642857 C 1513.050000 2754.357143 1500.335714 2741.642857 1500.335714 2754.357143 L 1500.335714 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(VA -- WV)[2]"><path d="M 659.483333 2700.000000 L 659.483333 2738.250000 C 659.483333 2757.750000 639.983333 2738.250000 639.983333 2757.750000 L 639.983333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><mask id="1504586199" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1845" height="3136">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="AK"><g class="shape" ><rect x="1237" y="12" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1300.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AK</text></g><g id="HI"><g class="shape" ><rect x="1098" y="12" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1157.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">HI</text></g><g id="AL"><g class="shape" ><rect x="549" y="238" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="611.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AL</text></g><g id="FL"><g class="shape" ><rect x="550" y="464" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="610.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">FL</text></g><g id="GA"><g class="shape" ><rect x="549" y="730" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="612.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">GA</text></g><g id="MS"><g class="shape" ><rect x="415" y="956" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="478.000000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MS</text></g><g id="TN"><g class="shape" ><rect x="566" y="2336" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="628.000000" y="2402.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TN</text></g><g id="AZ"><g class="shape" ><rect x="1517" y="956" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1579.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AZ</text></g><g id="CA"><g class="shape" ><rect x="1517" y="1222" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1579.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CA</text></g><g id="NV"><g class="shape" ><rect x="1497" y="1488" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1559.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NV</text></g><g id="NM"><g class="shape" ><rect x="1005" y="1744" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1068.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NM</text></g><g id="UT"><g class="shape" ><rect x="1451" y="2336" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1513.000000" y="2402.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">UT</text></g><g id="AR"><g class="shape" ><rect x="404" y="464" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="467.000000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">AR</text></g><g id="LA"><g class="shape" ><rect x="406" y="730" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="467.500000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">LA</text></g><g id="MO"><g class="shape" ><rect x="1032" y="1222" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1096.000000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MO</text></g><g id="OK"><g class="shape" ><rect x="714" y="2050" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="777.000000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OK</text></g><g id="TX"><g class="shape" ><rect x="422" y="2572" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="483.500000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">TX</text></g><g id="OR"><g class="shape" ><rect x="1515" y="1744" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1578.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OR</text></g><g id="CO"><g class="shape" ><rect x="819" y="730" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="882.000000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CO</text></g><g id="KS"><g class="shape" ><rect x="820" y="956" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="881.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KS</text></g><g id="NE"><g class="shape" ><rect x="986" y="1488" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1047.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NE</text></g><g id="WY"><g class="shape" ><rect x="1408" y="2818" width="128" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1472.000000" y="2884.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WY</text></g><g id="CT"><g class="shape" ><rect x="158" y="1222" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="220.000000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">CT</text></g><g id="MA"><g class="shape" ><rect x="157" y="1488" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="220.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MA</text></g><g id="NY"><g class="shape" ><rect x="179" y="2050" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="241.000000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NY</text></g><g id="RI"><g class="shape" ><rect x="170" y="2572" width="118" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.000000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">RI</text></g><g id="DE"><g class="shape" ><rect x="306" y="1222" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="367.500000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">DE</text></g><g id="MD"><g class="shape" ><rect x="304" y="1488" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="367.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MD</text></g><g id="NJ"><g class="shape" ><rect x="256" y="1744" width="122" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="317.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NJ</text></g><g id="PA"><g class="shape" ><rect x="276" y="2336" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="338.000000" y="2402.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">PA</text></g><g id="NC"><g class="shape" ><rect x="571" y="1744" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="633.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NC</text></g><g id="SC"><g class="shape" ><rect x="571" y="2050" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="632.500000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SC</text></g><g id="ID"><g class="shape" ><rect x="1378" y="956" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1437.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ID</text></g><g id="MT"><g class="shape" ><rect x="1180" y="1222" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1243.000000" y="1288.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MT</text></g><g id="WA"><g class="shape" ><rect x="1524" y="2572" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1588.500000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WA</text></g><g id="IL"><g class="shape" ><rect x="1383" y="12" width="117" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1441.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IL</text></g><g id="IN"><g class="shape" ><rect x="1382" y="238" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1441.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IN</text></g><g id="IA"><g class="shape" ><rect x="1402" y="464" width="119" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1461.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">IA</text></g><g id="MI"><g class="shape" ><rect x="965" y="730" width="121" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1025.500000" y="796.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MI</text></g><g id="KY"><g class="shape" ><rect x="1259" y="464" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1320.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">KY</text></g><g id="WI"><g class="shape" ><rect x="956" y="2050" width="123" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1017.500000" y="2116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WI</text></g><g id="OH"><g class="shape" ><rect x="787" y="1488" width="126" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="850.000000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">OH</text></g><g id="MN"><g class="shape" ><rect x="1220" y="956" width="127" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1283.500000" y="1022.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">MN</text></g><g id="SD"><g class="shape" ><rect x="1202" y="1744" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1264.000000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">SD</text></g><g id="VA"><g class="shape" ><rect x="565" y="2572" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="627.500000" y="2638.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VA</text></g><g id="WV"><g class="shape" ><rect x="532" y="2818" width="129" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="596.500000" y="2884.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">WV</text></g><g id="ME"><g class="shape" ><rect x="12" y="1488" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="74.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ME</text></g><g id="NH"><g class="shape" ><rect x="32" y="1744" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="94.500000" y="1810.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">NH</text></g><g id="VT"><g class="shape" ><rect x="147" y="2818" width="124" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="209.000000" y="2884.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">VT</text></g><g id="ND"><g class="shape" ><rect x="1232" y="1488" width="125" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1294.500000" y="1554.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ND</text></g><g id="(AL -- FL)[0]"><path d="M 611.466667 366.000000 L 611.466667 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(FL -- GA)[0]"><path d="M 591.300000 592.000000 L 591.300000 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(GA -- MS)[0]"><path d="M 591.300000 858.000000 L 591.300000 896.000000 S 591.300000 906.000000 581.300000 906.000000 L 520.300000 906.000000 S 510.300000 906.000000 510.300000 916.000000 L 510.300000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- TN)[0]"><path d="M 466.200000 1084.000000 L 466.200000 2246.000000 S 466.200000 2256.000000 476.200000 2256.000000 L 571.633333 2256.000000 S 581.633333 2256.000000 581.633333 2266.000000 L 581.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(AZ -- CA)[0]"><path d="M 1580.383333 1084.000000 L 1580.383333 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CA -- NV)[0]"><path d="M 1559.550000 1350.000000 L 1559.550000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- NM)[0]"><path d="M 1522.050000 1616.000000 L 1522.050000 1664.000000 S 1522.050000 1674.000000 1512.050000 1674.000000 L 1099.847619 1674.000000 S 1089.847619 1674.000000 1089.847619 1684.000000 L 1089.847619 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NM -- UT)[0]"><path d="M 1100.347619 1872.000000 L 1100.347619 2216.000000 S 1100.347619 2226.000000 1110.347619 2226.000000 L 1490.650000 2226.000000 S 1500.650000 2226.000000 1500.650000 2236.000000 L 1500.650000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(AR -- LA)[0]"><path d="M 467.800000 592.000000 L 467.800000 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(LA -- MS)[0]"><path d="M 447.300000 858.000000 L 447.300000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- MO)[0]"><path d="M 516.600000 1084.000000 L 516.600000 1142.000000 S 516.600000 1152.000000 526.600000 1152.000000 L 1043.466667 1152.000000 S 1053.466667 1152.000000 1053.466667 1162.000000 L 1053.466667 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- OK)[0]"><path d="M 1050.419048 1350.000000 L 1050.419048 1388.000000 S 1050.419048 1398.000000 1040.419048 1398.000000 L 765.633333 1398.000000 S 755.633333 1398.000000 755.633333 1408.000000 L 755.633333 1910.000000 S 755.633333 1920.000000 745.633333 1920.000000 L 745.633333 1920.000000 S 735.633333 1920.000000 735.633333 1930.000000 L 735.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TN)[0]"><path d="M 777.633333 2178.000000 L 777.633333 2246.000000 S 777.633333 2256.000000 767.633333 2256.000000 L 653.633333 2256.000000 S 643.633333 2256.000000 643.633333 2266.000000 L 643.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- TX)[0]"><path d="M 590.933333 2464.000000 L 590.933333 2502.000000 S 590.933333 2512.000000 580.933333 2512.000000 L 531.133333 2512.000000 S 521.133333 2512.000000 521.133333 2522.000000 L 521.133333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CA -- NV)[1]"><path d="M 1601.216667 1350.000000 L 1601.216667 1392.791667 C 1601.216667 1403.208333 1590.800000 1392.791667 1590.800000 1403.208333 L 1590.800000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- OR)[0]"><path d="M 1547.050000 1616.000000 L 1547.050000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CO -- KS)[0]"><path d="M 882.133333 858.000000 L 882.133333 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KS -- NE)[0]"><path d="M 861.633333 1084.000000 L 861.633333 1408.000000 S 861.633333 1418.000000 871.633333 1418.000000 L 1000.947619 1418.000000 S 1010.947619 1418.000000 1010.947619 1428.000000 L 1010.947619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- NM)[0]"><path d="M 1047.847619 1616.000000 L 1047.847619 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NM -- OK)[0]"><path d="M 1037.347619 1872.000000 L 1037.347619 1910.000000 S 1037.347619 1920.000000 1027.347619 1920.000000 L 808.633333 1920.000000 S 798.633333 1920.000000 798.633333 1930.000000 L 798.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- UT)[0]"><path d="M 819.633333 2178.000000 L 819.633333 2276.000000 S 819.633333 2286.000000 829.633333 2286.000000 L 1465.850000 2286.000000 S 1475.850000 2286.000000 1475.850000 2296.000000 L 1475.850000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(UT -- WY)[0]"><path d="M 1482.050000 2464.000000 L 1482.050000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(CT -- MA)[0]"><path d="M 220.500000 1350.000000 L 220.500000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MA -- NY)[0]"><path d="M 241.666667 1616.000000 L 241.666667 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- RI)[0]"><path d="M 204.466667 2178.000000 L 204.466667 2509.650000 C 204.466667 2514.350000 199.766667 2509.650000 199.766667 2514.350000 L 199.766667 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(DE -- MD)[0]"><path d="M 367.500000 1350.000000 L 367.500000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MD -- NJ)[0]"><path d="M 346.333333 1616.000000 L 346.333333 1654.000000 S 346.333333 1664.000000 336.333333 1664.000000 L 327.666667 1664.000000 S 317.666667 1664.000000 317.666667 1674.000000 L 317.666667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NJ -- PA)[0]"><path d="M 338.000000 1872.000000 L 338.000000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(FL -- GA)[1]"><path d="M 631.633333 592.000000 L 631.633333 639.166667 C 631.633333 640.833333 633.300000 639.166667 633.300000 640.833333 L 633.300000 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(GA -- NC)[0]"><path d="M 633.300000 858.000000 L 633.300000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NC -- SC)[0]"><path d="M 612.633333 1872.000000 L 612.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SC -- TN)[0]"><path d="M 612.633333 2178.000000 L 612.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ID -- MT)[0]"><path d="M 1438.383333 1084.000000 L 1438.383333 1162.000000 S 1438.383333 1172.000000 1428.383333 1172.000000 L 1253.133333 1172.000000 S 1243.133333 1172.000000 1243.133333 1182.000000 L 1243.133333 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MT -- NV)[0]"><path d="M 1264.133333 1350.000000 L 1264.133333 1388.000000 S 1264.133333 1398.000000 1274.133333 1398.000000 L 1518.300000 1398.000000 S 1528.300000 1398.000000 1528.300000 1408.000000 L 1528.300000 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- OR)[1]"><path d="M 1572.050000 1616.000000 L 1572.050000 1660.750000 C 1572.050000 1667.250000 1578.550000 1660.750000 1578.550000 1667.250000 L 1578.550000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OR -- UT)[0]"><path d="M 1547.050000 1872.000000 L 1547.050000 1910.000000 S 1547.050000 1920.000000 1537.050000 1920.000000 L 1535.450000 1920.000000 S 1525.450000 1920.000000 1525.450000 1930.000000 L 1525.450000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(UT -- WA)[0]"><path d="M 1544.050000 2464.000000 L 1544.050000 2502.000000 S 1544.050000 2512.000000 1554.050000 2512.000000 L 1557.050000 2512.000000 S 1567.050000 2512.000000 1567.050000 2522.000000 L 1567.050000 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(WA -- WY)[0]"><path d="M 1588.550000 2700.000000 L 1588.550000 2738.000000 S 1588.550000 2748.000000 1578.550000 2748.000000 L 1528.621429 2748.000000 S 1518.621429 2748.000000 1518.621429 2758.000000 L 1518.621429 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IL -- IN)[0]"><path d="M 1442.150000 140.000000 L 1442.150000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IN -- IA)[0]"><path d="M 1461.983333 366.000000 L 1461.983333 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IA -- MI)[0]"><path d="M 1442.150000 592.000000 L 1442.150000 650.000000 S 1442.150000 660.000000 1432.150000 660.000000 L 1065.883333 660.000000 S 1055.883333 660.000000 1055.883333 670.000000 L 1055.883333 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MI -- KY)[0]"><path d="M 1025.633333 728.000000 L 1025.633333 660.000000 S 1025.633333 650.000000 1035.633333 650.000000 L 1298.683333 650.000000 S 1308.683333 650.000000 1308.683333 640.000000 L 1308.683333 592.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KY -- MO)[0]"><path d="M 1333.283333 592.000000 L 1333.283333 660.000000 S 1333.283333 670.000000 1323.283333 670.000000 L 1106.133333 670.000000 S 1096.133333 670.000000 1096.133333 680.000000 L 1096.133333 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- WI)[0]"><path d="M 1141.847619 1350.000000 L 1141.847619 1950.000000 S 1141.847619 1960.000000 1131.847619 1960.000000 L 990.947619 1960.000000 S 980.947619 1960.000000 980.947619 1970.000000 L 980.947619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IN -- KY)[0]"><path d="M 1422.316667 366.000000 L 1422.316667 404.000000 S 1422.316667 414.000000 1412.316667 414.000000 L 1330.983333 414.000000 S 1320.983333 414.000000 1320.983333 424.000000 L 1320.983333 462.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KY -- MI)[0]"><path d="M 1284.083333 592.000000 L 1284.083333 630.000000 S 1284.083333 640.000000 1274.083333 640.000000 L 1005.383333 640.000000 S 995.383333 640.000000 995.383333 650.000000 L 995.383333 728.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MI -- OH)[0]"><path d="M 1005.466667 858.000000 L 1005.466667 896.000000 S 1005.466667 906.000000 995.466667 906.000000 L 819.633333 906.000000 S 809.633333 906.000000 809.633333 916.000000 L 809.633333 1403.250000 C 809.633333 1412.750000 819.133333 1403.250000 819.133333 1412.750000 L 819.133333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(IA -- MN)[0]"><path d="M 1481.816667 592.000000 L 1481.816667 670.000000 S 1481.816667 680.000000 1471.816667 680.000000 L 1315.550000 680.000000 S 1305.550000 680.000000 1305.550000 690.000000 L 1305.550000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MN -- MO)[0]"><path d="M 1284.383333 1084.000000 L 1284.383333 1142.000000 S 1284.383333 1152.000000 1274.383333 1152.000000 L 1127.466667 1152.000000 S 1117.466667 1152.000000 1117.466667 1162.000000 L 1117.466667 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- NE)[0]"><path d="M 1086.990476 1350.000000 L 1086.990476 1408.000000 S 1086.990476 1418.000000 1076.990476 1418.000000 L 1045.547619 1418.000000 S 1035.547619 1418.000000 1035.547619 1428.000000 L 1035.547619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- SD)[0]"><path d="M 1068.347619 1616.000000 L 1068.347619 1674.000000 S 1068.347619 1684.000000 1078.347619 1684.000000 L 1212.716667 1684.000000 S 1222.716667 1684.000000 1222.716667 1694.000000 L 1222.716667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WI)[0]"><path d="M 1264.050000 1872.000000 L 1264.050000 1960.000000 S 1264.050000 1970.000000 1254.050000 1970.000000 L 1015.547619 1970.000000 S 1005.547619 1970.000000 1005.547619 1980.000000 L 1005.547619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KS -- MO)[0]"><path d="M 902.633333 1084.000000 L 902.633333 1122.000000 S 902.633333 1132.000000 912.633333 1132.000000 L 1064.800000 1132.000000 S 1074.800000 1132.000000 1074.800000 1142.000000 L 1074.800000 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- NE)[1]"><path d="M 1105.276190 1350.000000 L 1105.276190 1418.000000 S 1105.276190 1428.000000 1095.276190 1428.000000 L 1070.147619 1428.000000 S 1060.147619 1428.000000 1060.147619 1438.000000 L 1060.147619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- OK)[0]"><path d="M 1006.847619 1616.000000 L 1006.847619 1664.000000 S 1006.847619 1674.000000 996.847619 1674.000000 L 776.633333 1674.000000 S 766.633333 1674.000000 766.633333 1684.000000 L 766.633333 1925.000000 C 766.633333 1935.000000 756.633333 1925.000000 756.633333 1935.000000 L 756.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(KY -- MO)[1]"><path d="M 1357.883333 592.000000 L 1357.883333 1152.000000 S 1357.883333 1162.000000 1347.883333 1162.000000 L 1148.800000 1162.000000 S 1138.800000 1162.000000 1138.800000 1172.000000 L 1138.800000 1220.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- OH)[0]"><path d="M 1068.704762 1350.000000 L 1068.704762 1398.000000 S 1068.704762 1408.000000 1058.704762 1408.000000 L 892.133333 1408.000000 S 882.133333 1408.000000 882.133333 1418.000000 L 882.133333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OH -- TN)[0]"><path d="M 850.633333 1616.000000 L 850.633333 2266.000000 S 850.633333 2276.000000 840.633333 2276.000000 L 684.633333 2276.000000 S 674.633333 2276.000000 674.633333 2286.000000 L 674.633333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- VA)[0]"><path d="M 615.733333 2464.000000 L 615.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(VA -- WV)[0]"><path d="M 596.983333 2700.000000 L 596.983333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(LA -- MS)[1]"><path d="M 488.300000 858.000000 L 488.300000 901.250000 C 488.300000 910.750000 478.800000 901.250000 478.800000 910.750000 L 478.800000 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- TX)[0]"><path d="M 441.000000 1084.000000 L 441.000000 2508.833333 C 441.000000 2515.166667 447.333333 2508.833333 447.333333 2515.166667 L 447.333333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ME -- NH)[0]"><path d="M 74.500000 1616.000000 L 74.500000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MD -- PA)[0]"><path d="M 388.666667 1616.000000 L 388.666667 2216.000000 S 388.666667 2226.000000 378.666667 2226.000000 L 368.666667 2226.000000 S 358.666667 2226.000000 358.666667 2236.000000 L 358.666667 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- VA)[0]"><path d="M 375.200000 2464.000000 L 375.200000 2512.000000 S 375.200000 2522.000000 385.200000 2522.000000 L 580.733333 2522.000000 S 590.733333 2522.000000 590.733333 2532.000000 L 590.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(VA -- WV)[1]"><path d="M 628.233333 2700.000000 L 628.233333 2743.125000 C 628.233333 2752.875000 618.483333 2743.125000 618.483333 2752.875000 L 618.483333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MA -- NH)[0]"><path d="M 199.333333 1616.000000 L 199.333333 1654.000000 S 199.333333 1664.000000 189.333333 1664.000000 L 126.166667 1664.000000 S 116.166667 1664.000000 116.166667 1674.000000 L 116.166667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NH -- NY)[0]"><path d="M 116.166667 1872.000000 L 116.166667 1910.000000 S 116.166667 1920.000000 126.166667 1920.000000 L 200.666667 1920.000000 S 210.666667 1920.000000 210.666667 1930.000000 L 210.666667 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- RI)[1]"><path d="M 229.266667 2178.000000 L 229.266667 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(RI -- VT)[0]"><path d="M 209.600000 2700.000000 L 209.600000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MI -- MN)[0]"><path d="M 1045.800000 858.000000 L 1045.800000 896.000000 S 1045.800000 906.000000 1055.800000 906.000000 L 1253.216667 906.000000 S 1263.216667 906.000000 1263.216667 916.000000 L 1263.216667 954.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MN -- OH)[0]"><path d="M 1252.633333 1084.000000 L 1252.633333 1132.000000 S 1252.633333 1142.000000 1242.633333 1142.000000 L 860.633333 1142.000000 S 850.633333 1142.000000 850.633333 1152.000000 L 850.633333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OH -- WI)[0]"><path d="M 882.133333 1616.000000 L 882.133333 1684.000000 S 882.133333 1694.000000 892.133333 1694.000000 L 1494.550000 1694.000000 S 1504.550000 1694.000000 1504.550000 1704.000000 L 1504.550000 1980.000000 S 1504.550000 1990.000000 1494.550000 1990.000000 L 1064.747619 1990.000000 S 1054.747619 1990.000000 1054.747619 2000.000000 L 1054.747619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MN -- ND)[0]"><path d="M 1316.133333 1084.000000 L 1316.133333 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ND -- SD)[0]"><path d="M 1264.050000 1616.000000 L 1264.050000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WI)[1]"><path d="M 1284.716667 1872.000000 L 1284.716667 1970.000000 S 1284.716667 1980.000000 1274.716667 1980.000000 L 1040.147619 1980.000000 S 1030.147619 1980.000000 1030.147619 1990.000000 L 1030.147619 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MS -- TN)[1]"><path d="M 491.400000 1084.000000 L 491.400000 2216.000000 S 491.400000 2226.000000 501.400000 2226.000000 L 587.133333 2226.000000 S 597.133333 2226.000000 597.133333 2236.000000 L 597.133333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MO -- NE)[2]"><path d="M 1123.561905 1350.000000 L 1123.561905 1428.000000 S 1123.561905 1438.000000 1113.561905 1438.000000 L 1094.747619 1438.000000 S 1084.747619 1438.000000 1084.747619 1448.000000 L 1084.747619 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- OK)[1]"><path d="M 1027.347619 1616.000000 L 1027.347619 1674.000000 S 1027.347619 1684.000000 1017.347619 1684.000000 L 787.633333 1684.000000 S 777.633333 1684.000000 777.633333 1694.000000 L 777.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TN)[1]"><path d="M 798.633333 2178.000000 L 798.633333 2256.000000 S 798.633333 2266.000000 788.633333 2266.000000 L 669.133333 2266.000000 S 659.133333 2266.000000 659.133333 2276.000000 L 659.133333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(MT -- ND)[0]"><path d="M 1222.133333 1350.000000 L 1222.133333 1398.000000 S 1222.133333 1408.000000 1232.133333 1408.000000 L 1264.466667 1408.000000 S 1274.466667 1408.000000 1274.466667 1418.000000 L 1274.466667 1486.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ND -- SD)[1]"><path d="M 1295.300000 1616.000000 L 1295.300000 1678.708333 C 1295.300000 1689.291667 1284.716667 1678.708333 1284.716667 1689.291667 L 1284.716667 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WY)[0]"><path d="M 1222.716667 1872.000000 L 1222.716667 1930.000000 S 1222.716667 1940.000000 1212.716667 1940.000000 L 944.347619 1940.000000 S 934.347619 1940.000000 934.347619 1950.000000 L 934.347619 2758.000000 S 934.347619 2768.000000 944.347619 2768.000000 L 1417.192857 2768.000000 S 1427.192857 2768.000000 1427.192857 2778.000000 L 1427.192857 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NE -- SD)[1]"><path d="M 1088.847619 1616.000000 L 1088.847619 1654.000000 S 1088.847619 1664.000000 1098.847619 1664.000000 L 1233.383333 1664.000000 S 1243.383333 1664.000000 1243.383333 1674.000000 L 1243.383333 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WY)[1]"><path d="M 1243.383333 1872.000000 L 1243.383333 1940.000000 S 1243.383333 1950.000000 1233.383333 1950.000000 L 955.347619 1950.000000 S 945.347619 1950.000000 945.347619 1960.000000 L 945.347619 2748.000000 S 945.347619 2758.000000 955.347619 2758.000000 L 1435.478571 2758.000000 S 1445.478571 2758.000000 1445.478571 2768.000000 L 1445.478571 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NV -- OR)[2]"><path d="M 1597.050000 1616.000000 L 1597.050000 1657.500000 C 1597.050000 1670.500000 1610.050000 1657.500000 1610.050000 1670.500000 L 1610.050000 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OR -- UT)[1]"><path d="M 1578.550000 1872.000000 L 1578.550000 2216.000000 S 1578.550000 2226.000000 1568.550000 2226.000000 L 1560.250000 2226.000000 S 1550.250000 2226.000000 1550.250000 2236.000000 L 1550.250000 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NH -- VT)[0]"><path d="M 74.500000 1872.000000 L 74.500000 2738.000000 S 74.500000 2748.000000 84.500000 2748.000000 L 168.600000 2748.000000 S 178.600000 2748.000000 178.600000 2758.000000 L 178.600000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NJ -- NY)[0]"><path d="M 297.333333 1872.000000 L 297.333333 1910.000000 S 297.333333 1920.000000 287.333333 1920.000000 L 282.666667 1920.000000 S 272.666667 1920.000000 272.666667 1930.000000 L 272.666667 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- PA)[0]"><path d="M 254.066667 2178.000000 L 254.066667 2226.000000 S 254.066667 2236.000000 264.066667 2236.000000 L 286.666667 2236.000000 S 296.666667 2236.000000 296.666667 2246.000000 L 296.666667 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NM -- OK)[1]"><path d="M 1068.847619 1872.000000 L 1068.847619 1920.000000 S 1068.847619 1930.000000 1058.847619 1930.000000 L 829.633333 1930.000000 S 819.633333 1930.000000 819.633333 1940.000000 L 819.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TX)[0]"><path d="M 735.633333 2178.000000 L 735.633333 2226.000000 S 735.633333 2236.000000 725.633333 2236.000000 L 495.533333 2236.000000 S 485.533333 2236.000000 485.533333 2246.000000 L 485.533333 2505.200000 C 485.533333 2518.800000 471.933333 2505.200000 471.933333 2518.800000 L 471.933333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NY -- PA)[1]"><path d="M 278.866667 2178.000000 L 278.866667 2216.000000 S 278.866667 2226.000000 288.866667 2226.000000 L 307.333333 2226.000000 S 317.333333 2226.000000 317.333333 2236.000000 L 317.333333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- RI)[0]"><path d="M 300.800000 2464.000000 L 300.800000 2502.000000 S 300.800000 2512.000000 290.800000 2512.000000 L 268.766667 2512.000000 S 258.766667 2512.000000 258.766667 2522.000000 L 258.766667 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(RI -- VT)[1]"><path d="M 248.933333 2700.000000 L 248.933333 2743.833333 C 248.933333 2752.166667 240.600000 2743.833333 240.600000 2752.166667 L 240.600000 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(NC -- SC)[1]"><path d="M 653.966667 1872.000000 L 653.966667 1919.833333 C 653.966667 1920.166667 653.633333 1919.833333 653.633333 1920.166667 L 653.633333 2048.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SC -- TN)[1]"><path d="M 653.633333 2178.000000 L 653.633333 2216.000000 S 653.633333 2226.000000 643.633333 2226.000000 L 638.133333 2226.000000 S 628.133333 2226.000000 628.133333 2236.000000 L 628.133333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- VA)[1]"><path d="M 640.533333 2464.000000 L 640.533333 2511.900000 C 640.533333 2512.100000 640.733333 2511.900000 640.733333 2512.100000 L 640.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(ND -- SD)[2]"><path d="M 1326.550000 1616.000000 L 1326.550000 1674.000000 S 1326.550000 1684.000000 1316.550000 1684.000000 L 1315.383333 1684.000000 S 1305.383333 1684.000000 1305.383333 1694.000000 L 1305.383333 1742.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OH -- PA)[0]"><path d="M 819.133333 1616.000000 L 819.133333 1654.000000 S 819.133333 1664.000000 809.133333 1664.000000 L 440.000000 1664.000000 S 430.000000 1664.000000 430.000000 1674.000000 L 430.000000 2226.000000 S 430.000000 2236.000000 420.000000 2236.000000 L 389.333333 2236.000000 S 379.333333 2236.000000 379.333333 2246.000000 L 379.333333 2334.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- WV)[0]"><path d="M 325.600000 2464.000000 L 325.600000 2748.000000 S 325.600000 2758.000000 335.600000 2758.000000 L 543.983333 2758.000000 S 553.983333 2758.000000 553.983333 2768.000000 L 553.983333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OK -- TX)[1]"><path d="M 756.633333 2178.000000 L 756.633333 2236.000000 S 756.633333 2246.000000 746.633333 2246.000000 L 506.533333 2246.000000 S 496.533333 2246.000000 496.533333 2256.000000 L 496.533333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(OR -- WA)[0]"><path d="M 1610.050000 1872.000000 L 1610.050000 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(PA -- WV)[1]"><path d="M 350.400000 2464.000000 L 350.400000 2738.000000 S 350.400000 2748.000000 360.400000 2748.000000 L 565.483333 2748.000000 S 575.483333 2748.000000 575.483333 2758.000000 L 575.483333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(SD -- WY)[2]"><path d="M 1305.383333 1872.000000 L 1305.383333 1990.000000 S 1305.383333 2000.000000 1295.383333 2000.000000 L 1099.347619 2000.000000 S 1089.347619 2000.000000 1089.347619 2010.000000 L 1089.347619 2738.000000 S 1089.347619 2748.000000 1099.347619 2748.000000 L 1453.764286 2748.000000 S 1463.764286 2748.000000 1463.764286 2758.000000 L 1463.764286 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(TN -- VA)[2]"><path d="M 665.333333 2464.000000 L 665.333333 2511.800000 C 665.333333 2512.200000 665.733333 2511.800000 665.733333 2512.200000 L 665.733333 2570.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(UT -- WY)[1]"><path d="M 1513.050000 2464.000000 L 1513.050000 2741.642857 C 1513.050000 2754.357143 1500.335714 2741.642857 1500.335714 2754.357143 L 1500.335714 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><g id="(VA -- WV)[2]"><path d="M 659.483333 2700.000000 L 659.483333 2738.250000 C 659.483333 2757.750000 639.983333 2738.250000 639.983333 2757.750000 L 639.983333 2816.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#1504586199)"/></g><mask id="1504586199" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1845" height="3136">
 <rect x="-100" y="-100" width="1845" height="3136" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg b/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg
index a0e0011a7..c537bdb0a 100644
--- a/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="459" height="656" viewBox="-102 -102 459 656"><style type="text/css">
@@ -18,7 +19,27 @@ width="459" height="656" viewBox="-102 -102 459 656"><style type="text/css">
 }
 
 ]]>
-</style><g id="container"><g class="shape" ><rect x="0" y="0" width="255" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="127.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="60" y="50" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="50" y="276" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">second</text></g><g id="container.(first -&gt; second)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 102.386303 177.865091 C 87.621681 216.000000 87.550000 236.000000 101.329129 272.260866" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2577544665)"/><text class="text-italic" x="87.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1-&gt;2</text></g><g id="(container -&gt; container.second)[0]"><path d="M 152.613697 177.865091 C 167.378319 216.000000 167.450000 236.000000 153.670871 272.260866" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2577544665)"/><text class="text-italic" x="167.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="2577544665" maskUnits="userSpaceOnUse" x="-100" y="-100" width="459" height="656">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="container"><g class="shape" ><rect x="0" y="0" width="255" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="127.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="60" y="50" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="50" y="276" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="127.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">second</text></g><g id="container.(first -&gt; second)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 102.386303 177.865091 C 87.621681 216.000000 87.550000 236.000000 101.329129 272.260866" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2577544665)"/><text class="text-italic" x="87.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1-&gt;2</text></g><g id="(container -&gt; container.second)[0]"><path d="M 152.613697 177.865091 C 167.378319 216.000000 167.450000 236.000000 153.670871 272.260866" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2577544665)"/><text class="text-italic" x="167.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="2577544665" maskUnits="userSpaceOnUse" x="-100" y="-100" width="459" height="656">
 <rect x="-100" y="-100" width="459" height="656" fill="white"></rect>
 <rect x="73.000000" y="215.000000" width="29" height="21" fill="black"></rect>
 <rect x="153.000000" y="215.000000" width="28" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg b/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg
index a54df8de0..99c99cfee 100644
--- a/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="538" height="667" viewBox="-90 -90 538 667"><style type="text/css">
@@ -18,7 +19,27 @@ width="538" height="667" viewBox="-90 -90 538 667"><style type="text/css">
 }
 
 ]]>
-</style><g id="container"><g class="shape" ><rect x="12" y="12" width="334" height="463" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="179.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="136" y="87" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="203.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="100" y="274" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="177.500000" y="340.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">second</text></g><g id="container.(first -&gt; second)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 203.500000 215.000000 L 203.500000 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2171115784)"/><text class="text-italic" x="203.500000" y="249.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1-&gt;2</text></g><g id="(container -&gt; container.second)[0]"><path d="M 101.000000 14.000000 L 101.000000 254.000000 S 101.000000 264.000000 111.000000 264.000000 L 146.833333 264.000000 S 151.833333 264.000000 151.833333 269.000000 L 151.833333 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2171115784)"/><text class="text-italic" x="101.000000" y="174.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="2171115784" maskUnits="userSpaceOnUse" x="-100" y="-100" width="538" height="667">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="container"><g class="shape" ><rect x="12" y="12" width="334" height="463" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="179.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">container</text></g><g id="container.first"><g class="shape" ><rect x="136" y="87" width="135" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="203.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">first</text></g><g id="container.second"><g class="shape" ><rect x="100" y="274" width="155" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="177.500000" y="340.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">second</text></g><g id="container.(first -&gt; second)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 203.500000 215.000000 L 203.500000 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2171115784)"/><text class="text-italic" x="203.500000" y="249.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">1-&gt;2</text></g><g id="(container -&gt; container.second)[0]"><path d="M 101.000000 14.000000 L 101.000000 254.000000 S 101.000000 264.000000 111.000000 264.000000 L 146.833333 264.000000 S 151.833333 264.000000 151.833333 269.000000 L 151.833333 270.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2171115784)"/><text class="text-italic" x="101.000000" y="174.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">c-&gt;2</text></g><mask id="2171115784" maskUnits="userSpaceOnUse" x="-100" y="-100" width="538" height="667">
 <rect x="-100" y="-100" width="538" height="667" fill="white"></rect>
 <rect x="189.000000" y="233.000000" width="29" height="21" fill="black"></rect>
 <rect x="87.000000" y="158.000000" width="28" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
index 85cf539ba..6ce5dd1f4 100644
--- a/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="668" height="720" viewBox="-102 -102 668 720"><style type="text/css">
@@ -18,7 +19,27 @@ width="668" height="720" viewBox="-102 -102 668 720"><style type="text/css">
 }
 
 ]]>
-</style><g id="ninety nine"><g class="shape" ><rect x="0" y="0" width="464" height="516" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="104.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="40" y="50" width="384" height="416" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="119.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="80" y="100" width="304" height="316" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="137.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="120" y="150" width="224" height="216" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="171.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="170" y="200" width="124" height="116" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="232.000000" y="258.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="403557020" maskUnits="userSpaceOnUse" x="-100" y="-100" width="668" height="720">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="464" height="516" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="104.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="40" y="50" width="384" height="416" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="119.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="80" y="100" width="304" height="316" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="137.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="120" y="150" width="224" height="216" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="232.000000" y="171.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="170" y="200" width="124" height="116" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="232.000000" y="258.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="403557020" maskUnits="userSpaceOnUse" x="-100" y="-100" width="668" height="720">
 <rect x="-100" y="-100" width="668" height="720" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
index 506bb7f9b..c971c575f 100644
--- a/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="928" height="920" viewBox="-90 -90 928 920"><style type="text/css">
@@ -18,7 +19,27 @@ width="928" height="920" viewBox="-90 -90 928 920"><style type="text/css">
 }
 
 ]]>
-</style><g id="ninety nine"><g class="shape" ><rect x="12" y="12" width="724" height="716" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="116.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="87" y="87" width="574" height="566" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="156.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="162" y="162" width="424" height="416" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="199.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="237" y="237" width="274" height="266" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="258.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="312" y="312" width="124" height="116" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="374.000000" y="370.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="812844889" maskUnits="userSpaceOnUse" x="-100" y="-100" width="928" height="920">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="724" height="716" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="116.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="ninety nine.sixty four"><g class="shape" ><rect x="87" y="87" width="574" height="566" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="156.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine.sixty four.thirty two"><g class="shape" ><rect x="162" y="162" width="424" height="416" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="199.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="ninety nine.sixty four.thirty two.sixteen"><g class="shape" ><rect x="237" y="237" width="274" height="266" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="374.000000" y="258.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="ninety nine.sixty four.thirty two.sixteen.eight"><g class="shape" ><rect x="312" y="312" width="124" height="116" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="374.000000" y="370.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><mask id="812844889" maskUnits="userSpaceOnUse" x="-100" y="-100" width="928" height="920">
 <rect x="-100" y="-100" width="928" height="920" fill="white"></rect>
 
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
index 77752a91a..366007a56 100644
--- a/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="793" height="1576" viewBox="-102 -102 793 1576"><style type="text/css">
@@ -18,7 +19,27 @@ width="793" height="1576" viewBox="-102 -102 793 1576"><style type="text/css">
 }
 
 ]]>
-</style><g id="eight"><g class="shape" ><rect x="233" y="0" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="58.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="216" y="258" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="324.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="171" y="526" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="608.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="108" y="814" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="928.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="0" y="1142" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="1291.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="(eight -&gt; sixteen)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 294.500000 118.000000 C 294.500000 172.800000 294.500000 201.200000 294.500000 254.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="294.500000" y="191.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 294.500000 386.000000 C 294.500000 440.800000 294.500000 469.200000 294.500000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="295.000000" y="464.000000" style="text-anchor:middle;font-size:24px;fill:#676C7E">twenty four</text></g><g id="(thirty two -&gt; sixty four)[0]"><path d="M 294.500000 674.000000 C 294.500000 728.800000 294.500000 757.200000 294.500000 810.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="295.000000" y="761.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">forty eight</text></g><g id="(sixty four -&gt; ninety nine)[0]"><path d="M 294.500000 1002.000000 C 294.500000 1056.800000 294.500000 1085.200000 294.500000 1138.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="294.500000" y="1101.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="1163247064" maskUnits="userSpaceOnUse" x="-100" y="-100" width="793" height="1576">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="eight"><g class="shape" ><rect x="233" y="0" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="58.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="216" y="258" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="324.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="171" y="526" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="608.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="108" y="814" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="928.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="0" y="1142" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.500000" y="1291.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="(eight -&gt; sixteen)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 294.500000 118.000000 C 294.500000 172.800000 294.500000 201.200000 294.500000 254.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="294.500000" y="191.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 294.500000 386.000000 C 294.500000 440.800000 294.500000 469.200000 294.500000 522.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="295.000000" y="464.000000" style="text-anchor:middle;font-size:24px;fill:#676C7E">twenty four</text></g><g id="(thirty two -&gt; sixty four)[0]"><path d="M 294.500000 674.000000 C 294.500000 728.800000 294.500000 757.200000 294.500000 810.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="295.000000" y="761.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">forty eight</text></g><g id="(sixty four -&gt; ninety nine)[0]"><path d="M 294.500000 1002.000000 C 294.500000 1056.800000 294.500000 1085.200000 294.500000 1138.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1163247064)"/><text class="text-italic" x="294.500000" y="1101.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="1163247064" maskUnits="userSpaceOnUse" x="-100" y="-100" width="793" height="1576">
 <rect x="-100" y="-100" width="793" height="1576" fill="white"></rect>
 <rect x="278.000000" y="179.000000" width="33" height="16" fill="black"></rect>
 <rect x="238.000000" y="440.000000" width="114" height="31" fill="black"></rect>
diff --git a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
index c6f123554..8689c9d30 100644
--- a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="793" height="2018" viewBox="-90 -90 793 2018"><style type="text/css">
@@ -18,7 +19,27 @@ width="793" height="2018" viewBox="-90 -90 793 2018"><style type="text/css">
 }
 
 ]]>
-</style><g id="eight"><g class="shape" ><rect x="244" y="12" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.000000" y="70.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="228" y="344" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="410.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="183" y="701" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="783.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="119" y="1108" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.000000" y="1222.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="12" y="1596" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="1745.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="(eight -&gt; sixteen)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 306.500000 130.000000 L 306.500000 340.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="306.500000" y="240.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 306.500000 472.000000 L 306.500000 697.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="307.000000" y="594.000000" style="text-anchor:middle;font-size:24px;fill:#676C7E">twenty four</text></g><g id="(thirty two -&gt; sixty four)[0]"><path d="M 306.500000 849.000000 L 306.500000 1104.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="307.000000" y="995.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">forty eight</text></g><g id="(sixty four -&gt; ninety nine)[0]"><path d="M 306.500000 1296.000000 L 306.500000 1592.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="306.500000" y="1475.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="626254594" maskUnits="userSpaceOnUse" x="-100" y="-100" width="793" height="2018">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="eight"><g class="shape" ><rect x="244" y="12" width="124" height="116" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.000000" y="70.000000" style="text-anchor:middle;font-size:8px;fill:#0A0F25">eight</text></g><g id="sixteen"><g class="shape" ><rect x="228" y="344" width="157" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="410.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">sixteen</text></g><g id="thirty two"><g class="shape" ><rect x="183" y="701" width="247" height="146" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="783.000000" style="text-anchor:middle;font-size:32px;fill:#0A0F25">thirty two</text></g><g id="sixty four"><g class="shape" ><rect x="119" y="1108" width="374" height="186" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.000000" y="1222.000000" style="text-anchor:middle;font-size:64px;fill:#0A0F25">sixty four</text></g><g id="ninety nine"><g class="shape" ><rect x="12" y="1596" width="589" height="230" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="306.500000" y="1745.000000" style="text-anchor:middle;font-size:99px;fill:#0A0F25">ninety nine</text></g><g id="(eight -&gt; sixteen)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 306.500000 130.000000 L 306.500000 340.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="306.500000" y="240.000000" style="text-anchor:middle;font-size:12px;fill:#676C7E">twelve</text></g><g id="(sixteen -&gt; thirty two)[0]"><path d="M 306.500000 472.000000 L 306.500000 697.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="307.000000" y="594.000000" style="text-anchor:middle;font-size:24px;fill:#676C7E">twenty four</text></g><g id="(thirty two -&gt; sixty four)[0]"><path d="M 306.500000 849.000000 L 306.500000 1104.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="307.000000" y="995.000000" style="text-anchor:middle;font-size:48px;fill:#676C7E">forty eight</text></g><g id="(sixty four -&gt; ninety nine)[0]"><path d="M 306.500000 1296.000000 L 306.500000 1592.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#626254594)"/><text class="text-italic" x="306.500000" y="1475.000000" style="text-anchor:middle;font-size:81px;fill:#676C7E">eighty one</text></g><mask id="626254594" maskUnits="userSpaceOnUse" x="-100" y="-100" width="793" height="2018">
 <rect x="-100" y="-100" width="793" height="2018" fill="white"></rect>
 <rect x="290.000000" y="228.000000" width="33" height="16" fill="black"></rect>
 <rect x="250.000000" y="570.000000" width="114" height="31" fill="black"></rect>
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 532a8245a..cacabd774 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="923" height="1244" viewBox="-147 -28 923 1244"><style type="text/css">
@@ -18,7 +19,27 @@ width="923" height="1244" viewBox="-147 -28 923 1244"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(a -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-47" y="420" width="542" height="696" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="38.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="-23" y="550" width="494" height="542" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="101.000000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="1" y="680" width="446" height="388" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="92.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="25" y="810" width="398" height="234" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="40.500000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="49" y="940" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="64.500000" y="961.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 595.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[0]"><path d="M 347.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[1]"><path d="M 347.000000 590.000000 L 103.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[2]"><path d="M 347.000000 720.000000 L 103.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[3]"><path d="M 347.000000 850.000000 L 103.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[4]"><path d="M 347.000000 980.000000 L 103.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><mask id="967447530" maskUnits="userSpaceOnUse" x="-100" y="-100" width="923" height="1244">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(a -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-47" y="420" width="542" height="696" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="38.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="-23" y="550" width="494" height="542" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="101.000000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="1" y="680" width="446" height="388" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="92.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="25" y="810" width="398" height="234" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="40.500000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="49" y="940" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="64.500000" y="961.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 595.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[0]"><path d="M 347.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[1]"><path d="M 347.000000 590.000000 L 103.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[2]"><path d="M 347.000000 720.000000 L 103.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[3]"><path d="M 347.000000 850.000000 L 103.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[4]"><path d="M 347.000000 980.000000 L 103.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><mask id="967447530" maskUnits="userSpaceOnUse" x="-100" y="-100" width="923" height="1244">
 <rect x="-100" y="-100" width="923" height="1244" fill="white"></rect>
 <rect x="-42.000000" y="425.000000" width="160" height="21" fill="black"></rect>
 <rect x="-18.000000" y="555.000000" width="238" height="21" fill="black"></rect>
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 532a8245a..cacabd774 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="923" height="1244" viewBox="-147 -28 923 1244"><style type="text/css">
@@ -18,7 +19,27 @@ width="923" height="1244" viewBox="-147 -28 923 1244"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(a -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-47" y="420" width="542" height="696" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="38.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="-23" y="550" width="494" height="542" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="101.000000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="1" y="680" width="446" height="388" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="92.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="25" y="810" width="398" height="234" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="40.500000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="49" y="940" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="64.500000" y="961.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 595.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[0]"><path d="M 347.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[1]"><path d="M 347.000000 590.000000 L 103.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[2]"><path d="M 347.000000 720.000000 L 103.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[3]"><path d="M 347.000000 850.000000 L 103.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[4]"><path d="M 347.000000 980.000000 L 103.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><mask id="967447530" maskUnits="userSpaceOnUse" x="-100" y="-100" width="923" height="1244">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="524" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="599.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(a -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="(c -- )[0]"><path d="M 599.000000 202.000000 L 599.000000 1109.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#967447530)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-47" y="420" width="542" height="696" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="38.000000" y="441.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="-23" y="550" width="494" height="542" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="101.000000" y="571.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="1" y="680" width="446" height="388" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="92.500000" y="701.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.yo"><g class="shape blend" ><rect x="25" y="810" width="398" height="234" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="40.500000" y="831.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">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="49" y="940" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="64.500000" y="961.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">yo</text></g><g id="(b -&gt; c)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 101.000000 330.000000 L 595.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[0]"><path d="M 347.000000 460.000000 L 103.000000 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[1]"><path d="M 347.000000 590.000000 L 103.000000 590.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[2]"><path d="M 347.000000 720.000000 L 103.000000 720.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[3]"><path d="M 347.000000 850.000000 L 103.000000 850.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><g id="(a -&gt; b)[4]"><path d="M 347.000000 980.000000 L 103.000000 980.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#967447530)"/></g><mask id="967447530" maskUnits="userSpaceOnUse" x="-100" y="-100" width="923" height="1244">
 <rect x="-100" y="-100" width="923" height="1244" fill="white"></rect>
 <rect x="-42.000000" y="425.000000" width="160" height="21" fill="black"></rect>
 <rect x="-18.000000" y="555.000000" width="238" height="21" fill="black"></rect>
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 b6fa3ca79..369de844c 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2482" height="2672" viewBox="-102 -102 2482 2672"><style type="text/css">
@@ -18,7 +19,27 @@ width="2482" height="2672" viewBox="-102 -102 2482 2672"><style type="text/css">
 }
 
 ]]>
-</style><g id="containers"><g class="shape" ><rect x="0" y="0" width="1112" height="456" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="556.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">containers</text></g><g id="cloud"><g class="shape" ><path d="M 1246.6169 189.4938 C 1246.6169 192.2134 1243.206 194.9325 1239.7958 194.9325 C 1196.3108 198.3315 1162.2045 233.0036 1162.2045 275.1535 C 1162.2045 320.023 1200.5738 356.0544 1249.1751 356.0544 H 1579.1511 C 1631.1633 356.0544 1673.7956 317.3034 1673.7956 270.3947 C 1673.7956 225.5252 1634.573 188.134 1585.1201 185.4149 C 1581.7092 185.4149 1578.299 183.3752 1577.4462 179.9762 C 1566.3615 134.4273 1515.202 100.4351 1455.5171 100.4351 C 1416.2951 100.4351 1381.336 114.7119 1359.1678 137.1464 C 1356.6096 139.866 1352.3467 140.5459 1349.7885 139.866 C 1341.2619 137.1464 1331.8832 135.7871 1321.6512 135.7871 C 1282.4287 135.1068 1250.0278 158.901 1246.6169 189.4938 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1418.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="tall cylinder"><g class="shape" ><path d="M 1290 1480 C 1290 1456 1405.2 1456 1418 1456 C 1430.8 1456 1546 1456 1546 1480 V 1944 C 1546 1968 1430.8 1968 1418 1968 C 1405.2 1968 1290 1968 1290 1944 V 1480 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1290 1480 C 1290 1504 1405.2 1504 1418 1504 C 1430.8 1504 1546 1504 1546 1480" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1418.000000" y="1727.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tall cylinder</text></g><g id="users"><g class="shape" ><rect class="shape" x="1018" y="2068" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="1018.000000" y="2068.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1038.000000" y="2110.333333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1028.000000" y="2173.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="containers"><g class="shape" ><rect x="0" y="0" width="1112" height="456" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="556.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">containers</text></g><g id="cloud"><g class="shape" ><path d="M 1246.6169 189.4938 C 1246.6169 192.2134 1243.206 194.9325 1239.7958 194.9325 C 1196.3108 198.3315 1162.2045 233.0036 1162.2045 275.1535 C 1162.2045 320.023 1200.5738 356.0544 1249.1751 356.0544 H 1579.1511 C 1631.1633 356.0544 1673.7956 317.3034 1673.7956 270.3947 C 1673.7956 225.5252 1634.573 188.134 1585.1201 185.4149 C 1581.7092 185.4149 1578.299 183.3752 1577.4462 179.9762 C 1566.3615 134.4273 1515.202 100.4351 1455.5171 100.4351 C 1416.2951 100.4351 1381.336 114.7119 1359.1678 137.1464 C 1356.6096 139.866 1352.3467 140.5459 1349.7885 139.866 C 1341.2619 137.1464 1331.8832 135.7871 1321.6512 135.7871 C 1282.4287 135.1068 1250.0278 158.901 1246.6169 189.4938 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1418.000000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="tall cylinder"><g class="shape" ><path d="M 1290 1480 C 1290 1456 1405.2 1456 1418 1456 C 1430.8 1456 1546 1456 1546 1480 V 1944 C 1546 1968 1430.8 1968 1418 1968 C 1405.2 1968 1290 1968 1290 1944 V 1480 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1290 1480 C 1290 1504 1405.2 1504 1418 1504 C 1430.8 1504 1546 1504 1546 1480" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1418.000000" y="1727.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tall cylinder</text></g><g id="users"><g class="shape" ><rect class="shape" x="1018" y="2068" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="1018.000000" y="2068.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1038.000000" y="2110.333333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1028.000000" y="2173.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="1129.000000" y="2173.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="1798.000000" y="2173.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="1018.000000" y1="2201.333333" x2="1818.000000" y2="2201.333333" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="1028.000000" y="2239.666667" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="1129.000000" y="2239.666667" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
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 fc41ad85f..62fd714a4 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,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="2622" height="2644" viewBox="-90 -90 2622 2644"><style type="text/css">
@@ -18,7 +19,27 @@ width="2622" height="2644" viewBox="-90 -90 2622 2644"><style type="text/css">
 }
 
 ]]>
-</style><g id="containers"><g class="shape" ><rect x="12" y="12" width="1322" height="428" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="673.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">containers</text></g><g id="cloud"><g class="shape" ><path d="M 1438.6169 273.4938 C 1438.6169 276.2134 1435.206 278.9325 1431.7958 278.9325 C 1388.3108 282.3315 1354.2045 317.0036 1354.2045 359.1535 C 1354.2045 404.023 1392.5738 440.0544 1441.1751 440.0544 H 1771.1511 C 1823.1633 440.0544 1865.7956 401.3034 1865.7956 354.3947 C 1865.7956 309.5252 1826.573 272.134 1777.1201 269.4149 C 1773.7092 269.4149 1770.299 267.3752 1769.4462 263.9762 C 1758.3615 218.4273 1707.202 184.4351 1647.5171 184.4351 C 1608.2951 184.4351 1573.336 198.7119 1551.1678 221.1464 C 1548.6096 223.866 1544.3467 224.5459 1541.7885 223.866 C 1533.2619 221.1464 1523.8832 219.7871 1513.6512 219.7871 C 1474.4287 219.1068 1442.0278 242.901 1438.6169 273.4938 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1610.000000" y="315.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="tall cylinder"><g class="shape" ><path d="M 1482 1464 C 1482 1440 1597.2 1440 1610 1440 C 1622.8 1440 1738 1440 1738 1464 V 1928 C 1738 1952 1622.8 1952 1610 1952 C 1597.2 1952 1482 1952 1482 1928 V 1464 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1482 1464 C 1482 1488 1597.2 1488 1610 1488 C 1622.8 1488 1738 1488 1738 1464" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1610.000000" y="1711.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tall cylinder</text></g><g id="users"><g class="shape" ><rect class="shape" x="1210" y="2052" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="1210.000000" y="2052.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1230.000000" y="2094.333333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1220.000000" y="2157.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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="containers"><g class="shape" ><rect x="12" y="12" width="1322" height="428" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="673.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">containers</text></g><g id="cloud"><g class="shape" ><path d="M 1438.6169 273.4938 C 1438.6169 276.2134 1435.206 278.9325 1431.7958 278.9325 C 1388.3108 282.3315 1354.2045 317.0036 1354.2045 359.1535 C 1354.2045 404.023 1392.5738 440.0544 1441.1751 440.0544 H 1771.1511 C 1823.1633 440.0544 1865.7956 401.3034 1865.7956 354.3947 C 1865.7956 309.5252 1826.573 272.134 1777.1201 269.4149 C 1773.7092 269.4149 1770.299 267.3752 1769.4462 263.9762 C 1758.3615 218.4273 1707.202 184.4351 1647.5171 184.4351 C 1608.2951 184.4351 1573.336 198.7119 1551.1678 221.1464 C 1548.6096 223.866 1544.3467 224.5459 1541.7885 223.866 C 1533.2619 221.1464 1523.8832 219.7871 1513.6512 219.7871 C 1474.4287 219.1068 1442.0278 242.901 1438.6169 273.4938 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1610.000000" y="315.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">cloud</text></g><g id="tall cylinder"><g class="shape" ><path d="M 1482 1464 C 1482 1440 1597.2 1440 1610 1440 C 1622.8 1440 1738 1440 1738 1464 V 1928 C 1738 1952 1622.8 1952 1610 1952 C 1597.2 1952 1482 1952 1482 1928 V 1464 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 1482 1464 C 1482 1488 1597.2 1488 1610 1488 C 1622.8 1488 1738 1488 1738 1464" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="1610.000000" y="1711.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">tall cylinder</text></g><g id="users"><g class="shape" ><rect class="shape" x="1210" y="2052" width="800" height="400" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="1210.000000" y="2052.000000" width="800.000000" height="66.666667" fill="#0A0F25" /><text class="text" x="1230.000000" y="2094.333333" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="1220.000000" y="2157.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
 <text class="text" x="1321.000000" y="2157.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
 <text class="text" x="1990.000000" y="2157.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="1210.000000" y1="2185.333333" x2="2010.000000" y2="2185.333333" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="1220.000000" y="2223.666667" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
 <text class="text" x="1321.000000" y="2223.666667" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
index 49de13784..57ab5a3b7 100644
--- a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="629" viewBox="-102 -102 317 629"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="629" viewBox="-102 -102 317 629"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="299" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="365.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 195.200000 56.500000 229.900000 56.500000 295.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3435886913)"/><text class="text-italic" x="57.000000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="57.000000" dy="0.000000">There</tspan><tspan x="57.000000" dy="16.625000">once</tspan><tspan x="57.000000" dy="16.625000">was</tspan><tspan x="57.000000" dy="16.625000">a</tspan><tspan x="57.000000" dy="16.625000">very</tspan><tspan x="57.000000" dy="16.625000">tall</tspan><tspan x="57.000000" dy="16.625000">edge</tspan><tspan x="57.000000" dy="16.625000">label</tspan></text></g><mask id="3435886913" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="629">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="299" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="365.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 195.200000 56.500000 229.900000 56.500000 295.500000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3435886913)"/><text class="text-italic" x="57.000000" y="162.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="57.000000" dy="0.000000">There</tspan><tspan x="57.000000" dy="16.625000">once</tspan><tspan x="57.000000" dy="16.625000">was</tspan><tspan x="57.000000" dy="16.625000">a</tspan><tspan x="57.000000" dy="16.625000">very</tspan><tspan x="57.000000" dy="16.625000">tall</tspan><tspan x="57.000000" dy="16.625000">edge</tspan><tspan x="57.000000" dy="16.625000">label</tspan></text></g><mask id="3435886913" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="629">
 <rect x="-100" y="-100" width="317" height="629" fill="white"></rect>
 <rect x="38.000000" y="146.000000" width="38" height="133" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
index 2f72cffed..d71dbf026 100644
--- a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="317" height="789" viewBox="-90 -90 317 789"><style type="text/css">
@@ -18,7 +19,27 @@ width="317" height="789" viewBox="-90 -90 317 789"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="471" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 467.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4095011686)"/><text class="text-italic" x="69.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="69.000000" dy="0.000000">There</tspan><tspan x="69.000000" dy="16.625000">once</tspan><tspan x="69.000000" dy="16.625000">was</tspan><tspan x="69.000000" dy="16.625000">a</tspan><tspan x="69.000000" dy="16.625000">very</tspan><tspan x="69.000000" dy="16.625000">tall</tspan><tspan x="69.000000" dy="16.625000">edge</tspan><tspan x="69.000000" dy="16.625000">label</tspan></text></g><mask id="4095011686" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="789">
+</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  if (document.documentElement.getAttribute("id") !== "d2-svg") {
+    return;
+  }
+  const svgEl = document.documentElement;
+  let width = parseInt(svgEl.getAttribute("width"), 10);
+  let height = parseInt(svgEl.getAttribute("height"), 10);
+  let ratio;
+  if (width > height) {
+    if (width > window.innerWidth) {
+      ratio = window.innerWidth / width;
+    }
+  } 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" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="471" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="537.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 467.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4095011686)"/><text class="text-italic" x="69.000000" y="254.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E"><tspan x="69.000000" dy="0.000000">There</tspan><tspan x="69.000000" dy="16.625000">once</tspan><tspan x="69.000000" dy="16.625000">was</tspan><tspan x="69.000000" dy="16.625000">a</tspan><tspan x="69.000000" dy="16.625000">very</tspan><tspan x="69.000000" dy="16.625000">tall</tspan><tspan x="69.000000" dy="16.625000">edge</tspan><tspan x="69.000000" dy="16.625000">label</tspan></text></g><mask id="4095011686" maskUnits="userSpaceOnUse" x="-100" y="-100" width="317" height="789">
 <rect x="-100" y="-100" width="317" height="789" fill="white"></rect>
 <rect x="50.000000" y="238.000000" width="38" height="133" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
diff --git a/lib/imgbundler/imgbundler_test.go b/lib/imgbundler/imgbundler_test.go
index 0c06ab891..e8c870ab2 100644
--- a/lib/imgbundler/imgbundler_test.go
+++ b/lib/imgbundler/imgbundler_test.go
@@ -55,6 +55,7 @@ func TestInlineRemote(t *testing.T) {
 
 	sampleSVG := fmt.Sprintf(`<?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="328" height="587" viewBox="-100 -131 328 587"><style type="text/css">
@@ -171,6 +172,7 @@ func TestInlineLocal(t *testing.T) {
 
 	sampleSVG := fmt.Sprintf(`<?xml version="1.0" encoding="utf-8"?>
 <svg
+id="d2-svg"
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="328" height="587" viewBox="-100 -131 328 587"><style type="text/css">
diff --git a/static/watch.js b/static/watch.js
index 0ebeddeeb..44fff3821 100644
--- a/static/watch.js
+++ b/static/watch.js
@@ -5,12 +5,14 @@ window.addEventListener("DOMContentLoaded", () => {
 
 function init(reconnectDelay) {
   const d2ErrDiv = window.document.querySelector("#d2-err");
-  const d2SVG = window.document.querySelector("#d2-svg");
+  const d2SVG = window.document.querySelector("#d2-svg-container");
 
   const devMode = document.body.dataset.d2DevMode === "true";
   const ws = new WebSocket(
     `ws://${window.location.host}${window.location.pathname}watch`
   );
+  let isInit = true;
+  let ratio;
   ws.onopen = () => {
     reconnectDelay = 1000;
     console.info("watch websocket opened");
@@ -32,18 +34,20 @@ function init(reconnectDelay) {
       // out the width, height and viewbox out of the top level SVG tag and update those manually.
       d2SVG.innerHTML = msg.svg;
 
-      const svgEl = d2SVG.querySelector("svg");
+      const svgEl = d2SVG.querySelector("#d2-svg");
       let width = parseInt(svgEl.getAttribute("width"), 10);
       let height = parseInt(svgEl.getAttribute("height"), 10);
-      let ratio;
-      if (width > height) {
-        if (width > window.innerWidth) {
-          ratio = window.innerWidth / width;
+      if (isInit) {
+        if (width > height) {
+          if (width > window.innerWidth) {
+            ratio = window.innerWidth / width;
+          }
+        } else if (height > window.innerHeight) {
+          ratio = window.innerHeight / height;
         }
-      } else if (height > window.innerHeight) {
-        ratio = window.innerHeight / height;
+        // Scale svg fit to zoom
+        isInit = false;
       }
-      // Scale svg fit to zoom
       if (ratio) {
         // body padding is 8px
         svgEl.setAttribute("width", width * ratio - 16);
diff --git a/watch.go b/watch.go
index 5bc99e5e3..9263ccfba 100644
--- a/watch.go
+++ b/watch.go
@@ -430,7 +430,7 @@ func (w *watcher) handleRoot(hw http.ResponseWriter, r *http.Request) {
 </head>
 <body data-d2-dev-mode=%t>
 	<div id="d2-err" style="display: none"></div>
-	<div id="d2-svg"></div>
+	<div id="d2-svg-container"></div>
 </body>
 </html>`, w.outputPath, w.devMode)
 }