From 8dcf60426a6c7f743878b3aefea8050cddac4d7e Mon Sep 17 00:00:00 2001
From: melsonic <work.melsonic@gmail.com>
Date: Tue, 25 Mar 2025 22:57:44 +0530
Subject: [PATCH] updated exp test file changes

---
 .../connection-icons/dagre/sketch.exp.svg     | 159 +++++++++---------
 .../txtar/connection-icons/elk/sketch.exp.svg | 159 +++++++++---------
 .../txtar/icon-style/dagre/sketch.exp.svg     |   2 +-
 .../txtar/icon-style/elk/sketch.exp.svg       |   2 +-
 .../TestCompile/import-connections.exp.json   |   6 +
 .../TestCompile/import-scenario.exp.json      |   6 +
 .../TestCompile/import-steps.exp.json         |   9 +
 .../TestCompile/import-style-1.exp.json       |   3 +
 .../TestCompile/import-style-2.exp.json       |   4 +
 .../var_nested_in_markdown.exp.json           |   2 +
 10 files changed, 194 insertions(+), 158 deletions(-)

diff --git a/e2etests/testdata/txtar/connection-icons/dagre/sketch.exp.svg b/e2etests/testdata/txtar/connection-icons/dagre/sketch.exp.svg
index d2f3a7cb1..e571a1ef0 100644
--- a/e2etests/testdata/txtar/connection-icons/dagre/sketch.exp.svg
+++ b/e2etests/testdata/txtar/connection-icons/dagre/sketch.exp.svg
@@ -25,82 +25,85 @@
   opacity: 0.5;
 }
 
