Merge pull request #1383 from gavin-ts/shape-label-mask

render: transparent shape label mask

ci/release/changelogs/next.md

@@ -19,6 +19,7 @@
 - Invalid `constraint` usage is met with an error message, preventing a common mistake of omitting `shape: sql_table` [#1379](https://github.com/terrastruct/d2/pull/1379)
 - Connections now stop at all outside labels. [#1381](https://github.com/terrastruct/d2/pull/1381)
 - Container connections in `dagre` are more balanced [#1384](https://github.com/terrastruct/d2/pull/1384)
+- Connections are now mostly masked by shape labels. [#1383](https://github.com/terrastruct/d2/pull/1383)
 
 #### Bugfixes ⛑️
 

d2renderers/d2sketch/testdata/dots-3d/sketch.exp.svg

@@ -136,5 +136,6 @@
 <rect x="129" y="-5" width="66" height="84" fill="white"></rect>
 <path d="M141,10L156,3L182,3L195,37L182,72L167,79L141,79L129,44L141,10L167,10L180,44L167,79M167,10L182,3M180,44L195,37M167,79L182,72" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><polygon x="129.000000" y="10.000000" mask="url(#border-mask-y)" points="141,10 167,10 180,44 167,79 141,79 129,44" stroke="none" class=" fill-N5" style="stroke-width:2;" /><polygon x="129.000000" y="10.000000" mask="url(#border-mask-y)" points="141,10 167,10 180,44 167,79 141,79 129,44" class="dots-overlay" style="stroke-width:2;" /><polygon mask="url(#border-mask-y)" points="156,3 182,3 195,37 182,72 167,79 180,44 167,10 141,10" class=" fill-N4" style="stroke-width:2;" /><path d="M141,10 L156,3 L182,3 L195,37 L182,72 L167,79 L141,79 L129,44 L141,10 L167,10 L180,44 L167,79 M167,10 L182,3 M180,44 L195,37 M167,79 L182,72" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="154.500000" y="50.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><mask id="d2-124739280" maskUnits="userSpaceOnUse" x="-101" y="-102" width="398" height="284">
 <rect x="-101" y="-102" width="398" height="284" fill="white"></rect>
-
+<rect x="22.500000" y="37.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="150.000000" y="34.000000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

d2renderers/d2svg/appendix/testdata/internal-links/sketch.exp.svg

@@ -94,7 +94,7 @@
 		.d2-916646398 .color-AB4{color:#EDF0FD;}
 		.d2-916646398 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="root.layers.x" xlink:href="root.layers.x"><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(69 -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><mask id="d2-916646398" maskUnits="userSpaceOnUse" x="-101" y="-118" width="304" height="285">
 <rect x="-101" y="-118" width="304" height="285" fill="white"></rect>
-
+<rect x="38.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask><line x1="-41.000000" x2="143.000000" y1="117.000000" y2="117.000000" class=" stroke-B2" /><g class="appendix" x="-1" y="67" width="104" height="100%"><g transform="translate(0 167)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="172" style="font-size: 16px;">root &gt; x</text></g>
 <style type="text/css"><![CDATA[
 .text {

d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg

@@ -94,7 +94,8 @@
 		.d2-2692295619 .color-AB4{color:#EDF0FD;}
 		.d2-2692295619 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://terrastruct.com" xlink:href="https://terrastruct.com"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2692295619)" /></g><mask id="d2-2692295619" maskUnits="userSpaceOnUse" x="-101" y="-118" width="337" height="451">
 <rect x="-101" y="-118" width="337" height="451" fill="white"></rect>
-
+<rect x="55.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="54.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask><line x1="-41.000000" x2="423.000000" y1="283.000000" y2="283.000000" class=" stroke-B2" /><g class="appendix" x="-1" y="233" width="137" height="100%"><g transform="translate(0 333)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="338" style="font-size: 16px;">https://d2lang.com</text>
 <g transform="translate(0 385)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="390" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text>
 <g transform="translate(0 442)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">3</text></g><text class="text" x="48" y="447" style="font-size: 16px;">https://terrastruct.com</text></g>

d2renderers/d2svg/appendix/testdata/links_dark/sketch.exp.svg

@@ -94,7 +94,8 @@
 		.d2-2055261676 .color-AB4{color:#45475A;}
 		.d2-2055261676 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}]]></style><a href="https://d2lang.com" xlink:href="https://d2lang.com"><g id="x"><g class="shape" ><rect x="17.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(86 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g></g></a><a href="https://fosny.eu" xlink:href="https://fosny.eu"><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="118.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="59.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(102 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">3</text></g></g></a><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 59.000000 68.000000 C 59.000000 106.000000 59.000000 126.000000 59.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2055261676)" /></g><mask id="d2-2055261676" maskUnits="userSpaceOnUse" x="-101" y="-118" width="337" height="451">
 <rect x="-101" y="-118" width="337" height="451" fill="white"></rect>
-
+<rect x="55.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="54.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask><line x1="-41.000000" x2="423.000000" y1="283.000000" y2="283.000000" class=" stroke-B2" /><g class="appendix" x="-1" y="233" width="137" height="100%"><g transform="translate(0 333)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="338" style="font-size: 16px;">https://d2lang.com</text>
 <g transform="translate(0 385)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="390" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text>
 <g transform="translate(0 442)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">3</text></g><text class="text" x="48" y="447" style="font-size: 16px;">https://fosny.eu</text></g>

d2renderers/d2svg/appendix/testdata/tooltip_fill/sketch.exp.svg

@@ -94,7 +94,8 @@
 		.d2-820103664 .color-AB4{color:#EDF0FD;}
 		.d2-820103664 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-820103664)" /></g><mask id="d2-820103664" maskUnits="userSpaceOnUse" x="-101" y="-118" width="305" height="451">
 <rect x="-101" y="-118" width="305" height="451" fill="white"></rect>
-
+<rect x="39.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="38.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask><line x1="-41.000000" x2="424.000000" y1="283.000000" y2="283.000000" class=" stroke-B2" /><g class="appendix" x="-1" y="233" width="105" height="100%"><g transform="translate(0 333)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="338" style="font-size: 16px;">Total abstinence is easier than perfect moderation</text>
 <g transform="translate(0 385)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="390" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text></g>
 <style type="text/css"><![CDATA[

d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg

@@ -94,7 +94,8 @@
 		.d2-820103664 .color-AB4{color:#EDF0FD;}
 		.d2-820103664 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text><g transform="translate(70 -16)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="86.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="43.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text><g transform="translate(70 150)" class="appendix-icon"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">2</text></g><title>Gee, I feel kind of LIGHT in the head now,&#xA;knowing I can&#39;t make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 43.000000 68.000000 C 43.000000 106.000000 43.000000 126.000000 43.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-820103664)" /></g><mask id="d2-820103664" maskUnits="userSpaceOnUse" x="-101" y="-118" width="305" height="451">
 <rect x="-101" y="-118" width="305" height="451" fill="white"></rect>
-
+<rect x="39.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="38.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask><line x1="-41.000000" x2="424.000000" y1="283.000000" y2="283.000000" class=" stroke-B2" /><g class="appendix" x="-1" y="233" width="105" height="100%"><g transform="translate(0 333)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">1</text></g><text class="text" x="48" y="338" style="font-size: 16px;">Total abstinence is easier than perfect moderation</text>
 <g transform="translate(0 385)" class="appendix-icon"><circle cx="16" cy="0" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="5" style="font-size: 16px;text-anchor:middle;">2</text></g><text class="text" x="48" y="390" style="font-size: 16px;"><tspan x="48.000000" dy="0.000000">Gee, I feel kind of LIGHT in the head now,</tspan><tspan x="48.000000" dy="18.500000">knowing I can&#39;t make my satellite dish PAYMENTS!</tspan></text></g>
 <style type="text/css"><![CDATA[

d2renderers/d2svg/d2svg.go

@@ -456,11 +456,16 @@ func pathData(connection d2target.Connection, srcAdj, dstAdj *geo.Point) string
 	return strings.Join(path, " ")
 }
 
-func makeLabelMask(labelTL *geo.Point, width, height int) string {
-	return fmt.Sprintf(`<rect x="%f" y="%f" width="%d" height="%d" fill="black"></rect>`,
+func makeLabelMask(labelTL *geo.Point, width, height int, opacity float64) string {
+	fill := "black"
+	if opacity != 1 {
+		fill = fmt.Sprintf("rgba(0,0,0,%.2f)", opacity)
+	}
+	return fmt.Sprintf(`<rect x="%f" y="%f" width="%d" height="%d" fill="%s"></rect>`,
 		labelTL.X, labelTL.Y,
 		width,
 		height,
+		fill,
 	)
 }
 
@@ -510,7 +515,7 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		labelTL.Y = math.Round(labelTL.Y)
 
 		if label.Position(connection.LabelPosition).IsOnEdge() {
-			labelMask = makeLabelMask(labelTL, connection.LabelWidth, connection.LabelHeight)
+			labelMask = makeLabelMask(labelTL, connection.LabelWidth, connection.LabelHeight, 1)
 		}
 	}
 
@@ -1206,6 +1211,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
 			float64(targetShape.LabelWidth),
 			float64(targetShape.LabelHeight),
 		)
+		labelMask = makeLabelMask(labelTL, targetShape.LabelWidth, targetShape.LabelHeight, 0.75)
 
 		fontClass := "text"
 		if targetShape.FontFamily == "mono" {
@@ -1324,7 +1330,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
 			textEl.Content = RenderText(targetShape.Label, textEl.X, float64(targetShape.LabelHeight))
 			fmt.Fprint(writer, textEl.Render())
 			if targetShape.Blend {
-				labelMask = makeLabelMask(labelTL, targetShape.LabelWidth, targetShape.LabelHeight-d2graph.INNER_LABEL_PADDING)
+				labelMask = makeLabelMask(labelTL, targetShape.LabelWidth, targetShape.LabelHeight-d2graph.INNER_LABEL_PADDING, 1)
 			}
 		}
 	}

d2renderers/d2svg/dark_theme/testdata/basic/dark_theme.exp.svg

@@ -91,5 +91,6 @@
 		.d2-3655258321 .color-AB4{color:#45475A;}
 		.d2-3655258321 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}]]></style><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 106.000000 27.500000 126.000000 27.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3655258321)" /></g><mask id="d2-3655258321" maskUnits="userSpaceOnUse" x="-101" y="-101" width="257" height="434">
 <rect x="-101" y="-101" width="257" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="10" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

d2renderers/d2svg/dark_theme/testdata/child_to_child/dark_theme.exp.svg

@@ -98,5 +98,8 @@
 		.d2-1784090246 .color-AB4{color:#45475A;}
 		.d2-1784090246 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}]]></style><g id="winter"><g class="shape" ><rect x="0.000000" y="44.000000" width="168.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">winter</text></g><g id="summer"><g class="shape" ><rect x="7.000000" y="310.000000" width="155.000000" height="122.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="84.500000" y="294.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">summer</text></g><g id="winter.snow"><g class="shape" ><rect x="40.000000" y="72.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.000000" y="110.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">snow</text></g><g id="summer.sun"><g class="shape" ><rect x="47.000000" y="338.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="84.500000" y="376.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">sun</text></g><g id="(winter.snow -&gt; summer.sun)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 84.000000 140.000000 C 84.000000 160.399994 84.000000 176.000000 84.000000 191.000000 C 84.000000 206.000000 84.000000 280.399994 84.000000 334.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1784090246)" /></g><mask id="d2-1784090246" maskUnits="userSpaceOnUse" x="-101" y="-100" width="370" height="633">
 <rect x="-101" y="-100" width="370" height="633" fill="white"></rect>
-
+<rect x="43.000000" y="0.000000" width="82" height="39" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="33.000000" y="266.000000" width="103" height="39" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="62.500000" y="94.500000" width="43" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="69.500000" y="360.500000" width="30" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

d2renderers/d2svg/dark_theme/testdata/code/dark_theme.exp.svg

@@ -857,5 +857,7 @@
 </tspan></text><text class="text-mono" x="0" y="3.000000em" xml:space="preserve"><tspan fill="#fab387"></tspan><tspan fill="#cdd6f4">}</tspan></text></g></g></g><g id="text"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="352.000000" y="23.000000" width="383" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>Five is a sufficiently close approximation to infinity.</p>
 </div></foreignObject></g></g><g id="unknown"><g class="shape" ></g><g transform="translate(0.000000 170.000000)" class="light-code"><rect width="425.000000" height="38.000000" class="shape stroke-N1" style="fill:#ffffff" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve">Don't&#160;hit&#160;me!!&#160;&#160;I'm&#160;in&#160;the&#160;Twilight&#160;Zone!!!</text></g></g><g transform="translate(0.000000 170.000000)" class="dark-code"><rect width="425.000000" height="38.000000" class="shape stroke-N1" style="fill:#1e1e2e" /><g transform="translate(6 6)"><text class="text-mono" x="0" y="1.000000em" xml:space="preserve"><tspan fill="#fab387">Don't&#160;hit&#160;me!!&#160;&#160;I'm&#160;in&#160;the&#160;Twilight&#160;Zone!!!</tspan></text></g></g></g><g id="(code -- unknown)[0]"><path d="M 212.500000 72.000000 C 212.500000 110.000000 212.500000 130.000000 212.500000 168.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#d2-82882857)" /></g><mask id="d2-82882857" maskUnits="userSpaceOnUse" x="-101" y="-101" width="937" height="410">
 <rect x="-101" y="-101" width="937" height="410" fill="white"></rect>
-
+<rect x="133.000000" y="0.000000" width="154" height="65" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="352.000000" y="23.000000" width="383" height="24" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="0.000000" y="170.000000" width="420" height="33" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

d2renderers/d2svg/dark_theme/testdata/connection_label/dark_theme.exp.svg

@@ -98,5 +98,7 @@
 		.d2-1320785676 .color-AB4{color:#45475A;}
 		.d2-1320785676 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}]]></style><g id="a"><g class="shape" ><rect x="1.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="28.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="189.000000" width="55.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="227.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.500000 68.000000 C 27.500000 115.199997 27.500000 139.899994 27.500000 185.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1320785676)" /><text x="27.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">hello</text></g><mask id="d2-1320785676" maskUnits="userSpaceOnUse" x="-101" y="-101" width="257" height="457">
 <rect x="-101" y="-101" width="257" height="457" fill="white"></rect>
+<rect x="23.500000" y="22.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="211.500000" width="10" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="12.000000" y="116.000000" width="31" height="23" fill="black"></rect>
 </mask></svg></svg>

d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg

@@ -846,5 +846,8 @@
 </style><g id="x" style='opacity:0.400000'><g class="shape" ><rect x="162.000000" y="3.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.000000" y="41.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="276.000000" y="24.000000" width="347" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>linux: because a PC is a terrible thing to waste</p>
 </div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="162.000000" y="211.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="189.000000" y="249.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="users" style='opacity:0.400000'><g class="shape" ><rect x="683.000000" y="0.000000" width="211.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="683.000000" y="0.000000" width="211.000000" height="36.000000" class="class_header fill-N1" /><text x="693.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="693.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="796.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="884.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="683.000000" x2="894.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]" style='opacity:0.400000'><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.000000 71.000000 C 189.000000 127.000000 189.000000 155.500000 189.000000 207.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3707432891)" /><text x="189.000000" y="137.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="189.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="189.000000" dy="19.500000">just how to work the computer.</tspan></text></g><mask id="d2-3707432891" maskUnits="userSpaceOnUse" x="-100" y="-101" width="1095" height="479">
 <rect x="-100" y="-101" width="1095" height="479" fill="white"></rect>
+<rect x="184.500000" y="25.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="276.000000" y="24.000000" width="347" height="24" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="184.500000" y="233.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="0.000000" y="121.000000" width="378" height="39" fill="black"></rect>
 </mask></svg></svg>

d2renderers/d2svg/dark_theme/testdata/overlay/dark_theme.exp.svg

@@ -91,5 +91,8 @@
 		.d2-2779170942 .color-AB4{color:#45475A;}
 		.d2-2779170942 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}]]></style><g id="bright"><g class="shape" ><rect x="0.000000" y="0.000000" width="94.000000" height="66.000000" stroke="#000" fill="#fff" style="stroke-width:2;" /></g><text x="47.000000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">bright</text></g><g id="normal"><g class="shape" ><rect x="154.000000" y="0.000000" width="101.000000" height="66.000000" stroke="#000" fill="#ccc" style="stroke-width:2;" /></g><text x="204.500000" y="38.500000" fill="#000" class="text-bold" style="text-anchor:middle;font-size:16px">normal</text></g><g id="dark"><g class="shape" ><rect x="315.000000" y="0.000000" width="82.000000" height="66.000000" stroke="#000" fill="#555" style="stroke-width:2;" /></g><text x="356.000000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">dark</text></g><g id="darker"><g class="shape" ><rect x="457.000000" y="0.000000" width="99.000000" height="66.000000" stroke="#000" fill="#000" style="stroke-width:2;" /></g><text x="506.500000" y="38.500000" fill="#fff" class="text-bold" style="text-anchor:middle;font-size:16px">darker</text></g><mask id="d2-2779170942" maskUnits="userSpaceOnUse" x="-101" y="-101" width="758" height="268">
 <rect x="-101" y="-101" width="758" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="49" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="176.500000" y="22.500000" width="56" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="337.500000" y="22.500000" width="37" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="479.500000" y="22.500000" width="54" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/abspath.exp.svg