-		.d2-502090661 .fill-N1{fill:#0A0F25;}
-		.d2-502090661 .fill-N2{fill:#676C7E;}
-		.d2-502090661 .fill-N3{fill:#9499AB;}
-		.d2-502090661 .fill-N4{fill:#CFD2DD;}
-		.d2-502090661 .fill-N5{fill:#DEE1EB;}
-		.d2-502090661 .fill-N6{fill:#EEF1F8;}
-		.d2-502090661 .fill-N7{fill:#FFFFFF;}
-		.d2-502090661 .fill-B1{fill:#0D32B2;}
-		.d2-502090661 .fill-B2{fill:#0D32B2;}
-		.d2-502090661 .fill-B3{fill:#E3E9FD;}
-		.d2-502090661 .fill-B4{fill:#E3E9FD;}
-		.d2-502090661 .fill-B5{fill:#EDF0FD;}
-		.d2-502090661 .fill-B6{fill:#F7F8FE;}
-		.d2-502090661 .fill-AA2{fill:#4A6FF3;}
-		.d2-502090661 .fill-AA4{fill:#EDF0FD;}
-		.d2-502090661 .fill-AA5{fill:#F7F8FE;}
-		.d2-502090661 .fill-AB4{fill:#EDF0FD;}
-		.d2-502090661 .fill-AB5{fill:#F7F8FE;}
-		.d2-502090661 .stroke-N1{stroke:#0A0F25;}
-		.d2-502090661 .stroke-N2{stroke:#676C7E;}
-		.d2-502090661 .stroke-N3{stroke:#9499AB;}
-		.d2-502090661 .stroke-N4{stroke:#CFD2DD;}
-		.d2-502090661 .stroke-N5{stroke:#DEE1EB;}
-		.d2-502090661 .stroke-N6{stroke:#EEF1F8;}
-		.d2-502090661 .stroke-N7{stroke:#FFFFFF;}
-		.d2-502090661 .stroke-B1{stroke:#0D32B2;}
-		.d2-502090661 .stroke-B2{stroke:#0D32B2;}
-		.d2-502090661 .stroke-B3{stroke:#E3E9FD;}
-		.d2-502090661 .stroke-B4{stroke:#E3E9FD;}
-		.d2-502090661 .stroke-B5{stroke:#EDF0FD;}
-		.d2-502090661 .stroke-B6{stroke:#F7F8FE;}
-		.d2-502090661 .stroke-AA2{stroke:#4A6FF3;}
-		.d2-502090661 .stroke-AA4{stroke:#EDF0FD;}
-		.d2-502090661 .stroke-AA5{stroke:#F7F8FE;}
-		.d2-502090661 .stroke-AB4{stroke:#EDF0FD;}
-		.d2-502090661 .stroke-AB5{stroke:#F7F8FE;}
-		.d2-502090661 .background-color-N1{background-color:#0A0F25;}
-		.d2-502090661 .background-color-N2{background-color:#676C7E;}
-		.d2-502090661 .background-color-N3{background-color:#9499AB;}
-		.d2-502090661 .background-color-N4{background-color:#CFD2DD;}
-		.d2-502090661 .background-color-N5{background-color:#DEE1EB;}
-		.d2-502090661 .background-color-N6{background-color:#EEF1F8;}
-		.d2-502090661 .background-color-N7{background-color:#FFFFFF;}
-		.d2-502090661 .background-color-B1{background-color:#0D32B2;}
-		.d2-502090661 .background-color-B2{background-color:#0D32B2;}
-		.d2-502090661 .background-color-B3{background-color:#E3E9FD;}
-		.d2-502090661 .background-color-B4{background-color:#E3E9FD;}
-		.d2-502090661 .background-color-B5{background-color:#EDF0FD;}
-		.d2-502090661 .background-color-B6{background-color:#F7F8FE;}
-		.d2-502090661 .background-color-AA2{background-color:#4A6FF3;}
-		.d2-502090661 .background-color-AA4{background-color:#EDF0FD;}
-		.d2-502090661 .background-color-AA5{background-color:#F7F8FE;}
-		.d2-502090661 .background-color-AB4{background-color:#EDF0FD;}
-		.d2-502090661 .background-color-AB5{background-color:#F7F8FE;}
-		.d2-502090661 .color-N1{color:#0A0F25;}
-		.d2-502090661 .color-N2{color:#676C7E;}
-		.d2-502090661 .color-N3{color:#9499AB;}
-		.d2-502090661 .color-N4{color:#CFD2DD;}
-		.d2-502090661 .color-N5{color:#DEE1EB;}
-		.d2-502090661 .color-N6{color:#EEF1F8;}
-		.d2-502090661 .color-N7{color:#FFFFFF;}
-		.d2-502090661 .color-B1{color:#0D32B2;}
-		.d2-502090661 .color-B2{color:#0D32B2;}
-		.d2-502090661 .color-B3{color:#E3E9FD;}
-		.d2-502090661 .color-B4{color:#E3E9FD;}
-		.d2-502090661 .color-B5{color:#EDF0FD;}
-		.d2-502090661 .color-B6{color:#F7F8FE;}
-		.d2-502090661 .color-AA2{color:#4A6FF3;}
-		.d2-502090661 .color-AA4{color:#EDF0FD;}
-		.d2-502090661 .color-AA5{color:#F7F8FE;}
-		.d2-502090661 .color-AB4{color:#EDF0FD;}
-		.d2-502090661 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-502090661);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-502090661);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-502090661);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-502090661);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-502090661);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-502090661);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-502090661);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-502090661);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="186.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="212.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="339.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="365.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-502090661-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="63.000000" y="17.500000" width="32" height="32" /><path d="M 54.500000 33.000000 C 106.099998 33.000000 132.899994 33.000000 182.500000 33.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-502090661-3488378134)" mask="url(#d2-502090661)" /><text x="119.500000" y="39.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><g class="KGIgLSZndDsgYylbMF0="><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="273.000000" y="17.000000" width="32" height="32" /><path d="M 241.000000 33.000000 C 279.000000 33.000000 299.000000 33.000000 335.000000 33.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-502090661-3488378134)" mask="url(#d2-502090661)" /></g><mask id="d2-502090661" maskUnits="userSpaceOnUse" x="-1" y="-1" width="394" height="68">
-<rect x="-1" y="-1" width="394" height="68" fill="white"></rect>
-<rect x="20.500000" y="22.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
-<rect x="206.500000" y="22.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
-<rect x="359.500000" y="22.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
-<rect x="61.000000" y="23.000000" width="77" height="21" fill="black"></rect>
-<rect x="271.000000" y="17.000000" width="36" height="32" fill="black"></rect>
+		.d2-970759274 .fill-N1{fill:#0A0F25;}
+		.d2-970759274 .fill-N2{fill:#676C7E;}
+		.d2-970759274 .fill-N3{fill:#9499AB;}
+		.d2-970759274 .fill-N4{fill:#CFD2DD;}
+		.d2-970759274 .fill-N5{fill:#DEE1EB;}
+		.d2-970759274 .fill-N6{fill:#EEF1F8;}
+		.d2-970759274 .fill-N7{fill:#FFFFFF;}
+		.d2-970759274 .fill-B1{fill:#0D32B2;}
+		.d2-970759274 .fill-B2{fill:#0D32B2;}
+		.d2-970759274 .fill-B3{fill:#E3E9FD;}
+		.d2-970759274 .fill-B4{fill:#E3E9FD;}
+		.d2-970759274 .fill-B5{fill:#EDF0FD;}
+		.d2-970759274 .fill-B6{fill:#F7F8FE;}
+		.d2-970759274 .fill-AA2{fill:#4A6FF3;}
+		.d2-970759274 .fill-AA4{fill:#EDF0FD;}
+		.d2-970759274 .fill-AA5{fill:#F7F8FE;}
+		.d2-970759274 .fill-AB4{fill:#EDF0FD;}
+		.d2-970759274 .fill-AB5{fill:#F7F8FE;}
+		.d2-970759274 .stroke-N1{stroke:#0A0F25;}
+		.d2-970759274 .stroke-N2{stroke:#676C7E;}
+		.d2-970759274 .stroke-N3{stroke:#9499AB;}
+		.d2-970759274 .stroke-N4{stroke:#CFD2DD;}
+		.d2-970759274 .stroke-N5{stroke:#DEE1EB;}
+		.d2-970759274 .stroke-N6{stroke:#EEF1F8;}
+		.d2-970759274 .stroke-N7{stroke:#FFFFFF;}
+		.d2-970759274 .stroke-B1{stroke:#0D32B2;}
+		.d2-970759274 .stroke-B2{stroke:#0D32B2;}
+		.d2-970759274 .stroke-B3{stroke:#E3E9FD;}
+		.d2-970759274 .stroke-B4{stroke:#E3E9FD;}
+		.d2-970759274 .stroke-B5{stroke:#EDF0FD;}
+		.d2-970759274 .stroke-B6{stroke:#F7F8FE;}
+		.d2-970759274 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-970759274 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-970759274 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-970759274 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-970759274 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-970759274 .background-color-N1{background-color:#0A0F25;}
+		.d2-970759274 .background-color-N2{background-color:#676C7E;}
+		.d2-970759274 .background-color-N3{background-color:#9499AB;}
+		.d2-970759274 .background-color-N4{background-color:#CFD2DD;}
+		.d2-970759274 .background-color-N5{background-color:#DEE1EB;}
+		.d2-970759274 .background-color-N6{background-color:#EEF1F8;}
+		.d2-970759274 .background-color-N7{background-color:#FFFFFF;}
+		.d2-970759274 .background-color-B1{background-color:#0D32B2;}
+		.d2-970759274 .background-color-B2{background-color:#0D32B2;}
+		.d2-970759274 .background-color-B3{background-color:#E3E9FD;}
+		.d2-970759274 .background-color-B4{background-color:#E3E9FD;}
+		.d2-970759274 .background-color-B5{background-color:#EDF0FD;}
+		.d2-970759274 .background-color-B6{background-color:#F7F8FE;}
+		.d2-970759274 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-970759274 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-970759274 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-970759274 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-970759274 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-970759274 .color-N1{color:#0A0F25;}
+		.d2-970759274 .color-N2{color:#676C7E;}
+		.d2-970759274 .color-N3{color:#9499AB;}
+		.d2-970759274 .color-N4{color:#CFD2DD;}
+		.d2-970759274 .color-N5{color:#DEE1EB;}
+		.d2-970759274 .color-N6{color:#EEF1F8;}
+		.d2-970759274 .color-N7{color:#FFFFFF;}
+		.d2-970759274 .color-B1{color:#0D32B2;}
+		.d2-970759274 .color-B2{color:#0D32B2;}
+		.d2-970759274 .color-B3{color:#E3E9FD;}
+		.d2-970759274 .color-B4{color:#E3E9FD;}
+		.d2-970759274 .color-B5{color:#EDF0FD;}
+		.d2-970759274 .color-B6{color:#F7F8FE;}
+		.d2-970759274 .color-AA2{color:#4A6FF3;}
+		.d2-970759274 .color-AA4{color:#EDF0FD;}
+		.d2-970759274 .color-AA5{color:#F7F8FE;}
+		.d2-970759274 .color-AB4{color:#EDF0FD;}
+		.d2-970759274 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-970759274);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-970759274);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-970759274);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-970759274);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-970759274);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-970759274);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-970759274);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-970759274);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="29.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="275.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="301.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="459.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="485.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="cHJvZHVjZXI="><g class="shape" ><rect x="0.000000" y="126.000000" width="110.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="55.000000" y="164.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">producer</text></g><g class="Y29uc3VtZXI="><g class="shape" ><rect x="243.000000" y="126.000000" width="116.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="301.000000" y="164.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">consumer</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-970759274-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="122.000000" y="17.500000" width="32" height="32" /><path d="M 84.500000 33.000000 C 157.699997 33.000000 196.100006 33.000000 270.500000 33.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-970759274-3488378134)" mask="url(#d2-970759274)" /><text x="178.500000" y="39.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><g class="KGIgLSZndDsgYylbMF0="><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="378.000000" y="17.000000" width="32" height="32" /><path d="M 330.500000 33.000000 C 392.899994 33.000000 419.000000 33.000000 455.000000 33.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-970759274-3488378134)" mask="url(#d2-970759274)" /></g><g class="KHByb2R1Y2VyIC0mZ3Q7IGNvbnN1bWVyKVswXQ=="><image href="https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-Simple-Queue-Service-SQS.svg" x="161.000000" y="143.000000" width="32" height="32" clip-path="inset(0 round 20.000000px)" /><path d="M 111.500000 159.000000 C 163.100006 159.000000 189.899994 159.000000 239.500000 159.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-970759274-3488378134)" mask="url(#d2-970759274)" /></g><mask id="d2-970759274" maskUnits="userSpaceOnUse" x="-1" y="-1" width="514" height="194">
+<rect x="-1" y="-1" width="514" height="194" fill="white"></rect>
+<rect x="49.500000" y="22.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="295.500000" y="22.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="479.500000" y="22.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="20.500000" y="148.500000" width="69" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="263.500000" y="148.500000" width="75" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="120.000000" y="23.000000" width="77" height="21" fill="black"></rect>
+<rect x="376.000000" y="17.000000" width="36" height="32" fill="black"></rect>
+<rect x="159.000000" y="143.000000" width="36" height="32" fill="black"></rect>
 </mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/txtar/connection-icons/elk/sketch.exp.svg b/e2etests/testdata/txtar/connection-icons/elk/sketch.exp.svg
index 71a5616c9..9ba762bb2 100644
--- a/e2etests/testdata/txtar/connection-icons/elk/sketch.exp.svg
+++ b/e2etests/testdata/txtar/connection-icons/elk/sketch.exp.svg
@@ -25,82 +25,85 @@
   opacity: 0.5;
 }
 
-		.d2-364024125 .fill-N1{fill:#0A0F25;}
-		.d2-364024125 .fill-N2{fill:#676C7E;}
-		.d2-364024125 .fill-N3{fill:#9499AB;}
-		.d2-364024125 .fill-N4{fill:#CFD2DD;}
-		.d2-364024125 .fill-N5{fill:#DEE1EB;}
-		.d2-364024125 .fill-N6{fill:#EEF1F8;}
-		.d2-364024125 .fill-N7{fill:#FFFFFF;}
-		.d2-364024125 .fill-B1{fill:#0D32B2;}
-		.d2-364024125 .fill-B2{fill:#0D32B2;}
-		.d2-364024125 .fill-B3{fill:#E3E9FD;}
-		.d2-364024125 .fill-B4{fill:#E3E9FD;}
-		.d2-364024125 .fill-B5{fill:#EDF0FD;}
-		.d2-364024125 .fill-B6{fill:#F7F8FE;}
-		.d2-364024125 .fill-AA2{fill:#4A6FF3;}
-		.d2-364024125 .fill-AA4{fill:#EDF0FD;}
-		.d2-364024125 .fill-AA5{fill:#F7F8FE;}
-		.d2-364024125 .fill-AB4{fill:#EDF0FD;}
-		.d2-364024125 .fill-AB5{fill:#F7F8FE;}
-		.d2-364024125 .stroke-N1{stroke:#0A0F25;}
-		.d2-364024125 .stroke-N2{stroke:#676C7E;}
-		.d2-364024125 .stroke-N3{stroke:#9499AB;}
-		.d2-364024125 .stroke-N4{stroke:#CFD2DD;}
-		.d2-364024125 .stroke-N5{stroke:#DEE1EB;}
-		.d2-364024125 .stroke-N6{stroke:#EEF1F8;}
-		.d2-364024125 .stroke-N7{stroke:#FFFFFF;}
-		.d2-364024125 .stroke-B1{stroke:#0D32B2;}
-		.d2-364024125 .stroke-B2{stroke:#0D32B2;}
-		.d2-364024125 .stroke-B3{stroke:#E3E9FD;}
-		.d2-364024125 .stroke-B4{stroke:#E3E9FD;}
-		.d2-364024125 .stroke-B5{stroke:#EDF0FD;}
-		.d2-364024125 .stroke-B6{stroke:#F7F8FE;}
-		.d2-364024125 .stroke-AA2{stroke:#4A6FF3;}
-		.d2-364024125 .stroke-AA4{stroke:#EDF0FD;}
-		.d2-364024125 .stroke-AA5{stroke:#F7F8FE;}
-		.d2-364024125 .stroke-AB4{stroke:#EDF0FD;}
-		.d2-364024125 .stroke-AB5{stroke:#F7F8FE;}
-		.d2-364024125 .background-color-N1{background-color:#0A0F25;}
-		.d2-364024125 .background-color-N2{background-color:#676C7E;}
-		.d2-364024125 .background-color-N3{background-color:#9499AB;}
-		.d2-364024125 .background-color-N4{background-color:#CFD2DD;}
-		.d2-364024125 .background-color-N5{background-color:#DEE1EB;}
-		.d2-364024125 .background-color-N6{background-color:#EEF1F8;}
-		.d2-364024125 .background-color-N7{background-color:#FFFFFF;}
-		.d2-364024125 .background-color-B1{background-color:#0D32B2;}
-		.d2-364024125 .background-color-B2{background-color:#0D32B2;}
-		.d2-364024125 .background-color-B3{background-color:#E3E9FD;}
-		.d2-364024125 .background-color-B4{background-color:#E3E9FD;}
-		.d2-364024125 .background-color-B5{background-color:#EDF0FD;}
-		.d2-364024125 .background-color-B6{background-color:#F7F8FE;}
-		.d2-364024125 .background-color-AA2{background-color:#4A6FF3;}
-		.d2-364024125 .background-color-AA4{background-color:#EDF0FD;}
-		.d2-364024125 .background-color-AA5{background-color:#F7F8FE;}
-		.d2-364024125 .background-color-AB4{background-color:#EDF0FD;}
-		.d2-364024125 .background-color-AB5{background-color:#F7F8FE;}
-		.d2-364024125 .color-N1{color:#0A0F25;}
-		.d2-364024125 .color-N2{color:#676C7E;}
-		.d2-364024125 .color-N3{color:#9499AB;}
-		.d2-364024125 .color-N4{color:#CFD2DD;}
-		.d2-364024125 .color-N5{color:#DEE1EB;}
-		.d2-364024125 .color-N6{color:#EEF1F8;}
-		.d2-364024125 .color-N7{color:#FFFFFF;}
-		.d2-364024125 .color-B1{color:#0D32B2;}
-		.d2-364024125 .color-B2{color:#0D32B2;}
-		.d2-364024125 .color-B3{color:#E3E9FD;}
-		.d2-364024125 .color-B4{color:#E3E9FD;}
-		.d2-364024125 .color-B5{color:#EDF0FD;}
-		.d2-364024125 .color-B6{color:#F7F8FE;}
-		.d2-364024125 .color-AA2{color:#4A6FF3;}
-		.d2-364024125 .color-AA4{color:#EDF0FD;}
-		.d2-364024125 .color-AA5{color:#F7F8FE;}
-		.d2-364024125 .color-AB4{color:#EDF0FD;}
-		.d2-364024125 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-364024125);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-364024125);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-364024125);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-364024125);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-364024125);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-364024125);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-364024125);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-364024125);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="238.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="264.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="361.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="387.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-364024125-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="95.000000" y="29.500000" width="32" height="32" /><path d="M 67.000000 45.000000 L 234.000000 45.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-364024125-3488378134)" mask="url(#d2-364024125)" /><text x="151.500000" y="51.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><g class="KGIgLSZndDsgYylbMF0="><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="310.000000" y="29.000000" width="32" height="32" /><path d="M 293.000000 45.000000 L 357.000000 45.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-364024125-3488378134)" mask="url(#d2-364024125)" /></g><mask id="d2-364024125" maskUnits="userSpaceOnUse" x="11" y="11" width="404" height="68">
-<rect x="11" y="11" width="404" height="68" fill="white"></rect>
-<rect x="32.500000" y="34.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
-<rect x="258.500000" y="34.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
-<rect x="381.500000" y="34.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
-<rect x="93.000000" y="35.000000" width="77" height="21" fill="black"></rect>
-<rect x="308.000000" y="29.000000" width="36" height="32" fill="black"></rect>
+		.d2-674489035 .fill-N1{fill:#0A0F25;}
+		.d2-674489035 .fill-N2{fill:#676C7E;}
+		.d2-674489035 .fill-N3{fill:#9499AB;}
+		.d2-674489035 .fill-N4{fill:#CFD2DD;}
+		.d2-674489035 .fill-N5{fill:#DEE1EB;}
+		.d2-674489035 .fill-N6{fill:#EEF1F8;}
+		.d2-674489035 .fill-N7{fill:#FFFFFF;}
+		.d2-674489035 .fill-B1{fill:#0D32B2;}
+		.d2-674489035 .fill-B2{fill:#0D32B2;}
+		.d2-674489035 .fill-B3{fill:#E3E9FD;}
+		.d2-674489035 .fill-B4{fill:#E3E9FD;}
+		.d2-674489035 .fill-B5{fill:#EDF0FD;}
+		.d2-674489035 .fill-B6{fill:#F7F8FE;}
+		.d2-674489035 .fill-AA2{fill:#4A6FF3;}
+		.d2-674489035 .fill-AA4{fill:#EDF0FD;}
+		.d2-674489035 .fill-AA5{fill:#F7F8FE;}
+		.d2-674489035 .fill-AB4{fill:#EDF0FD;}
+		.d2-674489035 .fill-AB5{fill:#F7F8FE;}
+		.d2-674489035 .stroke-N1{stroke:#0A0F25;}
+		.d2-674489035 .stroke-N2{stroke:#676C7E;}
+		.d2-674489035 .stroke-N3{stroke:#9499AB;}
+		.d2-674489035 .stroke-N4{stroke:#CFD2DD;}
+		.d2-674489035 .stroke-N5{stroke:#DEE1EB;}
+		.d2-674489035 .stroke-N6{stroke:#EEF1F8;}
+		.d2-674489035 .stroke-N7{stroke:#FFFFFF;}
+		.d2-674489035 .stroke-B1{stroke:#0D32B2;}
+		.d2-674489035 .stroke-B2{stroke:#0D32B2;}
+		.d2-674489035 .stroke-B3{stroke:#E3E9FD;}
+		.d2-674489035 .stroke-B4{stroke:#E3E9FD;}
+		.d2-674489035 .stroke-B5{stroke:#EDF0FD;}
+		.d2-674489035 .stroke-B6{stroke:#F7F8FE;}
+		.d2-674489035 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-674489035 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-674489035 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-674489035 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-674489035 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-674489035 .background-color-N1{background-color:#0A0F25;}
+		.d2-674489035 .background-color-N2{background-color:#676C7E;}
+		.d2-674489035 .background-color-N3{background-color:#9499AB;}
+		.d2-674489035 .background-color-N4{background-color:#CFD2DD;}
+		.d2-674489035 .background-color-N5{background-color:#DEE1EB;}
+		.d2-674489035 .background-color-N6{background-color:#EEF1F8;}
+		.d2-674489035 .background-color-N7{background-color:#FFFFFF;}
+		.d2-674489035 .background-color-B1{background-color:#0D32B2;}
+		.d2-674489035 .background-color-B2{background-color:#0D32B2;}
+		.d2-674489035 .background-color-B3{background-color:#E3E9FD;}
+		.d2-674489035 .background-color-B4{background-color:#E3E9FD;}
+		.d2-674489035 .background-color-B5{background-color:#EDF0FD;}
+		.d2-674489035 .background-color-B6{background-color:#F7F8FE;}
+		.d2-674489035 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-674489035 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-674489035 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-674489035 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-674489035 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-674489035 .color-N1{color:#0A0F25;}
+		.d2-674489035 .color-N2{color:#676C7E;}
+		.d2-674489035 .color-N3{color:#9499AB;}
+		.d2-674489035 .color-N4{color:#CFD2DD;}
+		.d2-674489035 .color-N5{color:#DEE1EB;}
+		.d2-674489035 .color-N6{color:#EEF1F8;}
+		.d2-674489035 .color-N7{color:#FFFFFF;}
+		.d2-674489035 .color-B1{color:#0D32B2;}
+		.d2-674489035 .color-B2{color:#0D32B2;}
+		.d2-674489035 .color-B3{color:#E3E9FD;}
+		.d2-674489035 .color-B4{color:#E3E9FD;}
+		.d2-674489035 .color-B5{color:#EDF0FD;}
+		.d2-674489035 .color-B6{color:#F7F8FE;}
+		.d2-674489035 .color-AA2{color:#4A6FF3;}
+		.d2-674489035 .color-AA4{color:#EDF0FD;}
+		.d2-674489035 .color-AA5{color:#F7F8FE;}
+		.d2-674489035 .color-AB4{color:#EDF0FD;}
+		.d2-674489035 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-674489035);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-674489035);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-674489035);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-674489035);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-674489035);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-674489035);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-674489035);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-674489035);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="YQ=="><g class="shape" ><rect x="69.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="95.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="378.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="404.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="Yw=="><g class="shape" ><rect x="501.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="527.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g class="cHJvZHVjZXI="><g class="shape" ><rect x="12.000000" y="98.000000" width="110.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="67.000000" y="136.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">producer</text></g><g class="Y29uc3VtZXI="><g class="shape" ><rect x="192.000000" y="98.000000" width="116.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="250.000000" y="136.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">consumer</text></g><g class="KGEgLSZndDsgYilbMF0="><marker id="mk-d2-674489035-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="194.000000" y="29.500000" width="32" height="32" /><path d="M 124.000000 45.000000 L 374.000000 45.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-674489035-3488378134)" mask="url(#d2-674489035)" /><text x="250.500000" y="51.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><g class="KGIgLSZndDsgYylbMF0="><image href="https://icons.terrastruct.com/essentials%2F213-alarm.svg" x="450.000000" y="29.000000" width="32" height="32" /><path d="M 433.000000 45.000000 L 497.000000 45.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-674489035-3488378134)" mask="url(#d2-674489035)" /></g><g class="KHByb2R1Y2VyIC0mZ3Q7IGNvbnN1bWVyKVswXQ=="><image href="https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-Simple-Queue-Service-SQS.svg" x="141.000000" y="115.000000" width="32" height="32" clip-path="inset(0 round 20.000000px)" /><path d="M 124.000000 131.000000 L 188.000000 131.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-674489035-3488378134)" mask="url(#d2-674489035)" /></g><mask id="d2-674489035" maskUnits="userSpaceOnUse" x="11" y="11" width="544" height="154">
+<rect x="11" y="11" width="544" height="154" fill="white"></rect>
+<rect x="89.500000" y="34.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="398.500000" y="34.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="521.500000" y="34.500000" width="12" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="32.500000" y="120.500000" width="69" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="212.500000" y="120.500000" width="75" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="192.000000" y="35.000000" width="77" height="21" fill="black"></rect>
+<rect x="448.000000" y="29.000000" width="36" height="32" fill="black"></rect>
+<rect x="139.000000" y="115.000000" width="36" height="32" fill="black"></rect>
 </mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/txtar/icon-style/dagre/sketch.exp.svg b/e2etests/testdata/txtar/icon-style/dagre/sketch.exp.svg
index 6b9f4e5cb..7e69de058 100644
--- a/e2etests/testdata/txtar/icon-style/dagre/sketch.exp.svg
+++ b/e2etests/testdata/txtar/icon-style/dagre/sketch.exp.svg
@@ -91,5 +91,5 @@
 		.d2-2468484529 .color-AB4{color:#EDF0FD;}
 		.d2-2468484529 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-2468484529);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-2468484529);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-2468484529);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-2468484529);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-2468484529);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-2468484529);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-2468484529);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-2468484529);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="bGFtYmRh"><g class="shape" ><clipPath id="d2-2468484529-lambda-icon"><path d="M 0.000000 20.000000 L 0.000000 20.000000 S 0.000000 0.000000 20.000000 0.000000 L 108.000000 0.000000 L 108.000000 0.000000 S 128.000000 0.000000 128.000000 20.000000 L 128.000000 108.000000 S 128.000000  128.000000 108.000000 128.000000 L 20.000000 128.000000 S 0.000000 128.000000 0.000000 108.000000L 0.000000 20.000000Z 0.000000 0.000000" fill="none" /> </clipPath><image href="https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" stroke="#0D32B2" fill="#FFFFFF" class=" stroke-B1 fill-N7" style="stroke-width:2;" clip-path="url(#d2-2468484529-lambda-icon)" /></g><text x="64.000000" y="149.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">lambda</text></g><mask id="d2-2468484529" maskUnits="userSpaceOnUse" x="-1" y="-1" width="130" height="155">
 <rect x="-1" y="-1" width="130" height="155" fill="white"></rect>
-<rect x="37.500000" y="133.000000" width="53" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="35.500000" y="133.000000" width="57" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/txtar/icon-style/elk/sketch.exp.svg b/e2etests/testdata/txtar/icon-style/elk/sketch.exp.svg
index 9bcee2020..9c23b0493 100644
--- a/e2etests/testdata/txtar/icon-style/elk/sketch.exp.svg
+++ b/e2etests/testdata/txtar/icon-style/elk/sketch.exp.svg
@@ -91,5 +91,5 @@
 		.d2-1884699753 .color-AB4{color:#EDF0FD;}
 		.d2-1884699753 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1884699753);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1884699753);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1884699753);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1884699753);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1884699753);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1884699753);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1884699753);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1884699753);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g class="bGFtYmRh"><g class="shape" ><clipPath id="d2-1884699753-lambda-icon"><path d="M 12.000000 32.000000 L 12.000000 32.000000 S 12.000000 12.000000 32.000000 12.000000 L 120.000000 12.000000 L 120.000000 12.000000 S 140.000000 12.000000 140.000000 32.000000 L 140.000000 120.000000 S 140.000000  140.000000 120.000000 140.000000 L 32.000000 140.000000 S 12.000000 140.000000 12.000000 120.000000L 12.000000 32.000000Z 12.000000 12.000000" fill="none" /> </clipPath><image href="https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" stroke="#0D32B2" fill="#FFFFFF" class=" stroke-B1 fill-N7" style="stroke-width:2;" clip-path="url(#d2-1884699753-lambda-icon)" /></g><text x="76.000000" y="161.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">lambda</text></g><mask id="d2-1884699753" maskUnits="userSpaceOnUse" x="11" y="11" width="130" height="155">
 <rect x="11" y="11" width="130" height="155" fill="white"></rect>
-<rect x="49.500000" y="145.000000" width="53" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="47.500000" y="145.000000" width="57" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>
\ No newline at end of file
diff --git a/testdata/d2compiler/TestCompile/import-connections.exp.json b/testdata/d2compiler/TestCompile/import-connections.exp.json
index 6433fd184..69643e832 100644
--- a/testdata/d2compiler/TestCompile/import-connections.exp.json
+++ b/testdata/d2compiler/TestCompile/import-connections.exp.json
@@ -129,6 +129,7 @@
           "height": 0
         },
         "style": {},
+        "iconStyle": {},
         "near_key": null,
         "shape": {
           "value": ""
@@ -160,6 +161,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": ""
@@ -190,6 +192,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": ""
@@ -381,6 +384,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -477,6 +481,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -573,6 +578,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
diff --git a/testdata/d2compiler/TestCompile/import-scenario.exp.json b/testdata/d2compiler/TestCompile/import-scenario.exp.json
index 9f6c22826..70f8e48df 100644
--- a/testdata/d2compiler/TestCompile/import-scenario.exp.json
+++ b/testdata/d2compiler/TestCompile/import-scenario.exp.json
@@ -62,6 +62,7 @@
           "height": 0
         },
         "style": {},
+        "iconStyle": {},
         "near_key": null,
         "shape": {
           "value": ""
@@ -109,6 +110,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -154,6 +156,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -272,6 +275,7 @@
               "height": 0
             },
             "style": {},
+            "iconStyle": {},
             "near_key": null,
             "shape": {
               "value": ""
@@ -319,6 +323,7 @@
                 "height": 0
               },
               "style": {},
+              "iconStyle": {},
               "near_key": null,
               "shape": {
                 "value": "rectangle"
@@ -395,6 +400,7 @@
                 "height": 0
               },
               "style": {},
+              "iconStyle": {},
               "tooltip": {
                 "value": "foo"
               },
diff --git a/testdata/d2compiler/TestCompile/import-steps.exp.json b/testdata/d2compiler/TestCompile/import-steps.exp.json
index 23d9a9323..d0c2b4cc9 100644
--- a/testdata/d2compiler/TestCompile/import-steps.exp.json
+++ b/testdata/d2compiler/TestCompile/import-steps.exp.json
@@ -62,6 +62,7 @@
           "height": 0
         },
         "style": {},
+        "iconStyle": {},
         "near_key": null,
         "shape": {
           "value": ""
@@ -109,6 +110,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -154,6 +156,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -272,6 +275,7 @@
               "height": 0
             },
             "style": {},
+            "iconStyle": {},
             "near_key": null,
             "shape": {
               "value": ""
@@ -319,6 +323,7 @@
                 "height": 0
               },
               "style": {},
+              "iconStyle": {},
               "near_key": null,
               "shape": {
                 "value": "rectangle"
@@ -395,6 +400,7 @@
                 "height": 0
               },
               "style": {},
+              "iconStyle": {},
               "tooltip": {
                 "value": "foo"
               },
@@ -516,6 +522,7 @@
               "height": 0
             },
             "style": {},
+            "iconStyle": {},
             "near_key": null,
             "shape": {
               "value": ""
@@ -563,6 +570,7 @@
                 "height": 0
               },
               "style": {},
+              "iconStyle": {},
               "near_key": null,
               "shape": {
                 "value": "rectangle"
@@ -670,6 +678,7 @@
                 "height": 0
               },
               "style": {},
+              "iconStyle": {},
               "tooltip": {
                 "value": "do"
               },
diff --git a/testdata/d2compiler/TestCompile/import-style-1.exp.json b/testdata/d2compiler/TestCompile/import-style-1.exp.json
index 7a15621be..10933669a 100644
--- a/testdata/d2compiler/TestCompile/import-style-1.exp.json
+++ b/testdata/d2compiler/TestCompile/import-style-1.exp.json
@@ -127,6 +127,7 @@
           "height": 0
         },
         "style": {},
+        "iconStyle": {},
         "near_key": null,
         "shape": {
           "value": ""
@@ -300,6 +301,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -402,6 +404,7 @@
               "value": "red"
             }
           },
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
diff --git a/testdata/d2compiler/TestCompile/import-style-2.exp.json b/testdata/d2compiler/TestCompile/import-style-2.exp.json
index 5c61b5d52..605e32be9 100644
--- a/testdata/d2compiler/TestCompile/import-style-2.exp.json
+++ b/testdata/d2compiler/TestCompile/import-style-2.exp.json
@@ -138,6 +138,7 @@
           "height": 0
         },
         "style": {},
+        "iconStyle": {},
         "near_key": null,
         "shape": {
           "value": ""
@@ -333,6 +334,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -442,6 +444,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
@@ -555,6 +558,7 @@
               "value": "red"
             }
           },
+          "iconStyle": {},
           "near_key": null,
           "shape": {
             "value": "rectangle"
diff --git a/testdata/d2compiler/TestCompile/var_nested_in_markdown.exp.json b/testdata/d2compiler/TestCompile/var_nested_in_markdown.exp.json
index ae3af4a94..14d120f4b 100644
--- a/testdata/d2compiler/TestCompile/var_nested_in_markdown.exp.json
+++ b/testdata/d2compiler/TestCompile/var_nested_in_markdown.exp.json
@@ -140,6 +140,7 @@
           "height": 0
         },
         "style": {},
+        "iconStyle": {},
         "near_key": null,
         "shape": {
           "value": ""
@@ -187,6 +188,7 @@
             "height": 0
           },
           "style": {},
+          "iconStyle": {},
           "near_key": null,
           "language": "markdown",
           "shape": {