@@ -91,5 +91,6 @@
 		.d2-855222762 .color-AB4{color:#EDF0FD;}
 		.d2-855222762 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-855222762)" /></g><mask id="d2-855222762" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
 <rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/animation.exp.svg

@@ -871,14 +871,20 @@
 		}
 }]]></style><g style="animation: d2Transition-d2-508224771-0 5600ms infinite"  class="d2-508224771" width="412" height="247" viewBox="-206 -166 412 247"><rect x="-206.000000" y="-166.000000" width="412.000000" height="247.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="0.000000" y="-30.000000" class="text fill-N1" style="text-anchor:middle;font-size:35px">Chicken&#39;s plan</text></g><mask id="d2-508224771" maskUnits="userSpaceOnUse" x="-206" y="-166" width="412" height="247">
 <rect x="-206" y="-166" width="412" height="247" fill="white"></rect>
-
+<rect x="-105.000000" y="-65.000000" width="210" height="45" fill="rgba(0,0,0,0.75)"></rect>
 </mask></g><g style="animation: d2Transition-d2-508224771-1 5600ms infinite"  class="d2-508224771" width="412" height="333" viewBox="-131 -166 412 333"><rect x="-131.000000" y="-166.000000" width="412.000000" height="333.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="Approach road"><g class="shape" ><rect x="0.000000" y="0.000000" width="150.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="75.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Approach road</text></g><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="75.000000" y="-30.000000" class="text fill-N1" style="text-anchor:middle;font-size:35px">Chicken&#39;s plan</text></g><mask id="d2-3302893893" maskUnits="userSpaceOnUse" x="-131" y="-166" width="412" height="333">
 <rect x="-131" y="-166" width="412" height="333" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="105" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="-30.000000" y="-65.000000" width="210" height="45" fill="rgba(0,0,0,0.75)"></rect>
 </mask></g><g style="animation: d2Transition-d2-508224771-2 5600ms infinite"  class="d2-508224771" width="412" height="499" viewBox="-131 -166 412 499"><rect x="-131.000000" y="-166.000000" width="412.000000" height="499.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="Approach road"><g class="shape" ><rect x="0.000000" y="0.000000" width="150.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="75.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Approach road</text></g><g id="Cross road"><g class="shape" ><rect x="15.000000" y="166.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="75.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Cross road</text></g><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="75.000000" y="-30.000000" class="text fill-N1" style="text-anchor:middle;font-size:35px">Chicken&#39;s plan</text></g><g id="(Approach road -&gt; Cross road)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 75.000000 68.000000 C 75.000000 106.000000 75.000000 126.000000 75.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2454480105)" /></g><mask id="d2-2454480105" maskUnits="userSpaceOnUse" x="-131" y="-166" width="412" height="499">
 <rect x="-131" y="-166" width="412" height="499" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="105" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="37.500000" y="188.500000" width="75" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="-30.000000" y="-65.000000" width="210" height="45" fill="rgba(0,0,0,0.75)"></rect>
 </mask></g><g style="animation: d2Transition-d2-508224771-3 5600ms infinite"  class="d2-508224771" width="412" height="665" viewBox="-104 -166 412 665"><rect x="-104.000000" y="-166.000000" width="412.000000" height="665.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="Approach road"><g class="shape" ><rect x="27.000000" y="0.000000" width="150.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Approach road</text></g><g id="Cross road"><g class="shape" ><rect x="42.000000" y="166.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="102.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Cross road</text></g><g id="Make you wonder why"><g class="shape" ><rect x="0.000000" y="332.000000" width="203.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="101.500000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Make you wonder why</text></g><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="102.000000" y="-30.000000" class="text fill-N1" style="text-anchor:middle;font-size:35px">Chicken&#39;s plan</text></g><g id="(Approach road -&gt; Cross road)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 101.500000 68.000000 C 101.500000 106.000000 101.500000 126.000000 101.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-682060979)" /></g><g id="(Cross road -&gt; Make you wonder why)[0]"><path d="M 101.500000 234.000000 C 101.500000 272.000000 101.500000 292.000000 101.500000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-682060979)" /></g><mask id="d2-682060979" maskUnits="userSpaceOnUse" x="-104" y="-166" width="412" height="665">
 <rect x="-104" y="-166" width="412" height="665" fill="white"></rect>
-
+<rect x="49.500000" y="22.500000" width="105" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="64.500000" y="188.500000" width="75" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="354.500000" width="158" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="-3.000000" y="-65.000000" width="210" height="45" fill="rgba(0,0,0,0.75)"></rect>
 </mask></g></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/board_import/hello-world-x-y.exp.svg

@@ -91,5 +91,5 @@
 		.d2-685498927 .color-AB4{color:#EDF0FD;}
 		.d2-685498927 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="meow"><g class="shape" ><rect x="0.000000" y="0.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">meow</text></g><mask id="d2-685498927" maskUnits="userSpaceOnUse" x="-101" y="-101" width="290" height="268">
 <rect x="-101" y="-101" width="290" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="43" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/board_import/hello-world-x.exp.svg

@@ -106,5 +106,5 @@
 </svg>
 </g></g></a><mask id="d2-2353227294" maskUnits="userSpaceOnUse" x="-101" y="-118" width="305" height="285">
 <rect x="-101" y="-118" width="305" height="285" fill="white"></rect>
-
+<rect x="38.500000" y="22.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/board_import/hello-world.exp.svg

@@ -106,5 +106,5 @@
 </svg>
 </g></g></a><mask id="d2-2067460405" maskUnits="userSpaceOnUse" x="-101" y="-118" width="304" height="285">
 <rect x="-101" y="-118" width="304" height="285" fill="white"></rect>
-
+<rect x="38.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/center.exp.svg

@@ -91,5 +91,6 @@
 		.d2-855222762 .color-AB4{color:#EDF0FD;}
 		.d2-855222762 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-855222762)" /></g><mask id="d2-855222762" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
 <rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/chain_import.exp.svg

@@ -91,5 +91,5 @@
 		.d2-685498927 .color-AB4{color:#EDF0FD;}
 		.d2-685498927 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="meow"><g class="shape" ><rect x="0.000000" y="0.000000" width="88.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="44.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">meow</text></g><mask id="d2-685498927" maskUnits="userSpaceOnUse" x="-101" y="-101" width="290" height="268">
 <rect x="-101" y="-101" width="290" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="43" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/empty-base.exp.svg

@@ -118,11 +118,19 @@
 		}
 }]]></style><g style="animation: d2Transition-d2-1644916896-0 4200ms infinite"  class="d2-1644916896" width="255" height="434" viewBox="-101 -101 255 434"><rect x="-101.000000" y="-101.000000" width="255.000000" height="434.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-746933975)" /></g><mask id="d2-746933975" maskUnits="userSpaceOnUse" x="-101" y="-101" width="255" height="434">
 <rect x="-101" y="-101" width="255" height="434" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></g><g style="animation: d2Transition-d2-1644916896-1 4200ms infinite"  class="d2-1644916896" width="368" height="600" viewBox="-101 -101 368 600"><rect x="-101.000000" y="-101.000000" width="368.000000" height="600.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="d"><g class="shape" ><rect x="56.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-919984524)" /></g><g id="(b -&gt; d)[0]"><path d="M 26.500000 234.000000 C 26.500000 272.000000 33.299999 292.000000 58.250760 328.692294" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-919984524)" /></g><g id="(c -&gt; d)[0]"><path d="M 139.500000 234.000000 C 139.500000 272.000000 132.699997 292.000000 107.749240 328.692294" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-919984524)" /></g><mask id="d2-919984524" maskUnits="userSpaceOnUse" x="-101" y="-101" width="368" height="600">
 <rect x="-101" y="-101" width="368" height="600" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="78.500000" y="354.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="135.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></g><g style="animation: d2Transition-d2-1644916896-2 4200ms infinite"  class="d2-1644916896" width="368" height="766" viewBox="-101 -101 368 766"><rect x="-101.000000" y="-101.000000" width="368.000000" height="766.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="d"><g class="shape" ><rect x="56.000000" y="332.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="e"><g class="shape" ><rect x="57.000000" y="498.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="83.500000" y="536.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-348119987)" /></g><g id="(b -&gt; d)[0]"><path d="M 26.500000 234.000000 C 26.500000 272.000000 33.299999 292.000000 58.250760 328.692294" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-348119987)" /></g><g id="(c -&gt; d)[0]"><path d="M 139.500000 234.000000 C 139.500000 272.000000 132.699997 292.000000 107.749240 328.692294" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-348119987)" /></g><g id="(d -&gt; e)[0]"><path d="M 83.000000 400.000000 C 83.000000 438.000000 83.000000 458.000000 83.000000 494.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-348119987)" /></g><mask id="d2-348119987" maskUnits="userSpaceOnUse" x="-101" y="-101" width="368" height="766">
 <rect x="-101" y="-101" width="368" height="766" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="78.500000" y="354.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="135.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="79.500000" y="520.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></g></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/import.exp.svg

@@ -91,5 +91,6 @@
 		.d2-1393279198 .color-AB4{color:#EDF0FD;}
 		.d2-1393279198 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><ellipse rx="34.500000" ry="34.500000" cx="34.500000" cy="34.500000" class="shape stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="34.500000" y="40.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="2.000000" y="169.000000" width="66.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="35.000000" y="207.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 34.980001 70.999900 C 34.599998 109.000000 34.500000 129.000000 34.500000 165.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1393279198)" /></g><mask id="d2-1393279198" maskUnits="userSpaceOnUse" x="-101" y="-101" width="271" height="437">
 <rect x="-101" y="-101" width="271" height="437" fill="white"></rect>
-
+<rect x="30.500000" y="24.000000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="30.500000" y="191.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/import_spread_nested.exp.svg

@@ -91,5 +91,6 @@
 		.d2-3967102011 .color-AB4{color:#EDF0FD;}
 		.d2-3967102011 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="jon"><g class="shape" ><rect x="0.000000" y="0.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="34.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">jon</text></g><g id="jan"><g class="shape" ><rect x="129.000000" y="0.000000" width="68.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="163.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">jan</text></g><mask id="d2-3967102011" maskUnits="userSpaceOnUse" x="-101" y="-101" width="399" height="268">
 <rect x="-101" y="-101" width="399" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="24" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="151.500000" y="22.500000" width="23" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life/index.exp.svg

@@ -91,5 +91,6 @@
 		.d2-1380559207 .color-AB4{color:#EDF0FD;}
 		.d2-1380559207 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1380559207)" /></g><mask id="d2-1380559207" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
 <rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life/layers/broker.exp.svg

@@ -91,5 +91,6 @@
 		.d2-1194982555 .color-AB4{color:#EDF0FD;}
 		.d2-1194982555 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="mortgage"><g class="shape" ><rect x="0.000000" y="0.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mortgage</text></g><g id="realtor"><g class="shape" ><rect x="173.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="220.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">realtor</text></g><mask id="d2-1194982555" maskUnits="userSpaceOnUse" x="-101" y="-101" width="469" height="268">
 <rect x="-101" y="-101" width="469" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="68" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="195.500000" y="22.500000" width="49" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life/layers/core.exp.svg

@@ -91,5 +91,7 @@
 		.d2-4059799029 .color-AB4{color:#EDF0FD;}
 		.d2-4059799029 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="belief"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">belief</text></g><g id="food"><g class="shape" ><rect x="145.000000" y="0.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="184.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">food</text></g><g id="diet"><g class="shape" ><rect x="283.000000" y="0.000000" width="73.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diet</text></g><mask id="d2-4059799029" maskUnits="userSpaceOnUse" x="-101" y="-101" width="558" height="268">
 <rect x="-101" y="-101" width="558" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="40" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="167.500000" y="22.500000" width="33" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="305.500000" y="22.500000" width="28" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life/layers/stocks.exp.svg

@@ -91,5 +91,7 @@
 		.d2-1066622782 .color-AB4{color:#EDF0FD;}
 		.d2-1066622782 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="TSX"><g class="shape" ><rect x="0.000000" y="0.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="36.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TSX</text></g><g id="NYSE"><g class="shape" ><rect x="132.000000" y="0.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NYSE</text></g><g id="NASDAQ"><g class="shape" ><rect x="272.000000" y="0.000000" width="104.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="324.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NASDAQ</text></g><mask id="d2-1066622782" maskUnits="userSpaceOnUse" x="-101" y="-101" width="578" height="268">
 <rect x="-101" y="-101" width="578" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="154.500000" y="22.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="294.500000" y="22.500000" width="59" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life/scenarios/why.exp.svg

@@ -91,5 +91,6 @@
 		.d2-2561523587 .color-AB4{color:#EDF0FD;}
 		.d2-2561523587 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 22.784731 67.985636 C 18.204000 106.000000 18.200001 126.000000 22.523419 162.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2561523587)" /></g><g id="(y -&gt; x)[0]"><path d="M 31.214269 164.014364 C 35.794998 126.000000 35.799999 106.000000 31.476581 69.971507" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2561523587)" /></g><mask id="d2-2561523587" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
 <rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life_index_d2/index.exp.svg

@@ -91,5 +91,6 @@
 		.d2-1380559207 .color-AB4{color:#EDF0FD;}
 		.d2-1380559207 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1380559207)" /></g><mask id="d2-1380559207" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
 <rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life_index_d2/layers/broker.exp.svg

@@ -91,5 +91,6 @@
 		.d2-1194982555 .color-AB4{color:#EDF0FD;}
 		.d2-1194982555 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="mortgage"><g class="shape" ><rect x="0.000000" y="0.000000" width="113.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="56.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mortgage</text></g><g id="realtor"><g class="shape" ><rect x="173.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="220.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">realtor</text></g><mask id="d2-1194982555" maskUnits="userSpaceOnUse" x="-101" y="-101" width="469" height="268">
 <rect x="-101" y="-101" width="469" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="68" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="195.500000" y="22.500000" width="49" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life_index_d2/layers/core.exp.svg

@@ -91,5 +91,7 @@
 		.d2-4059799029 .color-AB4{color:#EDF0FD;}
 		.d2-4059799029 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="belief"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">belief</text></g><g id="food"><g class="shape" ><rect x="145.000000" y="0.000000" width="78.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="184.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">food</text></g><g id="diet"><g class="shape" ><rect x="283.000000" y="0.000000" width="73.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="319.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">diet</text></g><mask id="d2-4059799029" maskUnits="userSpaceOnUse" x="-101" y="-101" width="558" height="268">
 <rect x="-101" y="-101" width="558" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="40" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="167.500000" y="22.500000" width="33" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="305.500000" y="22.500000" width="28" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life_index_d2/layers/stocks.exp.svg

@@ -91,5 +91,7 @@
 		.d2-1066622782 .color-AB4{color:#EDF0FD;}
 		.d2-1066622782 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="TSX"><g class="shape" ><rect x="0.000000" y="0.000000" width="72.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="36.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">TSX</text></g><g id="NYSE"><g class="shape" ><rect x="132.000000" y="0.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NYSE</text></g><g id="NASDAQ"><g class="shape" ><rect x="272.000000" y="0.000000" width="104.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="324.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">NASDAQ</text></g><mask id="d2-1066622782" maskUnits="userSpaceOnUse" x="-101" y="-101" width="578" height="268">
 <rect x="-101" y="-101" width="578" height="268" fill="white"></rect>
-
+<rect x="22.500000" y="22.500000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="154.500000" y="22.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="294.500000" y="22.500000" width="59" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/multiboard/life_index_d2/scenarios/why.exp.svg

@@ -91,5 +91,6 @@
 		.d2-2561523587 .color-AB4{color:#EDF0FD;}
 		.d2-2561523587 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 22.784731 67.985636 C 18.204000 106.000000 18.200001 126.000000 22.523419 162.028493" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2561523587)" /></g><g id="(y -&gt; x)[0]"><path d="M 31.214269 164.014364 C 35.794998 126.000000 35.799999 106.000000 31.476581 69.971507" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2561523587)" /></g><mask id="d2-2561523587" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
 <rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/stdin.exp.svg

@@ -91,5 +91,6 @@
 		.d2-855222762 .color-AB4{color:#EDF0FD;}
 		.d2-855222762 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-855222762)" /></g><mask id="d2-855222762" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
 <rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
-
+<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests-cli/testdata/TestCLI_E2E/with-font.exp.svg

@@ -98,5 +98,7 @@
 		.d2-2631895454 .color-AB4{color:#EDF0FD;}
 		.d2-2631895454 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="a"><g class="shape" ><rect x="29.000000" y="0.000000" width="382.000000" height="83.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="220.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Why do computers get sick often?</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="204.000000" width="439.000000" height="83.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="219.500000" y="242.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Because their Windows are always open!</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 219.500000 85.000000 C 219.500000 131.399994 219.500000 155.699997 219.500000 200.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2631895454)" /><text x="219.500000" y="149.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">italic font</text></g><mask id="d2-2631895454" maskUnits="userSpaceOnUse" x="-101" y="-101" width="641" height="489">
 <rect x="-101" y="-101" width="641" height="489" fill="white"></rect>
+<rect x="51.500000" y="22.500000" width="337" height="38" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="226.500000" width="394" height="38" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="188.000000" y="133.000000" width="63" height="21" fill="black"></rect>
 </mask></svg></svg>

e2etests/testdata/patterns/3d/dagre/sketch.exp.svg

@@ -128,5 +128,6 @@
 <rect x="128" y="-5" width="66" height="84" fill="white"></rect>
 <path d="M140,10L155,3L181,3L194,37L181,72L166,79L140,79L128,44L140,10L166,10L179,44L166,79M166,10L181,3M179,44L194,37M166,79L181,72" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><polygon x="128.000000" y="10.000000" mask="url(#border-mask-y)" points="140,10 166,10 179,44 166,79 140,79 128,44" stroke="none" class=" fill-N5" style="stroke-width:2;" /><polygon x="128.000000" y="10.000000" mask="url(#border-mask-y)" points="140,10 166,10 179,44 166,79 140,79 128,44" class="dots-overlay" style="stroke-width:2;" /><polygon mask="url(#border-mask-y)" points="155,3 181,3 194,37 181,72 166,79 179,44 166,10 140,10" class=" fill-N4" style="stroke-width:2;" /><path d="M140,10 L155,3 L181,3 L194,37 L181,72 L166,79 L140,79 L128,44 L140,10 L166,10 L179,44 L166,79 M166,10 L181,3 M179,44 L194,37 M166,79 L181,72" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="153.500000" y="50.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><mask id="d2-297823489" maskUnits="userSpaceOnUse" x="-1" y="-2" width="197" height="84">
 <rect x="-1" y="-2" width="197" height="84" fill="white"></rect>
-
+<rect x="22.500000" y="37.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="149.000000" y="34.000000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/patterns/real/dagre/sketch.exp.svg

@@ -131,6 +131,10 @@
 </pattern>
 </defs><g id="NETWORK"><g class="shape" ><rect x="0.000000" y="41.000000" width="361.000000" height="422.000000" stroke="black" fill="#E7E9EE" style="stroke-width:2;" /><rect x="0.000000" y="41.000000" width="361.000000" height="422.000000" class="dots-overlay" style="stroke-width:2;" /><rect x="5.000000" y="46.000000" width="351.000000" height="412.000000" stroke="black" fill="transparent" style="stroke-width:2;" /></g><text x="180.500000" y="28.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:28px">NETWORK</text></g><g id="NETWORK.CELL TOWER"><g class="shape" ><rect x="20.000000" y="106.000000" width="321.000000" height="327.000000" stroke="black" fill="#F5F6F9" style="stroke-width:2;" /><rect x="20.000000" y="106.000000" width="321.000000" height="327.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="180.500000" y="94.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:24px">CELL TOWER</text></g><g id="NETWORK.CELL TOWER.satellites"><g class="shape" ><path d="M 120 138 H 266 C 262 138 251 156 251 171 C 251 186 262 204 266 204 H 120 C 116 204 105 186 105 171 C 105 156 116 138 120 138 Z" stroke="black" fill="white" style="stroke-width:2;" /><path d="M 110 148 H 256 C 252 148 241 166 241 181 C 241 196 252 214 256 214 H 110 C 106 214 95 196 95 181 C 95 166 106 148 110 148 Z" stroke="black" fill="white" style="stroke-width:2;" /></g><text x="175.500000" y="186.500000" class="text-mono fill-N1" style="text-anchor:middle;font-size:16px">SATELLITES</text></g><g id="NETWORK.CELL TOWER.transmitter"><g class="shape" ><rect x="105.000000" y="335.000000" width="151.000000" height="66.000000" stroke="black" fill="white" style="stroke-width:2;" /></g><text x="180.500000" y="373.500000" class="text-mono fill-N1" style="text-anchor:middle;font-size:16px">TRANSMITTER</text></g><g id="NETWORK.CELL TOWER.(satellites -&gt; transmitter)[0]"><marker id="mk-27687146" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 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="black" class="connection" stroke-width="2" /> </marker><path d="M 148.754590 216.564913 C 111.800003 263.000000 112.250000 287.200012 149.714288 332.906432" stroke="black" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-27687146)" mask="url(#d2-3255560050)" /><text x="112.000000" y="281.000000" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="NETWORK.CELL TOWER.(satellites -&gt; transmitter)[1]"><path d="M 180.008333 216.999983 C 180.199997 263.000000 180.250000 287.200012 180.250000 332.000000" stroke="black" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-27687146)" mask="url(#d2-3255560050)" /><text x="180.000000" y="281.000000" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="NETWORK.CELL TOWER.(satellites -&gt; transmitter)[2]"><path d="M 212.237377 216.571273 C 248.800003 263.000000 248.250000 287.200012 210.785712 332.906432" stroke="black" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-27687146)" mask="url(#d2-3255560050)" /><text x="249.000000" y="282.000000" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><mask id="d2-3255560050" maskUnits="userSpaceOnUse" x="-1" y="0" width="363" height="464">
 <rect x="-1" y="0" width="363" height="464" fill="white"></rect>
+<rect x="122.500000" y="0.000000" width="116" height="36" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="109.000000" y="70.000000" width="143" height="31" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="127.500000" y="170.500000" width="96" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="127.500000" y="357.500000" width="106" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="93.000000" y="265.000000" width="38" height="21" fill="black"></rect>
 <rect x="161.000000" y="265.000000" width="38" height="21" fill="black"></rect>
 <rect x="230.000000" y="266.000000" width="38" height="21" fill="black"></rect>

e2etests/testdata/patterns/root-dots-with-fill/dagre/sketch.exp.svg

@@ -124,5 +124,9 @@
 </pattern>
 </defs><g id="x"><g class="shape" ><rect x="191.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="217.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="162.000000" y="332.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="188.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="abcd"><g class="shape" ><rect x="114.000000" y="166.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="154.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">abcd</text></g><g id="g"><g class="shape" ><rect x="254.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="281.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.166474 45.343862 C 59.799000 101.709000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(y -&gt; z)[0]"><path d="M 27.000000 234.000000 C 27.000000 272.000000 53.900002 295.910004 157.946979 349.716585" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(x -&gt; abcd)[0]"><path d="M 191.037736 67.588432 C 161.649994 106.000000 154.000000 126.000000 154.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(x -&gt; g)[0]"><path d="M 243.961272 67.588433 C 273.348999 106.000000 281.000000 126.000000 281.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(x -&gt; z)[0]"><path d="M 245.687594 50.927326 C 327.200012 102.769997 348.000000 132.600006 348.000000 157.500000 C 348.000000 182.399994 321.200012 295.799988 217.556225 349.168809" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><mask id="d2-324910481" maskUnits="userSpaceOnUse" x="-1" y="-1" width="350" height="400">
 <rect x="-1" y="-1" width="350" height="400" fill="white"></rect>
-
+<rect x="213.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="184.500000" y="354.500000" width="7" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="136.500000" y="188.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="276.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/patterns/root-dots/dagre/sketch.exp.svg

@@ -124,5 +124,9 @@
 </pattern>
 </defs><g id="x"><g class="shape" ><rect x="191.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="217.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="162.000000" y="332.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="188.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="abcd"><g class="shape" ><rect x="114.000000" y="166.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="154.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">abcd</text></g><g id="g"><g class="shape" ><rect x="254.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="281.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.166474 45.343862 C 59.799000 101.709000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(y -&gt; z)[0]"><path d="M 27.000000 234.000000 C 27.000000 272.000000 53.900002 295.910004 157.946979 349.716585" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(x -&gt; abcd)[0]"><path d="M 191.037736 67.588432 C 161.649994 106.000000 154.000000 126.000000 154.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(x -&gt; g)[0]"><path d="M 243.961272 67.588433 C 273.348999 106.000000 281.000000 126.000000 281.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><g id="(x -&gt; z)[0]"><path d="M 245.687594 50.927326 C 327.200012 102.769997 348.000000 132.600006 348.000000 157.500000 C 348.000000 182.399994 321.200012 295.799988 217.556225 349.168809" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-324910481)" /></g><mask id="d2-324910481" maskUnits="userSpaceOnUse" x="-1" y="-1" width="350" height="400">
 <rect x="-1" y="-1" width="350" height="400" fill="white"></rect>
-
+<rect x="213.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="184.500000" y="354.500000" width="7" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="136.500000" y="188.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="276.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/patterns/shape/dagre/sketch.exp.svg

@@ -124,5 +124,9 @@
 </pattern>
 </defs><g id="x"><g class="shape" ><rect x="191.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="191.000000" y="0.000000" width="53.000000" height="66.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="217.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="162.000000" y="332.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="188.000000" y="370.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="abcd"><g class="shape" ><rect x="114.000000" y="166.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="114.000000" y="166.000000" width="80.000000" height="66.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="154.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">abcd</text></g><g id="g"><g class="shape" ><rect x="254.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="281.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.166474 45.343862 C 59.799000 101.709000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1076062577)" /></g><g id="(y -&gt; z)[0]"><path d="M 27.000000 234.000000 C 27.000000 272.000000 53.900002 295.910004 157.946979 349.716585" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1076062577)" /></g><g id="(x -&gt; abcd)[0]"><path d="M 191.037736 67.588432 C 161.649994 106.000000 154.000000 126.000000 154.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1076062577)" /></g><g id="(x -&gt; g)[0]"><path d="M 243.961272 67.588433 C 273.348999 106.000000 281.000000 126.000000 281.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1076062577)" /></g><g id="(x -&gt; z)[0]"><path d="M 245.687594 50.927326 C 327.200012 102.769997 348.000000 132.600006 348.000000 157.500000 C 348.000000 182.399994 321.200012 295.799988 217.556225 349.168809" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1076062577)" /></g><mask id="d2-1076062577" maskUnits="userSpaceOnUse" x="-1" y="-1" width="350" height="400">
 <rect x="-1" y="-1" width="350" height="400" fill="white"></rect>
-
+<rect x="213.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="22.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="184.500000" y="354.500000" width="7" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="136.500000" y="188.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="276.500000" y="188.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/ampersand-escape/dagre/sketch.exp.svg

@@ -107,5 +107,7 @@
 </svg>
 </g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="158.000000" y="0.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="192.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="287.000000" y="0.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="327.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="d2-1813696622" maskUnits="userSpaceOnUse" x="-1" y="-18" width="370" height="85">
 <rect x="-1" y="-18" width="370" height="85" fill="white"></rect>
-
+<rect x="38.500000" y="22.500000" width="21" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="180.500000" y="22.500000" width="24" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="309.500000" y="22.500000" width="36" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/ampersand-escape/elk/sketch.exp.svg

@@ -107,5 +107,7 @@
 </svg>
 </g><title>beans &amp; rice</title></g><g id="foo"><g class="shape" ><rect x="130.000000" y="12.000000" width="69.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="164.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">foo</text></g><g id="&#34;&amp;bar&#34;"><g class="shape" ><rect x="219.000000" y="12.000000" width="81.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="259.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">&amp;bar</text></g><mask id="d2-1299322987" maskUnits="userSpaceOnUse" x="11" y="-6" width="290" height="85">
 <rect x="11" y="-6" width="290" height="85" fill="white"></rect>
-
+<rect x="50.500000" y="34.500000" width="21" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="152.500000" y="34.500000" width="24" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="241.500000" y="34.500000" width="36" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/bold_edge_label/dagre/sketch.exp.svg

@@ -98,6 +98,9 @@
 		.d2-481575301 .color-AB4{color:#EDF0FD;}
 		.d2-481575301 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="184.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="211.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="371.000000" y="0.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="397.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 55.000000 33.000000 C 105.400002 33.000000 131.699997 33.000000 180.500000 33.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-481575301)" /><text x="118.500000" y="39.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">sync</text></g><g id="(y -&gt; z)[0]"><path d="M 240.000000 33.000000 C 291.200012 33.000000 317.899994 33.000000 367.500000 33.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-481575301)" /><text x="304.500000" y="39.000000" class="text-bold fill-N2" style="text-anchor:middle;font-size:16px">sync</text></g><mask id="d2-481575301" maskUnits="userSpaceOnUse" x="-1" y="-1" width="425" height="68">
 <rect x="-1" y="-1" width="425" height="68" fill="white"></rect>
+<rect x="22.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="206.500000" y="22.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="393.500000" y="22.500000" width="7" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="103.000000" y="23.000000" width="31" height="21" fill="black"></rect>
 <rect x="288.000000" y="23.000000" width="33" height="21" fill="black"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/bold_edge_label/elk/sketch.exp.svg

@@ -98,6 +98,9 @@
 		.d2-2275583681 .color-AB4{color:#EDF0FD;}
 		.d2-2275583681 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="236.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="263.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="z"><g class="shape" ><rect x="463.000000" y="12.000000" width="52.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="489.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">z</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 67.000000 45.000000 L 232.000000 45.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2275583681)" /><text x="150.500000" y="51.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">sync</text></g><g id="(y -&gt; z)[0]"><path d="M 292.000000 45.000000 L 459.000000 45.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2275583681)" /><text x="376.500000" y="51.000000" class="text-bold fill-N2" style="text-anchor:middle;font-size:16px">sync</text></g><mask id="d2-2275583681" maskUnits="userSpaceOnUse" x="11" y="11" width="505" height="68">
 <rect x="11" y="11" width="505" height="68" fill="white"></rect>
+<rect x="34.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="258.500000" y="34.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="485.500000" y="34.500000" width="7" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="135.000000" y="35.000000" width="31" height="21" fill="black"></rect>
 <rect x="360.000000" y="35.000000" width="33" height="21" fill="black"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/code_leading_trailing_newlines/dagre/sketch.exp.svg

@@ -139,5 +139,7 @@
 </tspan></text><text class="text-mono" x="0" y="5.000000em" xml:space="preserve"><tspan fill="#fab387"></tspan><tspan fill="#fab387">
 </tspan></text></g></g></g><mask id="d2-60125551" maskUnits="userSpaceOnUse" x="-1" y="-1" width="681" height="152">
 <rect x="-1" y="-1" width="681" height="152" fill="white"></rect>
-
+<rect x="0.000000" y="0.000000" width="234" height="145" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="299.000000" y="16.000000" width="155" height="113" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="519.000000" y="16.000000" width="155" height="113" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/code_leading_trailing_newlines/elk/sketch.exp.svg

@@ -139,5 +139,7 @@
 </tspan></text><text class="text-mono" x="0" y="5.000000em" xml:space="preserve"><tspan fill="#fab387"></tspan><tspan fill="#fab387">
 </tspan></text></g></g></g><mask id="d2-2533851426" maskUnits="userSpaceOnUse" x="11" y="11" width="601" height="152">
 <rect x="11" y="11" width="601" height="152" fill="white"></rect>
-
+<rect x="12.000000" y="12.000000" width="234" height="145" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="271.000000" y="28.000000" width="155" height="113" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="451.000000" y="28.000000" width="155" height="113" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/cylinder_grid_label/dagre/sketch.exp.svg

@@ -98,5 +98,7 @@
 		.d2-308635667 .color-AB4{color:#EDF0FD;}
 		.d2-308635667 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="container title is hidden"><g class="shape" ><path d="M 0 24 C 0 0 129 0 143 0 C 157 0 286 0 286 24 V 340 C 286 364 157 364 143 364 C 129 364 0 364 0 340 V 24 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 0 24 C 0 48 129 48 143 48 C 157 48 286 48 286 24" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="143.000000" y="81.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container title is hidden</text></g><g id="container title is hidden.first"><g class="shape" ><rect x="95.000000" y="108.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="142.500000" y="146.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">first</text></g><g id="container title is hidden.second"><g class="shape" ><rect x="95.000000" y="214.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="142.500000" y="252.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">second</text></g><mask id="d2-308635667" maskUnits="userSpaceOnUse" x="-1" y="-1" width="288" height="366">
 <rect x="-1" y="-1" width="288" height="366" fill="white"></rect>
-
+<rect x="5.000000" y="53.000000" width="276" height="36" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="127.500000" y="130.500000" width="30" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="117.500000" y="236.500000" width="50" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/cylinder_grid_label/elk/sketch.exp.svg

@@ -98,5 +98,7 @@
 		.d2-1024055490 .color-AB4{color:#EDF0FD;}
 		.d2-1024055490 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="container title is hidden"><g class="shape" ><path d="M 12 36 C 12 12 141 12 155 12 C 169 12 298 12 298 36 V 352 C 298 376 169 376 155 376 C 141 376 12 376 12 352 V 36 Z" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /><path d="M 12 36 C 12 60 141 60 155 60 C 169 60 298 60 298 36" class=" stroke-B1 fill-AA4" style="stroke-width:2;" /></g><text x="155.000000" y="93.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container title is hidden</text></g><g id="container title is hidden.first"><g class="shape" ><rect x="107.000000" y="120.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="154.500000" y="158.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">first</text></g><g id="container title is hidden.second"><g class="shape" ><rect x="107.000000" y="226.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="154.500000" y="264.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">second</text></g><mask id="d2-1024055490" maskUnits="userSpaceOnUse" x="11" y="11" width="288" height="366">
 <rect x="11" y="11" width="288" height="366" fill="white"></rect>
-
+<rect x="17.000000" y="65.000000" width="276" height="36" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="139.500000" y="142.500000" width="30" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="129.500000" y="248.500000" width="50" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg

@@ -98,5 +98,7 @@
 		.d2-260708190 .color-AB4{color:#EDF0FD;}
 		.d2-260708190 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="41.000000" width="266.000000" height="125.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="133.000000" y="28.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="40.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="66.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="173.000000" y="70.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="199.500000" y="108.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 94.699286 85.996286 C 114.333000 73.809998 121.000000 70.500000 123.000000 70.500000 C 125.000000 70.500000 127.666000 77.099998 129.666000 87.000000 C 131.666000 96.900002 131.666000 110.099998 129.666000 120.000000 C 127.666000 129.899994 114.333000 133.188995 96.398573 122.057429" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-260708190)" /></g><mask id="d2-260708190" maskUnits="userSpaceOnUse" x="-1" y="0" width="268" height="167">
 <rect x="-1" y="0" width="268" height="167" fill="white"></rect>
-
+<rect x="126.500000" y="0.000000" width="13" height="36" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="62.500000" y="92.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="195.500000" y="92.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>

e2etests/testdata/regression/elk_loop_panic/elk/sketch.exp.svg

@@ -98,5 +98,7 @@
 		.d2-3315729193 .color-AB4{color:#EDF0FD;}
 		.d2-3315729193 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="276.000000" height="166.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="150.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">x</text></g><g id="x.a"><g class="shape" ><rect x="112.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="138.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="x.b"><g class="shape" ><rect x="185.000000" y="62.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="211.500000" y="100.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="x.(a -&gt; a)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 110.000000 84.000000 L 72.000000 84.000000 S 62.000000 84.000000 62.000000 94.000000 L 62.000000 96.000000 S 62.000000 106.000000 72.000000 106.000000 L 108.000000 106.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3315729193)" /></g><mask id="d2-3315729193" maskUnits="userSpaceOnUse" x="11" y="11" width="278" height="168">
 <rect x="11" y="11" width="278" height="168" fill="white"></rect>
-
+<rect x="143.500000" y="17.000000" width="13" height="36" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="134.500000" y="84.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="207.500000" y="84.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 </mask></svg></svg>